@oxyhq/bloom 0.29.2 → 0.29.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/design-tokens/theme.css +81 -0
- package/lib/commonjs/typography/defaults.js +22 -0
- package/lib/commonjs/typography/defaults.js.map +1 -0
- package/lib/commonjs/typography/index.js +32 -13
- package/lib/commonjs/typography/index.js.map +1 -1
- package/lib/commonjs/typography/styled-text.js +36 -0
- package/lib/commonjs/typography/styled-text.js.map +1 -0
- package/lib/module/design-tokens/theme.css +81 -0
- package/lib/module/typography/defaults.js +17 -0
- package/lib/module/typography/defaults.js.map +1 -0
- package/lib/module/typography/index.js +33 -14
- package/lib/module/typography/index.js.map +1 -1
- package/lib/module/typography/styled-text.js +31 -0
- package/lib/module/typography/styled-text.js.map +1 -0
- package/lib/typescript/commonjs/typography/defaults.d.ts +11 -0
- package/lib/typescript/commonjs/typography/defaults.d.ts.map +1 -0
- package/lib/typescript/commonjs/typography/index.d.ts +11 -9
- package/lib/typescript/commonjs/typography/index.d.ts.map +1 -1
- package/lib/typescript/commonjs/typography/styled-text.d.ts +15 -0
- package/lib/typescript/commonjs/typography/styled-text.d.ts.map +1 -0
- package/lib/typescript/module/typography/defaults.d.ts +11 -0
- package/lib/typescript/module/typography/defaults.d.ts.map +1 -0
- package/lib/typescript/module/typography/index.d.ts +11 -9
- package/lib/typescript/module/typography/index.d.ts.map +1 -1
- package/lib/typescript/module/typography/styled-text.d.ts +15 -0
- package/lib/typescript/module/typography/styled-text.d.ts.map +1 -0
- package/package.json +9 -3
- package/src/__tests__/design-tokens.test.ts +23 -0
- package/src/design-tokens/theme.css +81 -0
- package/src/typography/__tests__/defaults.test.ts +57 -0
- package/src/typography/defaults.ts +28 -0
- package/src/typography/index.tsx +53 -13
- package/src/typography/styled-text.ts +41 -0
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* AUTO-GENERATED by scripts/generate-theme-css.ts — DO NOT EDIT.
|
|
3
|
+
* Source of truth: bloomThemeCss() in src/design-tokens/theme-css.ts.
|
|
4
|
+
* Re-run `bun run generate:theme-css` (or any `bun run build`) after
|
|
5
|
+
* changing any design token.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
@theme {
|
|
9
|
+
--color-bg: var(--background);
|
|
10
|
+
--color-fill: var(--card);
|
|
11
|
+
--color-fill-secondary: var(--muted);
|
|
12
|
+
--color-fill-hover: var(--accent);
|
|
13
|
+
--color-fill-brand: var(--primary);
|
|
14
|
+
--color-fill-brand-hover: var(--ring);
|
|
15
|
+
--color-fill-inverse: var(--foreground);
|
|
16
|
+
--color-fill-inverse-hover: var(--muted-foreground);
|
|
17
|
+
--color-fill-placeholder: var(--muted);
|
|
18
|
+
--color-text: var(--foreground);
|
|
19
|
+
--color-text-secondary: var(--muted-foreground);
|
|
20
|
+
--color-text-tertiary: var(--muted-foreground);
|
|
21
|
+
--color-text-inverse: var(--primary-foreground);
|
|
22
|
+
--color-text-fixed-light: var(--primary-foreground);
|
|
23
|
+
--color-text-placeholder: var(--muted-foreground);
|
|
24
|
+
--color-border: var(--border);
|
|
25
|
+
--color-border-image: var(--border);
|
|
26
|
+
--color-border-secondary: var(--input);
|
|
27
|
+
--color-border-input: var(--input);
|
|
28
|
+
--color-border-input-active: var(--ring);
|
|
29
|
+
--spacing-space-2: 2px;
|
|
30
|
+
--spacing-space-4: 4px;
|
|
31
|
+
--spacing-space-8: 8px;
|
|
32
|
+
--spacing-space-12: 12px;
|
|
33
|
+
--spacing-space-16: 16px;
|
|
34
|
+
--spacing-space-20: 20px;
|
|
35
|
+
--spacing-space-24: 24px;
|
|
36
|
+
--spacing-space-32: 32px;
|
|
37
|
+
--spacing-screen-margin: 20px;
|
|
38
|
+
--radius-radius-8: 8px;
|
|
39
|
+
--radius-radius-12: 12px;
|
|
40
|
+
--radius-radius-20: 20px;
|
|
41
|
+
--radius-radius-28: 28px;
|
|
42
|
+
--radius-radius-max: 9999px;
|
|
43
|
+
--border-width-hairline: 0.5px;
|
|
44
|
+
--text-caption: 11px;
|
|
45
|
+
--text-caption--line-height: 14px;
|
|
46
|
+
--text-caption--font-weight: 400;
|
|
47
|
+
--font-caption: var(--bloom-font-sans);
|
|
48
|
+
--text-bodySmall: 13px;
|
|
49
|
+
--text-bodySmall--line-height: 18px;
|
|
50
|
+
--text-bodySmall--font-weight: 400;
|
|
51
|
+
--font-bodySmall: var(--bloom-font-sans);
|
|
52
|
+
--text-bodyTitleSmall: 13px;
|
|
53
|
+
--text-bodyTitleSmall--line-height: 18px;
|
|
54
|
+
--text-bodyTitleSmall--font-weight: 600;
|
|
55
|
+
--font-bodyTitleSmall: var(--bloom-font-sans);
|
|
56
|
+
--text-body: 15px;
|
|
57
|
+
--text-body--line-height: 22px;
|
|
58
|
+
--text-body--font-weight: 400;
|
|
59
|
+
--font-body: var(--bloom-font-sans);
|
|
60
|
+
--text-subtitle: 17px;
|
|
61
|
+
--text-subtitle--line-height: 24px;
|
|
62
|
+
--text-subtitle--font-weight: 500;
|
|
63
|
+
--font-subtitle: var(--bloom-font-sans);
|
|
64
|
+
--text-sectionTitle: 20px;
|
|
65
|
+
--text-sectionTitle--line-height: 26px;
|
|
66
|
+
--text-sectionTitle--font-weight: 600;
|
|
67
|
+
--font-sectionTitle: var(--bloom-font-sans);
|
|
68
|
+
--text-headerBold: 28px;
|
|
69
|
+
--text-headerBold--line-height: 34px;
|
|
70
|
+
--text-headerBold--font-weight: 700;
|
|
71
|
+
--font-headerBold: var(--bloom-font-display);
|
|
72
|
+
--text-buttonLarge: 17px;
|
|
73
|
+
--text-buttonLarge--line-height: 22px;
|
|
74
|
+
--text-buttonLarge--font-weight: 600;
|
|
75
|
+
--font-buttonLarge: var(--bloom-font-sans);
|
|
76
|
+
--font-bloom-sans: var(--bloom-font-sans);
|
|
77
|
+
--font-bloom-display: var(--bloom-font-display);
|
|
78
|
+
--font-bloom-mono: var(--bloom-font-mono);
|
|
79
|
+
--shadow-s: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.10);
|
|
80
|
+
--shadow-m: 0 4px 12px rgb(0 0 0 / 0.08), 0 2px 6px rgb(0 0 0 / 0.12);
|
|
81
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.mergeTypographyStyle = mergeTypographyStyle;
|
|
7
|
+
exports.typographyDefaultsWhenNoClassName = typographyDefaultsWhenNoClassName;
|
|
8
|
+
/**
|
|
9
|
+
* Bloom typography defaults are applied via inline `style` only when the caller
|
|
10
|
+
* does not pass `className`. When `className` is present, NativeWind compiles
|
|
11
|
+
* font-size / line-height / weight / color utilities into `style` first; inline
|
|
12
|
+
* defaults that repeat those keys would win the merge and silently override the
|
|
13
|
+
* utilities (the Homiio hero-title bug).
|
|
14
|
+
*/
|
|
15
|
+
function typographyDefaultsWhenNoClassName(className, defaults) {
|
|
16
|
+
return className?.trim() ? undefined : defaults;
|
|
17
|
+
}
|
|
18
|
+
function mergeTypographyStyle(className, defaults, base, style) {
|
|
19
|
+
const resolvedDefaults = defaults ? typographyDefaultsWhenNoClassName(className, defaults) : undefined;
|
|
20
|
+
return [resolvedDefaults, base, style];
|
|
21
|
+
}
|
|
22
|
+
//# sourceMappingURL=defaults.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["typographyDefaultsWhenNoClassName","className","defaults","trim","undefined","mergeTypographyStyle","base","style","resolvedDefaults"],"sourceRoot":"../../../src","sources":["typography/defaults.ts"],"mappings":";;;;;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,iCAAiCA,CAC/CC,SAA6B,EAC7BC,QAAmB,EACI;EACvB,OAAOD,SAAS,EAAEE,IAAI,CAAC,CAAC,GAAGC,SAAS,GAAGF,QAAQ;AACjD;AAEO,SAASG,oBAAoBA,CAClCJ,SAA6B,EAC7BC,QAA+B,EAC/BI,IAA0B,EAC1BC,KAAuC,EACjB;EACtB,MAAMC,gBAAgB,GAAGN,QAAQ,GAC7BF,iCAAiC,CAACC,SAAS,EAAEC,QAAQ,CAAC,GACtDE,SAAS;EAEb,OAAO,CAACI,gBAAgB,EAAEF,IAAI,EAAEC,KAAK,CAAC;AACxC","ignoreList":[]}
|
|
@@ -16,6 +16,8 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
16
16
|
var _reactNative = require("react-native");
|
|
17
17
|
var _useTheme = require("../theme/use-theme.js");
|
|
18
18
|
var _tokens = require("../fonts/tokens.js");
|
|
19
|
+
var _defaults = require("./defaults.js");
|
|
20
|
+
var _styledText = require("./styled-text.js");
|
|
19
21
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
20
22
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
21
23
|
/**
|
|
@@ -44,32 +46,42 @@ function fontFamilyStyle(kind) {
|
|
|
44
46
|
}
|
|
45
47
|
const SANS_FONT_FAMILY = fontFamilyStyle('sans');
|
|
46
48
|
const DISPLAY_FONT_FAMILY = fontFamilyStyle('display');
|
|
49
|
+
const DEFAULT_TEXT_TYPOGRAPHY = {
|
|
50
|
+
fontSize: 13
|
|
51
|
+
};
|
|
47
52
|
|
|
48
53
|
/**
|
|
49
54
|
* Base text component with theme-aware default color and the Bloom sans
|
|
50
|
-
* font family applied.
|
|
55
|
+
* font family applied. NativeWind `className` utilities (text-*, font-*,
|
|
56
|
+
* leading-*, text-foreground, …) override defaults when provided.
|
|
51
57
|
*/
|
|
52
58
|
const TextComponent = function Text({
|
|
53
59
|
children,
|
|
54
60
|
style,
|
|
61
|
+
className,
|
|
55
62
|
...rest
|
|
56
63
|
}) {
|
|
57
64
|
const {
|
|
58
65
|
colors
|
|
59
66
|
} = (0, _useTheme.useTheme)();
|
|
60
|
-
|
|
67
|
+
const InteropText = (0, _styledText.getInteropText)();
|
|
68
|
+
const interopActive = (0, _styledText.hasTypographyClassNameInterop)();
|
|
69
|
+
const resolvedClassName = interopActive && className?.trim() ? className : undefined;
|
|
70
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(InteropText, {
|
|
61
71
|
...rest,
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
72
|
+
...(resolvedClassName ? {
|
|
73
|
+
className: resolvedClassName
|
|
74
|
+
} : {}),
|
|
75
|
+
style: (0, _defaults.mergeTypographyStyle)(resolvedClassName, {
|
|
76
|
+
...DEFAULT_TEXT_TYPOGRAPHY,
|
|
77
|
+
color: colors.text
|
|
78
|
+
}, SANS_FONT_FAMILY, style),
|
|
67
79
|
children: children
|
|
68
80
|
});
|
|
69
81
|
};
|
|
70
82
|
const Text = exports.Span = exports.Text = /*#__PURE__*/(0, _react.memo)(TextComponent);
|
|
71
83
|
Text.displayName = 'Text';
|
|
72
|
-
const
|
|
84
|
+
const HEADING_TYPOGRAPHY = {
|
|
73
85
|
...DISPLAY_FONT_FAMILY,
|
|
74
86
|
fontWeight: '700'
|
|
75
87
|
};
|
|
@@ -78,16 +90,19 @@ function createHeadingElement({
|
|
|
78
90
|
}) {
|
|
79
91
|
return function HeadingElement({
|
|
80
92
|
style,
|
|
93
|
+
className,
|
|
81
94
|
...rest
|
|
82
95
|
}) {
|
|
83
96
|
const extraProps = _reactNative.Platform.OS === 'web' ? {
|
|
84
97
|
role: 'heading',
|
|
85
98
|
'aria-level': level
|
|
86
99
|
} : {};
|
|
100
|
+
const headingBase = className?.trim() ? DISPLAY_FONT_FAMILY : HEADING_TYPOGRAPHY;
|
|
87
101
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Text, {
|
|
88
102
|
...extraProps,
|
|
89
103
|
...rest,
|
|
90
|
-
|
|
104
|
+
className: className,
|
|
105
|
+
style: [headingBase, style]
|
|
91
106
|
});
|
|
92
107
|
};
|
|
93
108
|
}
|
|
@@ -115,20 +130,24 @@ const H6 = exports.H6 = createHeadingElement({
|
|
|
115
130
|
level: 6
|
|
116
131
|
});
|
|
117
132
|
H6.displayName = 'H6';
|
|
133
|
+
const DEFAULT_PARAGRAPH_TYPOGRAPHY = {
|
|
134
|
+
fontSize: 15,
|
|
135
|
+
lineHeight: 15 * 1.625
|
|
136
|
+
};
|
|
118
137
|
function P({
|
|
119
138
|
style,
|
|
139
|
+
className,
|
|
120
140
|
...rest
|
|
121
141
|
}) {
|
|
122
142
|
const extraProps = _reactNative.Platform.OS === 'web' ? {
|
|
123
143
|
role: 'paragraph'
|
|
124
144
|
} : {};
|
|
145
|
+
const paragraphDefaults = (0, _defaults.typographyDefaultsWhenNoClassName)(className, DEFAULT_PARAGRAPH_TYPOGRAPHY);
|
|
125
146
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Text, {
|
|
126
147
|
...extraProps,
|
|
127
148
|
...rest,
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
lineHeight: 15 * 1.625
|
|
131
|
-
}, style]
|
|
149
|
+
className: className,
|
|
150
|
+
style: [paragraphDefaults, style]
|
|
132
151
|
});
|
|
133
152
|
}
|
|
134
153
|
P.displayName = 'P';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_useTheme","_tokens","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","fontFamilyStyle","kind","Platform","OS","fontFamily","SANS_FONT_FAMILY","DISPLAY_FONT_FAMILY","TextComponent","Text","children","style","rest","colors","useTheme","jsx","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_useTheme","_tokens","_defaults","_styledText","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","fontFamilyStyle","kind","Platform","OS","fontFamily","SANS_FONT_FAMILY","DISPLAY_FONT_FAMILY","DEFAULT_TEXT_TYPOGRAPHY","fontSize","TextComponent","Text","children","style","className","rest","colors","useTheme","InteropText","getInteropText","interopActive","hasTypographyClassNameInterop","resolvedClassName","trim","undefined","jsx","mergeTypographyStyle","color","text","exports","Span","memo","displayName","HEADING_TYPOGRAPHY","fontWeight","createHeadingElement","level","HeadingElement","extraProps","role","headingBase","H1","H2","H3","H4","H5","H6","DEFAULT_PARAGRAPH_TYPOGRAPHY","lineHeight","P","paragraphDefaults","typographyDefaultsWhenNoClassName"],"sourceRoot":"../../../src","sources":["typography/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getInteropText = getInteropText;
|
|
7
|
+
exports.hasTypographyClassNameInterop = hasTypographyClassNameInterop;
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _lazyRequire = require("../utils/lazy-require.js");
|
|
10
|
+
const getNativeWind = (0, _lazyRequire.lazyRequire)('nativewind');
|
|
11
|
+
let interopText = _reactNative.Text;
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* RN `Text` wired for NativeWind `className` → `style` interop when
|
|
15
|
+
* `nativewind` is installed in the consumer. Falls back to plain `RNText`
|
|
16
|
+
* otherwise (className is ignored upstream).
|
|
17
|
+
*/
|
|
18
|
+
function getInteropText() {
|
|
19
|
+
if (interopText !== _reactNative.Text) {
|
|
20
|
+
return interopText;
|
|
21
|
+
}
|
|
22
|
+
const nativewind = getNativeWind();
|
|
23
|
+
if (nativewind?.styled) {
|
|
24
|
+
interopText = nativewind.styled(_reactNative.Text, {
|
|
25
|
+
className: 'style'
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
return interopText;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/** True when className interop is active (nativewind present). */
|
|
32
|
+
function hasTypographyClassNameInterop() {
|
|
33
|
+
getInteropText();
|
|
34
|
+
return interopText !== _reactNative.Text;
|
|
35
|
+
}
|
|
36
|
+
//# sourceMappingURL=styled-text.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_reactNative","require","_lazyRequire","getNativeWind","lazyRequire","interopText","RNText","getInteropText","nativewind","styled","className","hasTypographyClassNameInterop"],"sourceRoot":"../../../src","sources":["typography/styled-text.ts"],"mappings":";;;;;;;AACA,IAAAA,YAAA,GAAAC,OAAA;AAEA,IAAAC,YAAA,GAAAD,OAAA;AAWA,MAAME,aAAa,GAAG,IAAAC,wBAAW,EAAmB,YAAY,CAAC;AAEjE,IAAIC,WAAgC,GAAGC,iBAAM;;AAE7C;AACA;AACA;AACA;AACA;AACO,SAASC,cAAcA,CAAA,EAAwB;EACpD,IAAIF,WAAW,KAAKC,iBAAM,EAAE;IAC1B,OAAOD,WAAW;EACpB;EAEA,MAAMG,UAAU,GAAGL,aAAa,CAAC,CAAC;EAClC,IAAIK,UAAU,EAAEC,MAAM,EAAE;IACtBJ,WAAW,GAAGG,UAAU,CAACC,MAAM,CAACH,iBAAM,EAAE;MAAEI,SAAS,EAAE;IAAQ,CAAC,CAAC;EACjE;EAEA,OAAOL,WAAW;AACpB;;AAEA;AACO,SAASM,6BAA6BA,CAAA,EAAY;EACvDJ,cAAc,CAAC,CAAC;EAChB,OAAOF,WAAW,KAAKC,iBAAM;AAC/B","ignoreList":[]}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* AUTO-GENERATED by scripts/generate-theme-css.ts — DO NOT EDIT.
|
|
3
|
+
* Source of truth: bloomThemeCss() in src/design-tokens/theme-css.ts.
|
|
4
|
+
* Re-run `bun run generate:theme-css` (or any `bun run build`) after
|
|
5
|
+
* changing any design token.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
@theme {
|
|
9
|
+
--color-bg: var(--background);
|
|
10
|
+
--color-fill: var(--card);
|
|
11
|
+
--color-fill-secondary: var(--muted);
|
|
12
|
+
--color-fill-hover: var(--accent);
|
|
13
|
+
--color-fill-brand: var(--primary);
|
|
14
|
+
--color-fill-brand-hover: var(--ring);
|
|
15
|
+
--color-fill-inverse: var(--foreground);
|
|
16
|
+
--color-fill-inverse-hover: var(--muted-foreground);
|
|
17
|
+
--color-fill-placeholder: var(--muted);
|
|
18
|
+
--color-text: var(--foreground);
|
|
19
|
+
--color-text-secondary: var(--muted-foreground);
|
|
20
|
+
--color-text-tertiary: var(--muted-foreground);
|
|
21
|
+
--color-text-inverse: var(--primary-foreground);
|
|
22
|
+
--color-text-fixed-light: var(--primary-foreground);
|
|
23
|
+
--color-text-placeholder: var(--muted-foreground);
|
|
24
|
+
--color-border: var(--border);
|
|
25
|
+
--color-border-image: var(--border);
|
|
26
|
+
--color-border-secondary: var(--input);
|
|
27
|
+
--color-border-input: var(--input);
|
|
28
|
+
--color-border-input-active: var(--ring);
|
|
29
|
+
--spacing-space-2: 2px;
|
|
30
|
+
--spacing-space-4: 4px;
|
|
31
|
+
--spacing-space-8: 8px;
|
|
32
|
+
--spacing-space-12: 12px;
|
|
33
|
+
--spacing-space-16: 16px;
|
|
34
|
+
--spacing-space-20: 20px;
|
|
35
|
+
--spacing-space-24: 24px;
|
|
36
|
+
--spacing-space-32: 32px;
|
|
37
|
+
--spacing-screen-margin: 20px;
|
|
38
|
+
--radius-radius-8: 8px;
|
|
39
|
+
--radius-radius-12: 12px;
|
|
40
|
+
--radius-radius-20: 20px;
|
|
41
|
+
--radius-radius-28: 28px;
|
|
42
|
+
--radius-radius-max: 9999px;
|
|
43
|
+
--border-width-hairline: 0.5px;
|
|
44
|
+
--text-caption: 11px;
|
|
45
|
+
--text-caption--line-height: 14px;
|
|
46
|
+
--text-caption--font-weight: 400;
|
|
47
|
+
--font-caption: var(--bloom-font-sans);
|
|
48
|
+
--text-bodySmall: 13px;
|
|
49
|
+
--text-bodySmall--line-height: 18px;
|
|
50
|
+
--text-bodySmall--font-weight: 400;
|
|
51
|
+
--font-bodySmall: var(--bloom-font-sans);
|
|
52
|
+
--text-bodyTitleSmall: 13px;
|
|
53
|
+
--text-bodyTitleSmall--line-height: 18px;
|
|
54
|
+
--text-bodyTitleSmall--font-weight: 600;
|
|
55
|
+
--font-bodyTitleSmall: var(--bloom-font-sans);
|
|
56
|
+
--text-body: 15px;
|
|
57
|
+
--text-body--line-height: 22px;
|
|
58
|
+
--text-body--font-weight: 400;
|
|
59
|
+
--font-body: var(--bloom-font-sans);
|
|
60
|
+
--text-subtitle: 17px;
|
|
61
|
+
--text-subtitle--line-height: 24px;
|
|
62
|
+
--text-subtitle--font-weight: 500;
|
|
63
|
+
--font-subtitle: var(--bloom-font-sans);
|
|
64
|
+
--text-sectionTitle: 20px;
|
|
65
|
+
--text-sectionTitle--line-height: 26px;
|
|
66
|
+
--text-sectionTitle--font-weight: 600;
|
|
67
|
+
--font-sectionTitle: var(--bloom-font-sans);
|
|
68
|
+
--text-headerBold: 28px;
|
|
69
|
+
--text-headerBold--line-height: 34px;
|
|
70
|
+
--text-headerBold--font-weight: 700;
|
|
71
|
+
--font-headerBold: var(--bloom-font-display);
|
|
72
|
+
--text-buttonLarge: 17px;
|
|
73
|
+
--text-buttonLarge--line-height: 22px;
|
|
74
|
+
--text-buttonLarge--font-weight: 600;
|
|
75
|
+
--font-buttonLarge: var(--bloom-font-sans);
|
|
76
|
+
--font-bloom-sans: var(--bloom-font-sans);
|
|
77
|
+
--font-bloom-display: var(--bloom-font-display);
|
|
78
|
+
--font-bloom-mono: var(--bloom-font-mono);
|
|
79
|
+
--shadow-s: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.10);
|
|
80
|
+
--shadow-m: 0 4px 12px rgb(0 0 0 / 0.08), 0 2px 6px rgb(0 0 0 / 0.12);
|
|
81
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Bloom typography defaults are applied via inline `style` only when the caller
|
|
5
|
+
* does not pass `className`. When `className` is present, NativeWind compiles
|
|
6
|
+
* font-size / line-height / weight / color utilities into `style` first; inline
|
|
7
|
+
* defaults that repeat those keys would win the merge and silently override the
|
|
8
|
+
* utilities (the Homiio hero-title bug).
|
|
9
|
+
*/
|
|
10
|
+
export function typographyDefaultsWhenNoClassName(className, defaults) {
|
|
11
|
+
return className?.trim() ? undefined : defaults;
|
|
12
|
+
}
|
|
13
|
+
export function mergeTypographyStyle(className, defaults, base, style) {
|
|
14
|
+
const resolvedDefaults = defaults ? typographyDefaultsWhenNoClassName(className, defaults) : undefined;
|
|
15
|
+
return [resolvedDefaults, base, style];
|
|
16
|
+
}
|
|
17
|
+
//# sourceMappingURL=defaults.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["typographyDefaultsWhenNoClassName","className","defaults","trim","undefined","mergeTypographyStyle","base","style","resolvedDefaults"],"sourceRoot":"../../../src","sources":["typography/defaults.ts"],"mappings":";;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,iCAAiCA,CAC/CC,SAA6B,EAC7BC,QAAmB,EACI;EACvB,OAAOD,SAAS,EAAEE,IAAI,CAAC,CAAC,GAAGC,SAAS,GAAGF,QAAQ;AACjD;AAEA,OAAO,SAASG,oBAAoBA,CAClCJ,SAA6B,EAC7BC,QAA+B,EAC/BI,IAA0B,EAC1BC,KAAuC,EACjB;EACtB,MAAMC,gBAAgB,GAAGN,QAAQ,GAC7BF,iCAAiC,CAACC,SAAS,EAAEC,QAAQ,CAAC,GACtDE,SAAS;EAEb,OAAO,CAACI,gBAAgB,EAAEF,IAAI,EAAEC,KAAK,CAAC;AACxC","ignoreList":[]}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import React, { memo } from 'react';
|
|
4
|
-
import {
|
|
4
|
+
import { Platform } from 'react-native';
|
|
5
5
|
import { useTheme } from "../theme/use-theme.js";
|
|
6
6
|
import { fontFamilies } from "../fonts/tokens.js";
|
|
7
|
+
import { mergeTypographyStyle, typographyDefaultsWhenNoClassName } from "./defaults.js";
|
|
8
|
+
import { getInteropText, hasTypographyClassNameInterop } from "./styled-text.js";
|
|
7
9
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
10
|
/**
|
|
9
11
|
* Platform-aware font-family value. On web we resolve to the CSS custom
|
|
@@ -31,33 +33,43 @@ function fontFamilyStyle(kind) {
|
|
|
31
33
|
}
|
|
32
34
|
const SANS_FONT_FAMILY = fontFamilyStyle('sans');
|
|
33
35
|
const DISPLAY_FONT_FAMILY = fontFamilyStyle('display');
|
|
36
|
+
const DEFAULT_TEXT_TYPOGRAPHY = {
|
|
37
|
+
fontSize: 13
|
|
38
|
+
};
|
|
34
39
|
|
|
35
40
|
/**
|
|
36
41
|
* Base text component with theme-aware default color and the Bloom sans
|
|
37
|
-
* font family applied.
|
|
42
|
+
* font family applied. NativeWind `className` utilities (text-*, font-*,
|
|
43
|
+
* leading-*, text-foreground, …) override defaults when provided.
|
|
38
44
|
*/
|
|
39
45
|
const TextComponent = function Text({
|
|
40
46
|
children,
|
|
41
47
|
style,
|
|
48
|
+
className,
|
|
42
49
|
...rest
|
|
43
50
|
}) {
|
|
44
51
|
const {
|
|
45
52
|
colors
|
|
46
53
|
} = useTheme();
|
|
47
|
-
|
|
54
|
+
const InteropText = getInteropText();
|
|
55
|
+
const interopActive = hasTypographyClassNameInterop();
|
|
56
|
+
const resolvedClassName = interopActive && className?.trim() ? className : undefined;
|
|
57
|
+
return /*#__PURE__*/_jsx(InteropText, {
|
|
48
58
|
...rest,
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
59
|
+
...(resolvedClassName ? {
|
|
60
|
+
className: resolvedClassName
|
|
61
|
+
} : {}),
|
|
62
|
+
style: mergeTypographyStyle(resolvedClassName, {
|
|
63
|
+
...DEFAULT_TEXT_TYPOGRAPHY,
|
|
64
|
+
color: colors.text
|
|
65
|
+
}, SANS_FONT_FAMILY, style),
|
|
54
66
|
children: children
|
|
55
67
|
});
|
|
56
68
|
};
|
|
57
69
|
export const Text = /*#__PURE__*/memo(TextComponent);
|
|
58
70
|
Text.displayName = 'Text';
|
|
59
71
|
export { Text as Span };
|
|
60
|
-
const
|
|
72
|
+
const HEADING_TYPOGRAPHY = {
|
|
61
73
|
...DISPLAY_FONT_FAMILY,
|
|
62
74
|
fontWeight: '700'
|
|
63
75
|
};
|
|
@@ -66,16 +78,19 @@ function createHeadingElement({
|
|
|
66
78
|
}) {
|
|
67
79
|
return function HeadingElement({
|
|
68
80
|
style,
|
|
81
|
+
className,
|
|
69
82
|
...rest
|
|
70
83
|
}) {
|
|
71
84
|
const extraProps = Platform.OS === 'web' ? {
|
|
72
85
|
role: 'heading',
|
|
73
86
|
'aria-level': level
|
|
74
87
|
} : {};
|
|
88
|
+
const headingBase = className?.trim() ? DISPLAY_FONT_FAMILY : HEADING_TYPOGRAPHY;
|
|
75
89
|
return /*#__PURE__*/_jsx(Text, {
|
|
76
90
|
...extraProps,
|
|
77
91
|
...rest,
|
|
78
|
-
|
|
92
|
+
className: className,
|
|
93
|
+
style: [headingBase, style]
|
|
79
94
|
});
|
|
80
95
|
};
|
|
81
96
|
}
|
|
@@ -103,20 +118,24 @@ export const H6 = createHeadingElement({
|
|
|
103
118
|
level: 6
|
|
104
119
|
});
|
|
105
120
|
H6.displayName = 'H6';
|
|
121
|
+
const DEFAULT_PARAGRAPH_TYPOGRAPHY = {
|
|
122
|
+
fontSize: 15,
|
|
123
|
+
lineHeight: 15 * 1.625
|
|
124
|
+
};
|
|
106
125
|
export function P({
|
|
107
126
|
style,
|
|
127
|
+
className,
|
|
108
128
|
...rest
|
|
109
129
|
}) {
|
|
110
130
|
const extraProps = Platform.OS === 'web' ? {
|
|
111
131
|
role: 'paragraph'
|
|
112
132
|
} : {};
|
|
133
|
+
const paragraphDefaults = typographyDefaultsWhenNoClassName(className, DEFAULT_PARAGRAPH_TYPOGRAPHY);
|
|
113
134
|
return /*#__PURE__*/_jsx(Text, {
|
|
114
135
|
...extraProps,
|
|
115
136
|
...rest,
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
lineHeight: 15 * 1.625
|
|
119
|
-
}, style]
|
|
137
|
+
className: className,
|
|
138
|
+
style: [paragraphDefaults, style]
|
|
120
139
|
});
|
|
121
140
|
}
|
|
122
141
|
P.displayName = 'P';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","memo","
|
|
1
|
+
{"version":3,"names":["React","memo","Platform","useTheme","fontFamilies","mergeTypographyStyle","typographyDefaultsWhenNoClassName","getInteropText","hasTypographyClassNameInterop","jsx","_jsx","fontFamilyStyle","kind","OS","fontFamily","SANS_FONT_FAMILY","DISPLAY_FONT_FAMILY","DEFAULT_TEXT_TYPOGRAPHY","fontSize","TextComponent","Text","children","style","className","rest","colors","InteropText","interopActive","resolvedClassName","trim","undefined","color","text","displayName","Span","HEADING_TYPOGRAPHY","fontWeight","createHeadingElement","level","HeadingElement","extraProps","role","headingBase","H1","H2","H3","H4","H5","H6","DEFAULT_PARAGRAPH_TYPOGRAPHY","lineHeight","P","paragraphDefaults"],"sourceRoot":"../../../src","sources":["typography/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { Text as RNText } from 'react-native';
|
|
4
|
+
import { lazyRequire } from "../utils/lazy-require.js";
|
|
5
|
+
const getNativeWind = lazyRequire('nativewind');
|
|
6
|
+
let interopText = RNText;
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* RN `Text` wired for NativeWind `className` → `style` interop when
|
|
10
|
+
* `nativewind` is installed in the consumer. Falls back to plain `RNText`
|
|
11
|
+
* otherwise (className is ignored upstream).
|
|
12
|
+
*/
|
|
13
|
+
export function getInteropText() {
|
|
14
|
+
if (interopText !== RNText) {
|
|
15
|
+
return interopText;
|
|
16
|
+
}
|
|
17
|
+
const nativewind = getNativeWind();
|
|
18
|
+
if (nativewind?.styled) {
|
|
19
|
+
interopText = nativewind.styled(RNText, {
|
|
20
|
+
className: 'style'
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
return interopText;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/** True when className interop is active (nativewind present). */
|
|
27
|
+
export function hasTypographyClassNameInterop() {
|
|
28
|
+
getInteropText();
|
|
29
|
+
return interopText !== RNText;
|
|
30
|
+
}
|
|
31
|
+
//# sourceMappingURL=styled-text.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["Text","RNText","lazyRequire","getNativeWind","interopText","getInteropText","nativewind","styled","className","hasTypographyClassNameInterop"],"sourceRoot":"../../../src","sources":["typography/styled-text.ts"],"mappings":";;AACA,SAASA,IAAI,IAAIC,MAAM,QAAwB,cAAc;AAE7D,SAASC,WAAW,QAAQ,0BAAuB;AAWnD,MAAMC,aAAa,GAAGD,WAAW,CAAmB,YAAY,CAAC;AAEjE,IAAIE,WAAgC,GAAGH,MAAM;;AAE7C;AACA;AACA;AACA;AACA;AACA,OAAO,SAASI,cAAcA,CAAA,EAAwB;EACpD,IAAID,WAAW,KAAKH,MAAM,EAAE;IAC1B,OAAOG,WAAW;EACpB;EAEA,MAAME,UAAU,GAAGH,aAAa,CAAC,CAAC;EAClC,IAAIG,UAAU,EAAEC,MAAM,EAAE;IACtBH,WAAW,GAAGE,UAAU,CAACC,MAAM,CAACN,MAAM,EAAE;MAAEO,SAAS,EAAE;IAAQ,CAAC,CAAC;EACjE;EAEA,OAAOJ,WAAW;AACpB;;AAEA;AACA,OAAO,SAASK,6BAA6BA,CAAA,EAAY;EACvDJ,cAAc,CAAC,CAAC;EAChB,OAAOD,WAAW,KAAKH,MAAM;AAC/B","ignoreList":[]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { StyleProp, TextStyle } from 'react-native';
|
|
2
|
+
/**
|
|
3
|
+
* Bloom typography defaults are applied via inline `style` only when the caller
|
|
4
|
+
* does not pass `className`. When `className` is present, NativeWind compiles
|
|
5
|
+
* font-size / line-height / weight / color utilities into `style` first; inline
|
|
6
|
+
* defaults that repeat those keys would win the merge and silently override the
|
|
7
|
+
* utilities (the Homiio hero-title bug).
|
|
8
|
+
*/
|
|
9
|
+
export declare function typographyDefaultsWhenNoClassName(className: string | undefined, defaults: TextStyle): TextStyle | undefined;
|
|
10
|
+
export declare function mergeTypographyStyle(className: string | undefined, defaults: TextStyle | undefined, base: StyleProp<TextStyle>, style: StyleProp<TextStyle> | undefined): StyleProp<TextStyle>;
|
|
11
|
+
//# sourceMappingURL=defaults.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../../src/typography/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD;;;;;;GAMG;AACH,wBAAgB,iCAAiC,CAC/C,SAAS,EAAE,MAAM,GAAG,SAAS,EAC7B,QAAQ,EAAE,SAAS,GAClB,SAAS,GAAG,SAAS,CAEvB;AAED,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,MAAM,GAAG,SAAS,EAC7B,QAAQ,EAAE,SAAS,GAAG,SAAS,EAC/B,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,EAC1B,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG,SAAS,GACtC,SAAS,CAAC,SAAS,CAAC,CAMtB"}
|
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type TextProps as RNTextProps } from 'react-native';
|
|
3
3
|
import { fontFamilies } from '../fonts/tokens';
|
|
4
|
-
export type TextProps = RNTextProps
|
|
5
|
-
|
|
4
|
+
export type TextProps = RNTextProps & {
|
|
5
|
+
className?: string;
|
|
6
|
+
};
|
|
7
|
+
export declare const Text: React.MemoExoticComponent<({ children, style, className, ...rest }: TextProps) => import("react/jsx-runtime").JSX.Element>;
|
|
6
8
|
export { Text as Span };
|
|
7
|
-
export declare const H1: React.FC<
|
|
8
|
-
export declare const H2: React.FC<
|
|
9
|
-
export declare const H3: React.FC<
|
|
10
|
-
export declare const H4: React.FC<
|
|
11
|
-
export declare const H5: React.FC<
|
|
12
|
-
export declare const H6: React.FC<
|
|
13
|
-
export declare function P({ style, ...rest }: TextProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare const H1: React.FC<TextProps>;
|
|
10
|
+
export declare const H2: React.FC<TextProps>;
|
|
11
|
+
export declare const H3: React.FC<TextProps>;
|
|
12
|
+
export declare const H4: React.FC<TextProps>;
|
|
13
|
+
export declare const H5: React.FC<TextProps>;
|
|
14
|
+
export declare const H6: React.FC<TextProps>;
|
|
15
|
+
export declare function P({ style, className, ...rest }: TextProps): import("react/jsx-runtime").JSX.Element;
|
|
14
16
|
export declare namespace P {
|
|
15
17
|
var displayName: string;
|
|
16
18
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/typography/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/typography/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,EACL,KAAK,SAAS,IAAI,WAAW,EAG9B,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAI/C,MAAM,MAAM,SAAS,GAAG,WAAW,GAAG;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA0DF,eAAO,MAAM,IAAI,sEAvB4D,SAAS,6CAuB/C,CAAC;AAGxC,OAAO,EAAE,IAAI,IAAI,IAAI,EAAE,CAAC;AA6BxB,eAAO,MAAM,EAAE,qBAAqC,CAAC;AAErD,eAAO,MAAM,EAAE,qBAAqC,CAAC;AAErD,eAAO,MAAM,EAAE,qBAAqC,CAAC;AAErD,eAAO,MAAM,EAAE,qBAAqC,CAAC;AAErD,eAAO,MAAM,EAAE,qBAAqC,CAAC;AAErD,eAAO,MAAM,EAAE,qBAAqC,CAAC;AAQrD,wBAAgB,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,2CAezD;yBAfe,CAAC;;;AAkBjB,OAAO,EAAE,YAAY,EAAE,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { ComponentType } from 'react';
|
|
2
|
+
import { type TextProps } from 'react-native';
|
|
3
|
+
type StyledTextComponent = ComponentType<TextProps & {
|
|
4
|
+
className?: string;
|
|
5
|
+
}>;
|
|
6
|
+
/**
|
|
7
|
+
* RN `Text` wired for NativeWind `className` → `style` interop when
|
|
8
|
+
* `nativewind` is installed in the consumer. Falls back to plain `RNText`
|
|
9
|
+
* otherwise (className is ignored upstream).
|
|
10
|
+
*/
|
|
11
|
+
export declare function getInteropText(): StyledTextComponent;
|
|
12
|
+
/** True when className interop is active (nativewind present). */
|
|
13
|
+
export declare function hasTypographyClassNameInterop(): boolean;
|
|
14
|
+
export {};
|
|
15
|
+
//# sourceMappingURL=styled-text.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styled-text.d.ts","sourceRoot":"","sources":["../../../../src/typography/styled-text.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9D,KAAK,mBAAmB,GAAG,aAAa,CAAC,SAAS,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAa7E;;;;GAIG;AACH,wBAAgB,cAAc,IAAI,mBAAmB,CAWpD;AAED,kEAAkE;AAClE,wBAAgB,6BAA6B,IAAI,OAAO,CAGvD"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { StyleProp, TextStyle } from 'react-native';
|
|
2
|
+
/**
|
|
3
|
+
* Bloom typography defaults are applied via inline `style` only when the caller
|
|
4
|
+
* does not pass `className`. When `className` is present, NativeWind compiles
|
|
5
|
+
* font-size / line-height / weight / color utilities into `style` first; inline
|
|
6
|
+
* defaults that repeat those keys would win the merge and silently override the
|
|
7
|
+
* utilities (the Homiio hero-title bug).
|
|
8
|
+
*/
|
|
9
|
+
export declare function typographyDefaultsWhenNoClassName(className: string | undefined, defaults: TextStyle): TextStyle | undefined;
|
|
10
|
+
export declare function mergeTypographyStyle(className: string | undefined, defaults: TextStyle | undefined, base: StyleProp<TextStyle>, style: StyleProp<TextStyle> | undefined): StyleProp<TextStyle>;
|
|
11
|
+
//# sourceMappingURL=defaults.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../../src/typography/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD;;;;;;GAMG;AACH,wBAAgB,iCAAiC,CAC/C,SAAS,EAAE,MAAM,GAAG,SAAS,EAC7B,QAAQ,EAAE,SAAS,GAClB,SAAS,GAAG,SAAS,CAEvB;AAED,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,MAAM,GAAG,SAAS,EAC7B,QAAQ,EAAE,SAAS,GAAG,SAAS,EAC/B,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,EAC1B,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG,SAAS,GACtC,SAAS,CAAC,SAAS,CAAC,CAMtB"}
|
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type TextProps as RNTextProps } from 'react-native';
|
|
3
3
|
import { fontFamilies } from '../fonts/tokens';
|
|
4
|
-
export type TextProps = RNTextProps
|
|
5
|
-
|
|
4
|
+
export type TextProps = RNTextProps & {
|
|
5
|
+
className?: string;
|
|
6
|
+
};
|
|
7
|
+
export declare const Text: React.MemoExoticComponent<({ children, style, className, ...rest }: TextProps) => import("react/jsx-runtime").JSX.Element>;
|
|
6
8
|
export { Text as Span };
|
|
7
|
-
export declare const H1: React.FC<
|
|
8
|
-
export declare const H2: React.FC<
|
|
9
|
-
export declare const H3: React.FC<
|
|
10
|
-
export declare const H4: React.FC<
|
|
11
|
-
export declare const H5: React.FC<
|
|
12
|
-
export declare const H6: React.FC<
|
|
13
|
-
export declare function P({ style, ...rest }: TextProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare const H1: React.FC<TextProps>;
|
|
10
|
+
export declare const H2: React.FC<TextProps>;
|
|
11
|
+
export declare const H3: React.FC<TextProps>;
|
|
12
|
+
export declare const H4: React.FC<TextProps>;
|
|
13
|
+
export declare const H5: React.FC<TextProps>;
|
|
14
|
+
export declare const H6: React.FC<TextProps>;
|
|
15
|
+
export declare function P({ style, className, ...rest }: TextProps): import("react/jsx-runtime").JSX.Element;
|
|
14
16
|
export declare namespace P {
|
|
15
17
|
var displayName: string;
|
|
16
18
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/typography/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/typography/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,EACL,KAAK,SAAS,IAAI,WAAW,EAG9B,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAI/C,MAAM,MAAM,SAAS,GAAG,WAAW,GAAG;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA0DF,eAAO,MAAM,IAAI,sEAvB4D,SAAS,6CAuB/C,CAAC;AAGxC,OAAO,EAAE,IAAI,IAAI,IAAI,EAAE,CAAC;AA6BxB,eAAO,MAAM,EAAE,qBAAqC,CAAC;AAErD,eAAO,MAAM,EAAE,qBAAqC,CAAC;AAErD,eAAO,MAAM,EAAE,qBAAqC,CAAC;AAErD,eAAO,MAAM,EAAE,qBAAqC,CAAC;AAErD,eAAO,MAAM,EAAE,qBAAqC,CAAC;AAErD,eAAO,MAAM,EAAE,qBAAqC,CAAC;AAQrD,wBAAgB,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,2CAezD;yBAfe,CAAC;;;AAkBjB,OAAO,EAAE,YAAY,EAAE,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { ComponentType } from 'react';
|
|
2
|
+
import { type TextProps } from 'react-native';
|
|
3
|
+
type StyledTextComponent = ComponentType<TextProps & {
|
|
4
|
+
className?: string;
|
|
5
|
+
}>;
|
|
6
|
+
/**
|
|
7
|
+
* RN `Text` wired for NativeWind `className` → `style` interop when
|
|
8
|
+
* `nativewind` is installed in the consumer. Falls back to plain `RNText`
|
|
9
|
+
* otherwise (className is ignored upstream).
|
|
10
|
+
*/
|
|
11
|
+
export declare function getInteropText(): StyledTextComponent;
|
|
12
|
+
/** True when className interop is active (nativewind present). */
|
|
13
|
+
export declare function hasTypographyClassNameInterop(): boolean;
|
|
14
|
+
export {};
|
|
15
|
+
//# sourceMappingURL=styled-text.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styled-text.d.ts","sourceRoot":"","sources":["../../../../src/typography/styled-text.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9D,KAAK,mBAAmB,GAAG,aAAa,CAAC,SAAS,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAa7E;;;;GAIG;AACH,wBAAgB,cAAc,IAAI,mBAAmB,CAWpD;AAED,kEAAkE;AAClE,wBAAgB,6BAA6B,IAAI,OAAO,CAGvD"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oxyhq/bloom",
|
|
3
|
-
"version": "0.29.
|
|
3
|
+
"version": "0.29.4",
|
|
4
4
|
"description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -887,6 +887,7 @@
|
|
|
887
887
|
"default": "./lib/commonjs/list/index.js"
|
|
888
888
|
}
|
|
889
889
|
},
|
|
890
|
+
"./design-tokens/theme.css": "./src/design-tokens/theme.css",
|
|
890
891
|
"./package.json": "./package.json"
|
|
891
892
|
},
|
|
892
893
|
"files": [
|
|
@@ -954,7 +955,8 @@
|
|
|
954
955
|
"scripts": {
|
|
955
956
|
"generate:exports": "node scripts/generate-platform-exports.mjs",
|
|
956
957
|
"generate:font-data": "node scripts/generate-font-data.mjs",
|
|
957
|
-
"
|
|
958
|
+
"generate:theme-css": "bun scripts/generate-theme-css.ts",
|
|
959
|
+
"prebuild": "node scripts/generate-platform-exports.mjs && node scripts/generate-font-data.mjs && bun scripts/generate-theme-css.ts",
|
|
958
960
|
"build": "bob build",
|
|
959
961
|
"test": "jest",
|
|
960
962
|
"pretest": "node scripts/generate-font-data.mjs",
|
|
@@ -1028,7 +1030,8 @@
|
|
|
1028
1030
|
"react-native-safe-area-context": ">=5.0.0",
|
|
1029
1031
|
"react-native-svg": ">=13.0.0",
|
|
1030
1032
|
"sonner": ">=2.0.0",
|
|
1031
|
-
"sonner-native": ">=0.17.0"
|
|
1033
|
+
"sonner-native": ">=0.17.0",
|
|
1034
|
+
"nativewind": ">=5.0.0"
|
|
1032
1035
|
},
|
|
1033
1036
|
"peerDependenciesMeta": {
|
|
1034
1037
|
"expo": {
|
|
@@ -1054,6 +1057,9 @@
|
|
|
1054
1057
|
},
|
|
1055
1058
|
"sonner-native": {
|
|
1056
1059
|
"optional": true
|
|
1060
|
+
},
|
|
1061
|
+
"nativewind": {
|
|
1062
|
+
"optional": true
|
|
1057
1063
|
}
|
|
1058
1064
|
},
|
|
1059
1065
|
"react-native-builder-bob": {
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import { readFileSync } from 'node:fs';
|
|
2
|
+
import { join } from 'node:path';
|
|
3
|
+
|
|
1
4
|
import {
|
|
2
5
|
bloomTailwindPreset,
|
|
3
6
|
bloomThemeCss,
|
|
@@ -161,6 +164,26 @@ describe('design-tokens v4 @theme css', () => {
|
|
|
161
164
|
});
|
|
162
165
|
});
|
|
163
166
|
|
|
167
|
+
describe('design-tokens shipped theme.css', () => {
|
|
168
|
+
// The static artifact consumers `@import`. Generated by
|
|
169
|
+
// scripts/generate-theme-css.ts from the SAME source as bloomThemeCss(),
|
|
170
|
+
// so this guards against JS/CSS drift.
|
|
171
|
+
const themeCss = readFileSync(
|
|
172
|
+
join(__dirname, '..', 'design-tokens', 'theme.css'),
|
|
173
|
+
'utf8',
|
|
174
|
+
);
|
|
175
|
+
|
|
176
|
+
it('the @theme block equals bloomThemeBlock() (no drift)', () => {
|
|
177
|
+
const block = themeCss.slice(themeCss.indexOf('@theme')).trimEnd();
|
|
178
|
+
expect(block).toBe(bloomThemeBlock());
|
|
179
|
+
});
|
|
180
|
+
|
|
181
|
+
it('carries the auto-generated / do-not-edit header', () => {
|
|
182
|
+
expect(themeCss).toContain('AUTO-GENERATED');
|
|
183
|
+
expect(themeCss).toContain('bun run generate:theme-css');
|
|
184
|
+
});
|
|
185
|
+
});
|
|
186
|
+
|
|
164
187
|
describe('design-tokens shadow style (web default)', () => {
|
|
165
188
|
it('returns a boxShadow style on the web/default fork', () => {
|
|
166
189
|
const style = bloomShadowStyle('m');
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* AUTO-GENERATED by scripts/generate-theme-css.ts — DO NOT EDIT.
|
|
3
|
+
* Source of truth: bloomThemeCss() in src/design-tokens/theme-css.ts.
|
|
4
|
+
* Re-run `bun run generate:theme-css` (or any `bun run build`) after
|
|
5
|
+
* changing any design token.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
@theme {
|
|
9
|
+
--color-bg: var(--background);
|
|
10
|
+
--color-fill: var(--card);
|
|
11
|
+
--color-fill-secondary: var(--muted);
|
|
12
|
+
--color-fill-hover: var(--accent);
|
|
13
|
+
--color-fill-brand: var(--primary);
|
|
14
|
+
--color-fill-brand-hover: var(--ring);
|
|
15
|
+
--color-fill-inverse: var(--foreground);
|
|
16
|
+
--color-fill-inverse-hover: var(--muted-foreground);
|
|
17
|
+
--color-fill-placeholder: var(--muted);
|
|
18
|
+
--color-text: var(--foreground);
|
|
19
|
+
--color-text-secondary: var(--muted-foreground);
|
|
20
|
+
--color-text-tertiary: var(--muted-foreground);
|
|
21
|
+
--color-text-inverse: var(--primary-foreground);
|
|
22
|
+
--color-text-fixed-light: var(--primary-foreground);
|
|
23
|
+
--color-text-placeholder: var(--muted-foreground);
|
|
24
|
+
--color-border: var(--border);
|
|
25
|
+
--color-border-image: var(--border);
|
|
26
|
+
--color-border-secondary: var(--input);
|
|
27
|
+
--color-border-input: var(--input);
|
|
28
|
+
--color-border-input-active: var(--ring);
|
|
29
|
+
--spacing-space-2: 2px;
|
|
30
|
+
--spacing-space-4: 4px;
|
|
31
|
+
--spacing-space-8: 8px;
|
|
32
|
+
--spacing-space-12: 12px;
|
|
33
|
+
--spacing-space-16: 16px;
|
|
34
|
+
--spacing-space-20: 20px;
|
|
35
|
+
--spacing-space-24: 24px;
|
|
36
|
+
--spacing-space-32: 32px;
|
|
37
|
+
--spacing-screen-margin: 20px;
|
|
38
|
+
--radius-radius-8: 8px;
|
|
39
|
+
--radius-radius-12: 12px;
|
|
40
|
+
--radius-radius-20: 20px;
|
|
41
|
+
--radius-radius-28: 28px;
|
|
42
|
+
--radius-radius-max: 9999px;
|
|
43
|
+
--border-width-hairline: 0.5px;
|
|
44
|
+
--text-caption: 11px;
|
|
45
|
+
--text-caption--line-height: 14px;
|
|
46
|
+
--text-caption--font-weight: 400;
|
|
47
|
+
--font-caption: var(--bloom-font-sans);
|
|
48
|
+
--text-bodySmall: 13px;
|
|
49
|
+
--text-bodySmall--line-height: 18px;
|
|
50
|
+
--text-bodySmall--font-weight: 400;
|
|
51
|
+
--font-bodySmall: var(--bloom-font-sans);
|
|
52
|
+
--text-bodyTitleSmall: 13px;
|
|
53
|
+
--text-bodyTitleSmall--line-height: 18px;
|
|
54
|
+
--text-bodyTitleSmall--font-weight: 600;
|
|
55
|
+
--font-bodyTitleSmall: var(--bloom-font-sans);
|
|
56
|
+
--text-body: 15px;
|
|
57
|
+
--text-body--line-height: 22px;
|
|
58
|
+
--text-body--font-weight: 400;
|
|
59
|
+
--font-body: var(--bloom-font-sans);
|
|
60
|
+
--text-subtitle: 17px;
|
|
61
|
+
--text-subtitle--line-height: 24px;
|
|
62
|
+
--text-subtitle--font-weight: 500;
|
|
63
|
+
--font-subtitle: var(--bloom-font-sans);
|
|
64
|
+
--text-sectionTitle: 20px;
|
|
65
|
+
--text-sectionTitle--line-height: 26px;
|
|
66
|
+
--text-sectionTitle--font-weight: 600;
|
|
67
|
+
--font-sectionTitle: var(--bloom-font-sans);
|
|
68
|
+
--text-headerBold: 28px;
|
|
69
|
+
--text-headerBold--line-height: 34px;
|
|
70
|
+
--text-headerBold--font-weight: 700;
|
|
71
|
+
--font-headerBold: var(--bloom-font-display);
|
|
72
|
+
--text-buttonLarge: 17px;
|
|
73
|
+
--text-buttonLarge--line-height: 22px;
|
|
74
|
+
--text-buttonLarge--font-weight: 600;
|
|
75
|
+
--font-buttonLarge: var(--bloom-font-sans);
|
|
76
|
+
--font-bloom-sans: var(--bloom-font-sans);
|
|
77
|
+
--font-bloom-display: var(--bloom-font-display);
|
|
78
|
+
--font-bloom-mono: var(--bloom-font-mono);
|
|
79
|
+
--shadow-s: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.10);
|
|
80
|
+
--shadow-m: 0 4px 12px rgb(0 0 0 / 0.08), 0 2px 6px rgb(0 0 0 / 0.12);
|
|
81
|
+
}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import {
|
|
2
|
+
typographyDefaultsWhenNoClassName,
|
|
3
|
+
mergeTypographyStyle,
|
|
4
|
+
} from '../defaults';
|
|
5
|
+
|
|
6
|
+
describe('typography defaults', () => {
|
|
7
|
+
it('omits inline defaults when className is present', () => {
|
|
8
|
+
expect(
|
|
9
|
+
typographyDefaultsWhenNoClassName('text-[56px] font-bold', {
|
|
10
|
+
fontSize: 13,
|
|
11
|
+
color: 'red',
|
|
12
|
+
}),
|
|
13
|
+
).toBeUndefined();
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
it('keeps inline defaults when className is absent', () => {
|
|
17
|
+
expect(
|
|
18
|
+
typographyDefaultsWhenNoClassName(undefined, { fontSize: 13, color: 'red' }),
|
|
19
|
+
).toEqual({ fontSize: 13, color: 'red' });
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
it('keeps inline defaults when className is blank', () => {
|
|
23
|
+
expect(
|
|
24
|
+
typographyDefaultsWhenNoClassName(' ', { fontSize: 13 }),
|
|
25
|
+
).toEqual({ fontSize: 13 });
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
it('merges base font family after optional defaults', () => {
|
|
29
|
+
expect(
|
|
30
|
+
mergeTypographyStyle(
|
|
31
|
+
'text-[56px]',
|
|
32
|
+
{ fontSize: 13, color: 'red' },
|
|
33
|
+
{ fontFamily: 'BlomusModernus' },
|
|
34
|
+
{ letterSpacing: -0.5 },
|
|
35
|
+
),
|
|
36
|
+
).toEqual([
|
|
37
|
+
undefined,
|
|
38
|
+
{ fontFamily: 'BlomusModernus' },
|
|
39
|
+
{ letterSpacing: -0.5 },
|
|
40
|
+
]);
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
it('includes defaults when className is absent', () => {
|
|
44
|
+
expect(
|
|
45
|
+
mergeTypographyStyle(
|
|
46
|
+
undefined,
|
|
47
|
+
{ fontSize: 13, color: 'red' },
|
|
48
|
+
{ fontFamily: 'BlomusModernus' },
|
|
49
|
+
undefined,
|
|
50
|
+
),
|
|
51
|
+
).toEqual([
|
|
52
|
+
{ fontSize: 13, color: 'red' },
|
|
53
|
+
{ fontFamily: 'BlomusModernus' },
|
|
54
|
+
undefined,
|
|
55
|
+
]);
|
|
56
|
+
});
|
|
57
|
+
});
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type { StyleProp, TextStyle } from 'react-native';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Bloom typography defaults are applied via inline `style` only when the caller
|
|
5
|
+
* does not pass `className`. When `className` is present, NativeWind compiles
|
|
6
|
+
* font-size / line-height / weight / color utilities into `style` first; inline
|
|
7
|
+
* defaults that repeat those keys would win the merge and silently override the
|
|
8
|
+
* utilities (the Homiio hero-title bug).
|
|
9
|
+
*/
|
|
10
|
+
export function typographyDefaultsWhenNoClassName(
|
|
11
|
+
className: string | undefined,
|
|
12
|
+
defaults: TextStyle,
|
|
13
|
+
): TextStyle | undefined {
|
|
14
|
+
return className?.trim() ? undefined : defaults;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export function mergeTypographyStyle(
|
|
18
|
+
className: string | undefined,
|
|
19
|
+
defaults: TextStyle | undefined,
|
|
20
|
+
base: StyleProp<TextStyle>,
|
|
21
|
+
style: StyleProp<TextStyle> | undefined,
|
|
22
|
+
): StyleProp<TextStyle> {
|
|
23
|
+
const resolvedDefaults = defaults
|
|
24
|
+
? typographyDefaultsWhenNoClassName(className, defaults)
|
|
25
|
+
: undefined;
|
|
26
|
+
|
|
27
|
+
return [resolvedDefaults, base, style];
|
|
28
|
+
}
|
package/src/typography/index.tsx
CHANGED
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
import React, { memo } from 'react';
|
|
2
2
|
import {
|
|
3
|
-
Text as RNText,
|
|
4
3
|
type TextProps as RNTextProps,
|
|
5
4
|
Platform,
|
|
6
|
-
type StyleProp,
|
|
7
5
|
type TextStyle,
|
|
8
6
|
} from 'react-native';
|
|
9
7
|
|
|
10
8
|
import { useTheme } from '../theme/use-theme';
|
|
11
9
|
import { fontFamilies } from '../fonts/tokens';
|
|
10
|
+
import { mergeTypographyStyle, typographyDefaultsWhenNoClassName } from './defaults';
|
|
11
|
+
import { getInteropText, hasTypographyClassNameInterop } from './styled-text';
|
|
12
12
|
|
|
13
|
-
export type TextProps = RNTextProps
|
|
13
|
+
export type TextProps = RNTextProps & {
|
|
14
|
+
className?: string;
|
|
15
|
+
};
|
|
14
16
|
|
|
15
17
|
/**
|
|
16
18
|
* Platform-aware font-family value. On web we resolve to the CSS custom
|
|
@@ -36,19 +38,35 @@ function fontFamilyStyle(
|
|
|
36
38
|
const SANS_FONT_FAMILY = fontFamilyStyle('sans');
|
|
37
39
|
const DISPLAY_FONT_FAMILY = fontFamilyStyle('display');
|
|
38
40
|
|
|
41
|
+
const DEFAULT_TEXT_TYPOGRAPHY: TextStyle = {
|
|
42
|
+
fontSize: 13,
|
|
43
|
+
};
|
|
44
|
+
|
|
39
45
|
/**
|
|
40
46
|
* Base text component with theme-aware default color and the Bloom sans
|
|
41
|
-
* font family applied.
|
|
47
|
+
* font family applied. NativeWind `className` utilities (text-*, font-*,
|
|
48
|
+
* leading-*, text-foreground, …) override defaults when provided.
|
|
42
49
|
*/
|
|
43
|
-
const TextComponent = function Text({ children, style, ...rest }: TextProps) {
|
|
50
|
+
const TextComponent = function Text({ children, style, className, ...rest }: TextProps) {
|
|
44
51
|
const { colors } = useTheme();
|
|
52
|
+
const InteropText = getInteropText();
|
|
53
|
+
const interopActive = hasTypographyClassNameInterop();
|
|
54
|
+
|
|
55
|
+
const resolvedClassName = interopActive && className?.trim() ? className : undefined;
|
|
45
56
|
|
|
46
57
|
return (
|
|
47
|
-
<
|
|
58
|
+
<InteropText
|
|
48
59
|
{...rest}
|
|
49
|
-
|
|
60
|
+
{...(resolvedClassName ? { className: resolvedClassName } : {})}
|
|
61
|
+
style={mergeTypographyStyle(
|
|
62
|
+
resolvedClassName,
|
|
63
|
+
{ ...DEFAULT_TEXT_TYPOGRAPHY, color: colors.text },
|
|
64
|
+
SANS_FONT_FAMILY,
|
|
65
|
+
style,
|
|
66
|
+
)}
|
|
67
|
+
>
|
|
50
68
|
{children}
|
|
51
|
-
</
|
|
69
|
+
</InteropText>
|
|
52
70
|
);
|
|
53
71
|
};
|
|
54
72
|
|
|
@@ -57,18 +75,30 @@ Text.displayName = 'Text';
|
|
|
57
75
|
|
|
58
76
|
export { Text as Span };
|
|
59
77
|
|
|
60
|
-
const
|
|
78
|
+
const HEADING_TYPOGRAPHY: TextStyle = {
|
|
61
79
|
...DISPLAY_FONT_FAMILY,
|
|
62
80
|
fontWeight: '700',
|
|
63
81
|
};
|
|
64
82
|
|
|
65
83
|
function createHeadingElement({ level }: { level: number }): React.FC<TextProps> {
|
|
66
|
-
return function HeadingElement({ style, ...rest }: TextProps) {
|
|
84
|
+
return function HeadingElement({ style, className, ...rest }: TextProps) {
|
|
67
85
|
const extraProps: Record<string, unknown> =
|
|
68
86
|
Platform.OS === 'web'
|
|
69
87
|
? { role: 'heading', 'aria-level': level }
|
|
70
88
|
: {};
|
|
71
|
-
|
|
89
|
+
|
|
90
|
+
const headingBase = className?.trim()
|
|
91
|
+
? DISPLAY_FONT_FAMILY
|
|
92
|
+
: HEADING_TYPOGRAPHY;
|
|
93
|
+
|
|
94
|
+
return (
|
|
95
|
+
<Text
|
|
96
|
+
{...extraProps}
|
|
97
|
+
{...rest}
|
|
98
|
+
className={className}
|
|
99
|
+
style={[headingBase, style]}
|
|
100
|
+
/>
|
|
101
|
+
);
|
|
72
102
|
};
|
|
73
103
|
}
|
|
74
104
|
|
|
@@ -85,14 +115,24 @@ H5.displayName = 'H5';
|
|
|
85
115
|
export const H6 = createHeadingElement({ level: 6 });
|
|
86
116
|
H6.displayName = 'H6';
|
|
87
117
|
|
|
88
|
-
|
|
118
|
+
const DEFAULT_PARAGRAPH_TYPOGRAPHY: TextStyle = {
|
|
119
|
+
fontSize: 15,
|
|
120
|
+
lineHeight: 15 * 1.625,
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
export function P({ style, className, ...rest }: TextProps) {
|
|
89
124
|
const extraProps: Record<string, unknown> =
|
|
90
125
|
Platform.OS === 'web' ? { role: 'paragraph' } : {};
|
|
126
|
+
const paragraphDefaults = typographyDefaultsWhenNoClassName(
|
|
127
|
+
className,
|
|
128
|
+
DEFAULT_PARAGRAPH_TYPOGRAPHY,
|
|
129
|
+
);
|
|
91
130
|
return (
|
|
92
131
|
<Text
|
|
93
132
|
{...extraProps}
|
|
94
133
|
{...rest}
|
|
95
|
-
|
|
134
|
+
className={className}
|
|
135
|
+
style={[paragraphDefaults, style]}
|
|
96
136
|
/>
|
|
97
137
|
);
|
|
98
138
|
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import type { ComponentType } from 'react';
|
|
2
|
+
import { Text as RNText, type TextProps } from 'react-native';
|
|
3
|
+
|
|
4
|
+
import { lazyRequire } from '../utils/lazy-require';
|
|
5
|
+
|
|
6
|
+
type StyledTextComponent = ComponentType<TextProps & { className?: string }>;
|
|
7
|
+
|
|
8
|
+
type NativeWindModule = {
|
|
9
|
+
styled: (
|
|
10
|
+
component: typeof RNText,
|
|
11
|
+
mapping?: { className: 'style' },
|
|
12
|
+
) => StyledTextComponent;
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
const getNativeWind = lazyRequire<NativeWindModule>('nativewind');
|
|
16
|
+
|
|
17
|
+
let interopText: StyledTextComponent = RNText;
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* RN `Text` wired for NativeWind `className` → `style` interop when
|
|
21
|
+
* `nativewind` is installed in the consumer. Falls back to plain `RNText`
|
|
22
|
+
* otherwise (className is ignored upstream).
|
|
23
|
+
*/
|
|
24
|
+
export function getInteropText(): StyledTextComponent {
|
|
25
|
+
if (interopText !== RNText) {
|
|
26
|
+
return interopText;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
const nativewind = getNativeWind();
|
|
30
|
+
if (nativewind?.styled) {
|
|
31
|
+
interopText = nativewind.styled(RNText, { className: 'style' });
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
return interopText;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/** True when className interop is active (nativewind present). */
|
|
38
|
+
export function hasTypographyClassNameInterop(): boolean {
|
|
39
|
+
getInteropText();
|
|
40
|
+
return interopText !== RNText;
|
|
41
|
+
}
|