typewritingclass 0.2.2 → 0.2.3
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/dist/borders-pzt8w5Wv.d.cts +24 -0
- package/dist/borders-pzt8w5Wv.d.ts +24 -0
- package/dist/chunk-34VD2OBF.cjs +74 -0
- package/dist/chunk-6CEDQ6GF.cjs +36 -0
- package/dist/chunk-75ZPJI57.cjs +9 -0
- package/dist/chunk-ATLK64TQ.js +85 -0
- package/dist/chunk-BAZLFQIV.cjs +85 -0
- package/dist/chunk-CB7B6PHY.cjs +19 -0
- package/dist/chunk-EBHM46CV.cjs +25 -0
- package/dist/chunk-IL3LVS32.js +36 -0
- package/dist/chunk-JKT74FUK.js +25 -0
- package/dist/chunk-L3IF2OVA.cjs +354 -0
- package/{src/theme/animations.ts → dist/chunk-L7AJQJBR.js} +16 -8
- package/dist/chunk-LARVCDO3.js +113 -0
- package/dist/chunk-M34ZK4IV.cjs +53 -0
- package/dist/chunk-MLKGABMK.js +9 -0
- package/dist/chunk-PBQX6PVK.js +80 -0
- package/dist/chunk-PTY5FTFB.cjs +80 -0
- package/dist/chunk-T776FXQK.js +53 -0
- package/dist/chunk-TAAEIXRF.js +74 -0
- package/dist/chunk-TUUH2FJY.cjs +39 -0
- package/dist/chunk-U2LSMKZS.js +60 -0
- package/dist/chunk-UUUE7HRN.cjs +60 -0
- package/dist/chunk-UUVUSZJS.cjs +113 -0
- package/dist/chunk-XEHQXLQR.js +354 -0
- package/dist/chunk-YHDPOIUZ.js +39 -0
- package/dist/colors-MvgcZKUW.d.cts +72 -0
- package/dist/colors-MvgcZKUW.d.ts +72 -0
- package/dist/index.cjs +2922 -0
- package/dist/index.d.cts +3515 -0
- package/dist/index.d.ts +3515 -0
- package/dist/index.js +2922 -0
- package/{src/theme/inject-theme.ts → dist/inject-theme-CTzyfQH0.d.cts} +4 -20
- package/dist/inject-theme-CTzyfQH0.d.ts +65 -0
- package/dist/inject.cjs +32 -0
- package/dist/inject.d.cts +2 -0
- package/dist/inject.d.ts +2 -0
- package/dist/inject.js +32 -0
- package/dist/rule.cjs +19 -0
- package/{src/rule.ts → dist/rule.d.cts} +10 -79
- package/dist/rule.d.ts +133 -0
- package/dist/rule.js +19 -0
- package/dist/runtime.cjs +9 -0
- package/{src/runtime.ts → dist/runtime.d.cts} +4 -7
- package/dist/runtime.d.ts +33 -0
- package/dist/runtime.js +9 -0
- package/dist/shadows-CWViP1Zk.d.cts +22 -0
- package/dist/shadows-CWViP1Zk.d.ts +22 -0
- package/dist/sizes-CS9iz8YG.d.cts +46 -0
- package/dist/sizes-CS9iz8YG.d.ts +46 -0
- package/dist/theme/animations.cjs +15 -0
- package/dist/theme/animations.d.cts +12 -0
- package/dist/theme/animations.d.ts +12 -0
- package/dist/theme/animations.js +15 -0
- package/dist/theme/borders.cjs +23 -0
- package/dist/theme/borders.d.cts +1 -0
- package/dist/theme/borders.d.ts +1 -0
- package/dist/theme/borders.js +23 -0
- package/dist/theme/colors.cjs +57 -0
- package/dist/theme/colors.d.cts +1 -0
- package/dist/theme/colors.d.ts +1 -0
- package/dist/theme/colors.js +57 -0
- package/dist/theme/createTheme.cjs +7 -0
- package/dist/theme/createTheme.d.cts +133 -0
- package/dist/theme/createTheme.d.ts +133 -0
- package/dist/theme/createTheme.js +7 -0
- package/dist/theme/filters.cjs +9 -0
- package/dist/theme/filters.d.cts +21 -0
- package/dist/theme/filters.d.ts +21 -0
- package/dist/theme/filters.js +9 -0
- package/dist/theme/index.cjs +35 -0
- package/dist/theme/index.d.cts +18 -0
- package/dist/theme/index.d.ts +18 -0
- package/dist/theme/index.js +35 -0
- package/dist/theme/shadows.cjs +21 -0
- package/dist/theme/shadows.d.cts +1 -0
- package/dist/theme/shadows.d.ts +1 -0
- package/dist/theme/shadows.js +21 -0
- package/dist/theme/sizes.cjs +21 -0
- package/dist/theme/sizes.d.cts +1 -0
- package/dist/theme/sizes.d.ts +1 -0
- package/dist/theme/sizes.js +21 -0
- package/dist/theme/typography.cjs +55 -0
- package/dist/theme/typography.d.cts +1 -0
- package/dist/theme/typography.d.ts +1 -0
- package/dist/theme/typography.js +55 -0
- package/dist/types-FfRD4Hbd.d.cts +346 -0
- package/dist/types-FfRD4Hbd.d.ts +346 -0
- package/dist/typography-C8wipcCK.d.cts +87 -0
- package/dist/typography-C8wipcCK.d.ts +87 -0
- package/package.json +117 -33
- package/src/css.ts +0 -140
- package/src/cx.ts +0 -105
- package/src/dcx.ts +0 -79
- package/src/dynamic.ts +0 -117
- package/src/hash.ts +0 -55
- package/src/index.ts +0 -139
- package/src/inject.ts +0 -86
- package/src/layer.ts +0 -81
- package/src/modifiers/aria.ts +0 -15
- package/src/modifiers/colorScheme.ts +0 -32
- package/src/modifiers/data.ts +0 -6
- package/src/modifiers/direction.ts +0 -5
- package/src/modifiers/group.ts +0 -21
- package/src/modifiers/index.ts +0 -17
- package/src/modifiers/media.ts +0 -11
- package/src/modifiers/peer.ts +0 -24
- package/src/modifiers/pseudo.ts +0 -183
- package/src/modifiers/pseudoElements.ts +0 -26
- package/src/modifiers/responsive.ts +0 -110
- package/src/modifiers/supports.ts +0 -6
- package/src/registry.ts +0 -171
- package/src/theme/borders.ts +0 -9
- package/src/theme/colors.ts +0 -326
- package/src/theme/createTheme.ts +0 -238
- package/src/theme/filters.ts +0 -20
- package/src/theme/index.ts +0 -9
- package/src/theme/shadows.ts +0 -8
- package/src/theme/sizes.ts +0 -37
- package/src/theme/spacing.ts +0 -44
- package/src/theme/typography.ts +0 -72
- package/src/tw.ts +0 -967
- package/src/types.ts +0 -273
- package/src/utilities/accessibility.ts +0 -33
- package/src/utilities/backgrounds.ts +0 -87
- package/src/utilities/borders.ts +0 -629
- package/src/utilities/colors.ts +0 -151
- package/src/utilities/effects.ts +0 -181
- package/src/utilities/filters.ts +0 -113
- package/src/utilities/index.ts +0 -57
- package/src/utilities/interactivity.ts +0 -254
- package/src/utilities/layout.ts +0 -1194
- package/src/utilities/spacing.ts +0 -681
- package/src/utilities/svg.ts +0 -35
- package/src/utilities/tables.ts +0 -54
- package/src/utilities/transforms.ts +0 -88
- package/src/utilities/transitions.ts +0 -107
- package/src/utilities/typography.ts +0 -387
- package/src/when.ts +0 -63
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export { c as colors } from '../colors-MvgcZKUW.cjs';
|
|
2
|
+
export { t as typography } from '../typography-C8wipcCK.cjs';
|
|
3
|
+
export { s as sizes } from '../sizes-CS9iz8YG.cjs';
|
|
4
|
+
export { s as shadows } from '../shadows-CWViP1Zk.cjs';
|
|
5
|
+
export { b as borders } from '../borders-pzt8w5Wv.cjs';
|
|
6
|
+
export { ThemeConfig, ThemeResult, ThemeVars, createTheme } from './createTheme.cjs';
|
|
7
|
+
export { i as injectTheme, s as setTheme } from '../inject-theme-CTzyfQH0.cjs';
|
|
8
|
+
|
|
9
|
+
declare const spacingScale: Record<number, string>;
|
|
10
|
+
declare function resolveSpacing(value: number | string): string;
|
|
11
|
+
|
|
12
|
+
declare const spacing_resolveSpacing: typeof resolveSpacing;
|
|
13
|
+
declare const spacing_spacingScale: typeof spacingScale;
|
|
14
|
+
declare namespace spacing {
|
|
15
|
+
export { spacing_resolveSpacing as resolveSpacing, spacing_spacingScale as spacingScale };
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export { spacing };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export { c as colors } from '../colors-MvgcZKUW.js';
|
|
2
|
+
export { t as typography } from '../typography-C8wipcCK.js';
|
|
3
|
+
export { s as sizes } from '../sizes-CS9iz8YG.js';
|
|
4
|
+
export { s as shadows } from '../shadows-CWViP1Zk.js';
|
|
5
|
+
export { b as borders } from '../borders-pzt8w5Wv.js';
|
|
6
|
+
export { ThemeConfig, ThemeResult, ThemeVars, createTheme } from './createTheme.js';
|
|
7
|
+
export { i as injectTheme, s as setTheme } from '../inject-theme-CTzyfQH0.js';
|
|
8
|
+
|
|
9
|
+
declare const spacingScale: Record<number, string>;
|
|
10
|
+
declare function resolveSpacing(value: number | string): string;
|
|
11
|
+
|
|
12
|
+
declare const spacing_resolveSpacing: typeof resolveSpacing;
|
|
13
|
+
declare const spacing_spacingScale: typeof spacingScale;
|
|
14
|
+
declare namespace spacing {
|
|
15
|
+
export { spacing_resolveSpacing as resolveSpacing, spacing_spacingScale as spacingScale };
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export { spacing };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import {
|
|
2
|
+
injectTheme,
|
|
3
|
+
setTheme,
|
|
4
|
+
spacing_exports
|
|
5
|
+
} from "../chunk-TAAEIXRF.js";
|
|
6
|
+
import {
|
|
7
|
+
colors_exports
|
|
8
|
+
} from "../chunk-XEHQXLQR.js";
|
|
9
|
+
import {
|
|
10
|
+
typography_exports
|
|
11
|
+
} from "../chunk-LARVCDO3.js";
|
|
12
|
+
import {
|
|
13
|
+
sizes_exports
|
|
14
|
+
} from "../chunk-U2LSMKZS.js";
|
|
15
|
+
import {
|
|
16
|
+
shadows_exports
|
|
17
|
+
} from "../chunk-IL3LVS32.js";
|
|
18
|
+
import {
|
|
19
|
+
borders_exports
|
|
20
|
+
} from "../chunk-YHDPOIUZ.js";
|
|
21
|
+
import {
|
|
22
|
+
createTheme
|
|
23
|
+
} from "../chunk-ATLK64TQ.js";
|
|
24
|
+
import "../chunk-MLKGABMK.js";
|
|
25
|
+
export {
|
|
26
|
+
borders_exports as borders,
|
|
27
|
+
colors_exports as colors,
|
|
28
|
+
createTheme,
|
|
29
|
+
injectTheme,
|
|
30
|
+
setTheme,
|
|
31
|
+
shadows_exports as shadows,
|
|
32
|
+
sizes_exports as sizes,
|
|
33
|
+
spacing_exports as spacing,
|
|
34
|
+
typography_exports as typography
|
|
35
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
var _chunk6CEDQ6GFcjs = require('../chunk-6CEDQ6GF.cjs');
|
|
11
|
+
require('../chunk-75ZPJI57.cjs');
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
exports.DEFAULT = _chunk6CEDQ6GFcjs.DEFAULT; exports._2xl = _chunk6CEDQ6GFcjs._2xl; exports.inner = _chunk6CEDQ6GFcjs.inner; exports.lg = _chunk6CEDQ6GFcjs.lg; exports.md = _chunk6CEDQ6GFcjs.md; exports.none = _chunk6CEDQ6GFcjs.none; exports.sm = _chunk6CEDQ6GFcjs.sm; exports.xl = _chunk6CEDQ6GFcjs.xl;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { D as DEFAULT, _ as _2xl, i as inner, l as lg, m as md, n as none, a as sm, x as xl } from '../shadows-CWViP1Zk.cjs';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { D as DEFAULT, _ as _2xl, i as inner, l as lg, m as md, n as none, a as sm, x as xl } from '../shadows-CWViP1Zk.js';
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
var _chunkUUUE7HRNcjs = require('../chunk-UUUE7HRN.cjs');
|
|
11
|
+
require('../chunk-75ZPJI57.cjs');
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
exports.auto = _chunkUUUE7HRNcjs.auto; exports.fit = _chunkUUUE7HRNcjs.fit; exports.full = _chunkUUUE7HRNcjs.full; exports.max = _chunkUUUE7HRNcjs.max; exports.maxWidths = _chunkUUUE7HRNcjs.maxWidths; exports.min = _chunkUUUE7HRNcjs.min; exports.screen = _chunkUUUE7HRNcjs.screen; exports.screenH = _chunkUUUE7HRNcjs.screenH;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { a as auto, f as fit, b as full, m as max, c as maxWidths, d as min, e as screen, g as screenH } from '../sizes-CS9iz8YG.cjs';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { a as auto, f as fit, b as full, m as max, c as maxWidths, d as min, e as screen, g as screenH } from '../sizes-CS9iz8YG.js';
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import {
|
|
2
|
+
auto,
|
|
3
|
+
fit,
|
|
4
|
+
full,
|
|
5
|
+
max,
|
|
6
|
+
maxWidths,
|
|
7
|
+
min,
|
|
8
|
+
screen,
|
|
9
|
+
screenH
|
|
10
|
+
} from "../chunk-U2LSMKZS.js";
|
|
11
|
+
import "../chunk-MLKGABMK.js";
|
|
12
|
+
export {
|
|
13
|
+
auto,
|
|
14
|
+
fit,
|
|
15
|
+
full,
|
|
16
|
+
max,
|
|
17
|
+
maxWidths,
|
|
18
|
+
min,
|
|
19
|
+
screen,
|
|
20
|
+
screenH
|
|
21
|
+
};
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
var _chunkUUVUSZJScjs = require('../chunk-UUVUSZJS.cjs');
|
|
28
|
+
require('../chunk-75ZPJI57.cjs');
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
exports._2xl = _chunkUUVUSZJScjs._2xl; exports._3xl = _chunkUUVUSZJScjs._3xl; exports._4xl = _chunkUUVUSZJScjs._4xl; exports._5xl = _chunkUUVUSZJScjs._5xl; exports._6xl = _chunkUUVUSZJScjs._6xl; exports._7xl = _chunkUUVUSZJScjs._7xl; exports._8xl = _chunkUUVUSZJScjs._8xl; exports._9xl = _chunkUUVUSZJScjs._9xl; exports.base = _chunkUUVUSZJScjs.base; exports.black_ = _chunkUUVUSZJScjs.black_; exports.bold = _chunkUUVUSZJScjs.bold; exports.extrabold = _chunkUUVUSZJScjs.extrabold; exports.extralight = _chunkUUVUSZJScjs.extralight; exports.fontFamilies = _chunkUUVUSZJScjs.fontFamilies; exports.letterSpacings = _chunkUUVUSZJScjs.letterSpacings; exports.lg = _chunkUUVUSZJScjs.lg; exports.light = _chunkUUVUSZJScjs.light; exports.lineHeights = _chunkUUVUSZJScjs.lineHeights; exports.medium = _chunkUUVUSZJScjs.medium; exports.normal = _chunkUUVUSZJScjs.normal; exports.semibold = _chunkUUVUSZJScjs.semibold; exports.sm = _chunkUUVUSZJScjs.sm; exports.thin = _chunkUUVUSZJScjs.thin; exports.xl = _chunkUUVUSZJScjs.xl; exports.xs = _chunkUUVUSZJScjs.xs;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { T as TextSize, _ as _2xl, a as _3xl, b as _4xl, c as _5xl, d as _6xl, e as _7xl, f as _8xl, g as _9xl, h as base, i as black_, j as bold, k as extrabold, l as extralight, m as fontFamilies, n as letterSpacings, o as lg, p as light, q as lineHeights, r as medium, s as normal, u as semibold, v as sm, w as thin, x as xl, y as xs } from '../typography-C8wipcCK.cjs';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { T as TextSize, _ as _2xl, a as _3xl, b as _4xl, c as _5xl, d as _6xl, e as _7xl, f as _8xl, g as _9xl, h as base, i as black_, j as bold, k as extrabold, l as extralight, m as fontFamilies, n as letterSpacings, o as lg, p as light, q as lineHeights, r as medium, s as normal, u as semibold, v as sm, w as thin, x as xl, y as xs } from '../typography-C8wipcCK.js';
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import {
|
|
2
|
+
_2xl,
|
|
3
|
+
_3xl,
|
|
4
|
+
_4xl,
|
|
5
|
+
_5xl,
|
|
6
|
+
_6xl,
|
|
7
|
+
_7xl,
|
|
8
|
+
_8xl,
|
|
9
|
+
_9xl,
|
|
10
|
+
base,
|
|
11
|
+
black_,
|
|
12
|
+
bold,
|
|
13
|
+
extrabold,
|
|
14
|
+
extralight,
|
|
15
|
+
fontFamilies,
|
|
16
|
+
letterSpacings,
|
|
17
|
+
lg,
|
|
18
|
+
light,
|
|
19
|
+
lineHeights,
|
|
20
|
+
medium,
|
|
21
|
+
normal,
|
|
22
|
+
semibold,
|
|
23
|
+
sm,
|
|
24
|
+
thin,
|
|
25
|
+
xl,
|
|
26
|
+
xs
|
|
27
|
+
} from "../chunk-LARVCDO3.js";
|
|
28
|
+
import "../chunk-MLKGABMK.js";
|
|
29
|
+
export {
|
|
30
|
+
_2xl,
|
|
31
|
+
_3xl,
|
|
32
|
+
_4xl,
|
|
33
|
+
_5xl,
|
|
34
|
+
_6xl,
|
|
35
|
+
_7xl,
|
|
36
|
+
_8xl,
|
|
37
|
+
_9xl,
|
|
38
|
+
base,
|
|
39
|
+
black_,
|
|
40
|
+
bold,
|
|
41
|
+
extrabold,
|
|
42
|
+
extralight,
|
|
43
|
+
fontFamilies,
|
|
44
|
+
letterSpacings,
|
|
45
|
+
lg,
|
|
46
|
+
light,
|
|
47
|
+
lineHeights,
|
|
48
|
+
medium,
|
|
49
|
+
normal,
|
|
50
|
+
semibold,
|
|
51
|
+
sm,
|
|
52
|
+
thin,
|
|
53
|
+
xl,
|
|
54
|
+
xs
|
|
55
|
+
};
|
|
@@ -0,0 +1,346 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A wrapper around a runtime-changeable CSS value.
|
|
3
|
+
*
|
|
4
|
+
* Instead of baking the value directly into the generated CSS, a
|
|
5
|
+
* `DynamicValue` is replaced with a CSS custom property reference
|
|
6
|
+
* (`var(--twc-dN)`). The actual value is applied at runtime through an
|
|
7
|
+
* inline `style` attribute, allowing it to change without regenerating
|
|
8
|
+
* the stylesheet.
|
|
9
|
+
*
|
|
10
|
+
* Create instances with the {@link dynamic} factory -- do not construct
|
|
11
|
+
* this interface manually.
|
|
12
|
+
*
|
|
13
|
+
* @typeParam T - The underlying value type, constrained to `string | number`.
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```ts
|
|
17
|
+
* import { dynamic, bg, dcx } from 'typewritingclass'
|
|
18
|
+
*
|
|
19
|
+
* const color = dynamic('#e11d48')
|
|
20
|
+
* // color._tag => 'DynamicValue'
|
|
21
|
+
* // color.__value => '#e11d48'
|
|
22
|
+
* // color.__id => '--twc-d0'
|
|
23
|
+
*
|
|
24
|
+
* const { className, style } = dcx(bg(color))
|
|
25
|
+
* // Generated CSS uses var(--twc-d0) instead of the literal color.
|
|
26
|
+
* // style maps '--twc-d0' to '#e11d48' for the inline style attribute.
|
|
27
|
+
* ```
|
|
28
|
+
*/
|
|
29
|
+
interface DynamicValue<T extends string | number = string | number> {
|
|
30
|
+
/** Discriminant tag for runtime type checking. Always `'DynamicValue'`. */
|
|
31
|
+
_tag: 'DynamicValue';
|
|
32
|
+
/** The current runtime value (e.g. `'#e11d48'` or `16`). */
|
|
33
|
+
__value: T;
|
|
34
|
+
/** The generated CSS custom property name (e.g. `'--twc-d0'`). */
|
|
35
|
+
__id: string;
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* Wraps a value so it becomes a runtime-dynamic CSS custom property.
|
|
39
|
+
*
|
|
40
|
+
* The returned {@link DynamicValue} can be passed to any utility that
|
|
41
|
+
* accepts `DynamicValue` (e.g. `bg`, `p`, `textColor`, `rounded`). When
|
|
42
|
+
* composed via {@link dcx}, the value is not inlined into the CSS rule;
|
|
43
|
+
* instead a `var(--twc-dN)` reference is emitted, and the concrete value
|
|
44
|
+
* is placed in the `style` object so it can be changed at runtime without
|
|
45
|
+
* touching the stylesheet.
|
|
46
|
+
*
|
|
47
|
+
* Each call to `dynamic` allocates a new, globally unique custom property
|
|
48
|
+
* name (`--twc-d0`, `--twc-d1`, ...).
|
|
49
|
+
*
|
|
50
|
+
* @typeParam T - Inferred from the provided value; constrained to `string | number`.
|
|
51
|
+
* @param value - The initial CSS value (e.g. a color hex string, a pixel value, etc.).
|
|
52
|
+
* @returns A {@link DynamicValue} wrapping the given value with a unique CSS
|
|
53
|
+
* custom property identifier.
|
|
54
|
+
*
|
|
55
|
+
* @example Dynamic background color in React
|
|
56
|
+
* ```ts
|
|
57
|
+
* import { dcx, bg, p, dynamic } from 'typewritingclass'
|
|
58
|
+
*
|
|
59
|
+
* function Banner({ color }: { color: string }) {
|
|
60
|
+
* const { className, style } = dcx(p(4), bg(dynamic(color)))
|
|
61
|
+
* return <div className={className} style={style} />
|
|
62
|
+
* }
|
|
63
|
+
* // CSS: ._xyz { background-color: var(--twc-d0); padding: 1rem; }
|
|
64
|
+
* // Inline style: --twc-d0: <whatever `color` is at render time>
|
|
65
|
+
* ```
|
|
66
|
+
*
|
|
67
|
+
* @example Dynamic spacing
|
|
68
|
+
* ```ts
|
|
69
|
+
* import { dcx, p, dynamic } from 'typewritingclass'
|
|
70
|
+
*
|
|
71
|
+
* const spacing = dynamic('2.5rem')
|
|
72
|
+
* const { className, style } = dcx(p(spacing))
|
|
73
|
+
* // className => "_a1b2c"
|
|
74
|
+
* // style => { '--twc-d0': '2.5rem' }
|
|
75
|
+
* // CSS: ._a1b2c { padding: var(--twc-d0); }
|
|
76
|
+
* ```
|
|
77
|
+
*/
|
|
78
|
+
declare function dynamic<T extends string | number>(value: T): DynamicValue<T>;
|
|
79
|
+
/**
|
|
80
|
+
* Type-guard that checks whether an unknown value is a {@link DynamicValue}.
|
|
81
|
+
*
|
|
82
|
+
* Useful inside utilities and the `css` tagged-template implementation to
|
|
83
|
+
* decide whether to emit a `var()` reference or inline the value directly.
|
|
84
|
+
*
|
|
85
|
+
* @param v - Any value to test.
|
|
86
|
+
* @returns `true` if `v` is a `DynamicValue`, narrowing its type accordingly.
|
|
87
|
+
*
|
|
88
|
+
* @example
|
|
89
|
+
* ```ts
|
|
90
|
+
* import { dynamic, isDynamic } from 'typewritingclass'
|
|
91
|
+
*
|
|
92
|
+
* const val = dynamic('#ff0000')
|
|
93
|
+
* isDynamic(val) // => true
|
|
94
|
+
* isDynamic('#ff0000') // => false
|
|
95
|
+
* isDynamic(42) // => false
|
|
96
|
+
* isDynamic(null) // => false
|
|
97
|
+
* ```
|
|
98
|
+
*/
|
|
99
|
+
declare function isDynamic(v: unknown): v is DynamicValue;
|
|
100
|
+
|
|
101
|
+
declare const __brand: unique symbol;
|
|
102
|
+
/**
|
|
103
|
+
* Creates a nominal/branded type from a base type.
|
|
104
|
+
*
|
|
105
|
+
* Branded types look like their base type at runtime but are distinct at the
|
|
106
|
+
* type level, preventing accidental misuse (e.g. passing a color where a
|
|
107
|
+
* spacing value is expected).
|
|
108
|
+
*
|
|
109
|
+
* @example
|
|
110
|
+
* ```ts
|
|
111
|
+
* type Meters = Brand<number, 'meters'>
|
|
112
|
+
* type Seconds = Brand<number, 'seconds'>
|
|
113
|
+
*
|
|
114
|
+
* const d: Meters = 5 as Meters
|
|
115
|
+
* const t: Seconds = d // Type error — distinct brands!
|
|
116
|
+
* ```
|
|
117
|
+
*/
|
|
118
|
+
type Brand<T, B extends string> = T & {
|
|
119
|
+
readonly [__brand]: B;
|
|
120
|
+
};
|
|
121
|
+
/**
|
|
122
|
+
* A branded CSS color value — hex, `rgb()`, `hsl()`, CSS variable, etc.
|
|
123
|
+
*
|
|
124
|
+
* Theme color tokens (e.g. `blue[500]`) carry this brand. Raw color strings
|
|
125
|
+
* are also accepted alongside `CSSColor` since utility functions accept both.
|
|
126
|
+
*/
|
|
127
|
+
type CSSColor = Brand<string, 'css-color'>;
|
|
128
|
+
/**
|
|
129
|
+
* A branded CSS length value — `rem`, `px`, `em`, `%`, `vh`, `vw`, etc.
|
|
130
|
+
*
|
|
131
|
+
* Theme spacing, size, and border-radius tokens carry this brand.
|
|
132
|
+
*/
|
|
133
|
+
type CSSLength = Brand<string, 'css-length'>;
|
|
134
|
+
/**
|
|
135
|
+
* A branded CSS shadow value — `box-shadow` definition string.
|
|
136
|
+
*
|
|
137
|
+
* Theme shadow tokens (e.g. `lg` from `theme/shadows`) carry this brand.
|
|
138
|
+
*/
|
|
139
|
+
type CSSShadow = Brand<string, 'css-shadow'>;
|
|
140
|
+
/**
|
|
141
|
+
* A branded CSS font-weight value — numeric string like `'400'` or `'700'`.
|
|
142
|
+
*
|
|
143
|
+
* Theme font weight tokens (e.g. `bold`, `semibold`) carry this brand.
|
|
144
|
+
*/
|
|
145
|
+
type CSSFontWeight = Brand<string, 'css-font-weight'>;
|
|
146
|
+
/** Shorthand for any DynamicValue — used in utility input types. */
|
|
147
|
+
type DynamicValueAny = DynamicValue;
|
|
148
|
+
/**
|
|
149
|
+
* Input type for color utilities ({@link bg}, {@link textColor}, {@link borderColor}).
|
|
150
|
+
*
|
|
151
|
+
* Accepts theme color tokens (`CSSColor`), raw CSS color strings, or dynamic values.
|
|
152
|
+
*/
|
|
153
|
+
type ColorInput = CSSColor | string | DynamicValueAny;
|
|
154
|
+
/**
|
|
155
|
+
* Input type for spacing utilities ({@link p}, {@link m}, {@link gap}).
|
|
156
|
+
*
|
|
157
|
+
* Accepts a theme scale number (`4` → `1rem`), a raw CSS length string
|
|
158
|
+
* (`'1.5rem'`), a theme length token, or a dynamic value.
|
|
159
|
+
*/
|
|
160
|
+
type SpacingInput = number | CSSLength | string | DynamicValueAny;
|
|
161
|
+
/**
|
|
162
|
+
* Input type for size utilities ({@link w}, {@link h}, {@link minW}).
|
|
163
|
+
*
|
|
164
|
+
* Accepts a theme scale number, a raw CSS string (`'100%'`), a theme size
|
|
165
|
+
* token (`full`, `screen`), or a dynamic value.
|
|
166
|
+
*/
|
|
167
|
+
type SizeInput = number | CSSLength | string | DynamicValueAny;
|
|
168
|
+
/**
|
|
169
|
+
* Input type for border-radius utilities ({@link rounded}).
|
|
170
|
+
*
|
|
171
|
+
* Accepts a theme radius token (`lg`), a raw CSS string, or a dynamic value.
|
|
172
|
+
*/
|
|
173
|
+
type RadiusInput = CSSLength | string | DynamicValueAny;
|
|
174
|
+
/**
|
|
175
|
+
* Input type for shadow utilities ({@link shadow}).
|
|
176
|
+
*
|
|
177
|
+
* Accepts a theme shadow token (`lg`), a raw CSS string, or a dynamic value.
|
|
178
|
+
*/
|
|
179
|
+
type ShadowInput = CSSShadow | string | DynamicValueAny;
|
|
180
|
+
/**
|
|
181
|
+
* A self-contained CSS rule produced by utility functions, the {@link css}
|
|
182
|
+
* helper, or modifier composition.
|
|
183
|
+
*
|
|
184
|
+
* `StyleRule` is the fundamental unit of the typewritingclass system. Every
|
|
185
|
+
* utility (`p`, `bg`, `rounded`, ...) returns a `StyleRule`, and composing
|
|
186
|
+
* functions like `cx` and `dcx` consume them to generate class names and
|
|
187
|
+
* register CSS in the global stylesheet.
|
|
188
|
+
*
|
|
189
|
+
* You rarely need to construct a `StyleRule` by hand -- use the provided
|
|
190
|
+
* utilities or the `css` tagged-template helper instead.
|
|
191
|
+
*
|
|
192
|
+
* @example Inspecting a rule returned by a utility
|
|
193
|
+
* ```ts
|
|
194
|
+
* import { p } from 'typewritingclass'
|
|
195
|
+
*
|
|
196
|
+
* const rule = p(4)
|
|
197
|
+
* // rule.declarations => { padding: '1rem' }
|
|
198
|
+
* // rule.selectors => []
|
|
199
|
+
* // rule.mediaQueries => []
|
|
200
|
+
* ```
|
|
201
|
+
*
|
|
202
|
+
* @example A rule wrapped with a modifier
|
|
203
|
+
* ```ts
|
|
204
|
+
* import { p, hover } from 'typewritingclass'
|
|
205
|
+
*
|
|
206
|
+
* const rule = hover(p(4))
|
|
207
|
+
* // rule.selectors => [':hover']
|
|
208
|
+
* // CSS: .className:hover { padding: 1rem; }
|
|
209
|
+
* ```
|
|
210
|
+
*/
|
|
211
|
+
interface StyleRule {
|
|
212
|
+
/** Discriminant tag used for runtime type narrowing. Always `'StyleRule'`. */
|
|
213
|
+
_tag: 'StyleRule';
|
|
214
|
+
/**
|
|
215
|
+
* A map of CSS property-value pairs that this rule will emit.
|
|
216
|
+
*
|
|
217
|
+
* Keys are CSS property names (e.g. `'padding'`, `'background-color'`),
|
|
218
|
+
* and values are their corresponding CSS values (e.g. `'1rem'`, `'#3b82f6'`).
|
|
219
|
+
*/
|
|
220
|
+
declarations: Record<string, string>;
|
|
221
|
+
/**
|
|
222
|
+
* Pseudo-class or pseudo-element selectors appended to the generated
|
|
223
|
+
* class name (e.g. `[':hover']`, `[':focus', ':active']`).
|
|
224
|
+
*
|
|
225
|
+
* An empty array means the rule applies unconditionally.
|
|
226
|
+
*/
|
|
227
|
+
selectors: string[];
|
|
228
|
+
/**
|
|
229
|
+
* Media query strings that wrap the generated rule
|
|
230
|
+
* (e.g. `['(min-width: 768px)']`).
|
|
231
|
+
*
|
|
232
|
+
* An empty array means no `@media` wrapper is emitted.
|
|
233
|
+
*/
|
|
234
|
+
mediaQueries: string[];
|
|
235
|
+
/**
|
|
236
|
+
* CSS custom property bindings for dynamic (runtime-changeable) values.
|
|
237
|
+
*
|
|
238
|
+
* When present, the generated CSS references `var(--twc-dN)` and these
|
|
239
|
+
* bindings must be applied as inline `style` on the element (via `dcx`).
|
|
240
|
+
* Keys are CSS custom property names (e.g. `'--twc-d0'`), values are
|
|
241
|
+
* the current runtime values (e.g. `'#ff0000'`).
|
|
242
|
+
*/
|
|
243
|
+
dynamicBindings?: Record<string, string>;
|
|
244
|
+
/**
|
|
245
|
+
* `@supports` query strings that wrap the generated rule
|
|
246
|
+
* (e.g. `['(display: grid)']`).
|
|
247
|
+
*
|
|
248
|
+
* An empty array means no `@supports` wrapper is emitted.
|
|
249
|
+
*/
|
|
250
|
+
supportsQueries: string[];
|
|
251
|
+
/**
|
|
252
|
+
* Optional selector template that wraps the generated class name in a
|
|
253
|
+
* more complex selector pattern. The `&` character is replaced with the
|
|
254
|
+
* generated `.className` at render time.
|
|
255
|
+
*
|
|
256
|
+
* Used for utilities like `spaceX`/`spaceY` (child combinator selectors),
|
|
257
|
+
* `group-*` / `peer-*` modifiers, and `rtl`/`ltr` direction modifiers.
|
|
258
|
+
*
|
|
259
|
+
* @example
|
|
260
|
+
* ```ts
|
|
261
|
+
* // spaceX uses: '& > :not([hidden]) ~ :not([hidden])'
|
|
262
|
+
* // group-hover uses: '.group:hover &'
|
|
263
|
+
* ```
|
|
264
|
+
*/
|
|
265
|
+
selectorTemplate?: string;
|
|
266
|
+
}
|
|
267
|
+
/**
|
|
268
|
+
* A function that accepts a design-token value and returns a {@link StyleRule}.
|
|
269
|
+
*
|
|
270
|
+
* Every spacing, color, typography, and layout helper (`p`, `bg`, `text`, ...)
|
|
271
|
+
* satisfies this signature. The `value` parameter is intentionally `any` so
|
|
272
|
+
* that individual utilities can narrow it to their own accepted types
|
|
273
|
+
* (e.g. `number | string | DynamicValue`).
|
|
274
|
+
*
|
|
275
|
+
* @param value - The design-token or raw CSS value to apply.
|
|
276
|
+
* @returns A {@link StyleRule} containing the appropriate CSS declarations.
|
|
277
|
+
*
|
|
278
|
+
* @example
|
|
279
|
+
* ```ts
|
|
280
|
+
* import type { Utility } from 'typewritingclass'
|
|
281
|
+
* import { p } from 'typewritingclass'
|
|
282
|
+
*
|
|
283
|
+
* // `p` satisfies the Utility signature:
|
|
284
|
+
* const myUtility: Utility = p
|
|
285
|
+
* const rule = myUtility(4)
|
|
286
|
+
* // CSS: padding: 1rem;
|
|
287
|
+
* ```
|
|
288
|
+
*/
|
|
289
|
+
type Utility = (value: any) => StyleRule;
|
|
290
|
+
/**
|
|
291
|
+
* A function that transforms a {@link StyleRule} by wrapping it with a
|
|
292
|
+
* pseudo-class selector or a media query.
|
|
293
|
+
*
|
|
294
|
+
* Modifiers are composable -- you can chain them via {@link when} to build
|
|
295
|
+
* multi-condition rules (e.g. "on hover, at medium breakpoint").
|
|
296
|
+
*
|
|
297
|
+
* @param rule - The source {@link StyleRule} to transform.
|
|
298
|
+
* @returns A new {@link StyleRule} with additional selectors or media queries.
|
|
299
|
+
*
|
|
300
|
+
* @example
|
|
301
|
+
* ```ts
|
|
302
|
+
* import type { Modifier } from 'typewritingclass'
|
|
303
|
+
* import { hover, md } from 'typewritingclass'
|
|
304
|
+
*
|
|
305
|
+
* // `hover` and `md` are both Modifiers:
|
|
306
|
+
* const hoverMod: Modifier = hover
|
|
307
|
+
* const mdMod: Modifier = md
|
|
308
|
+
* ```
|
|
309
|
+
*/
|
|
310
|
+
type Modifier = (rule: StyleRule) => StyleRule;
|
|
311
|
+
/**
|
|
312
|
+
* The return value of {@link dcx}, containing both a class string and an
|
|
313
|
+
* inline `style` object for dynamic CSS custom-property bindings.
|
|
314
|
+
*
|
|
315
|
+
* Use this when your styles include runtime-changeable values created with
|
|
316
|
+
* {@link dynamic}. The `className` goes on the element's class attribute, and
|
|
317
|
+
* `style` must be spread onto the element's inline style so the CSS custom
|
|
318
|
+
* properties are set.
|
|
319
|
+
*
|
|
320
|
+
* @example
|
|
321
|
+
* ```ts
|
|
322
|
+
* import { dcx, bg, dynamic } from 'typewritingclass'
|
|
323
|
+
*
|
|
324
|
+
* const color = dynamic('#ff0000')
|
|
325
|
+
* const result = dcx(bg(color))
|
|
326
|
+
* // result.className => "_a1b2c"
|
|
327
|
+
* // result.style => { '--twc-d0': '#ff0000' }
|
|
328
|
+
*
|
|
329
|
+
* // In JSX:
|
|
330
|
+
* // <div className={result.className} style={result.style} />
|
|
331
|
+
* // CSS: .\_a1b2c { background-color: var(--twc-d0); }
|
|
332
|
+
* ```
|
|
333
|
+
*/
|
|
334
|
+
interface DynamicResult {
|
|
335
|
+
/** A space-separated string of generated CSS class names, ready for `className` or `class`. */
|
|
336
|
+
className: string;
|
|
337
|
+
/**
|
|
338
|
+
* An object of CSS custom property assignments to apply as inline styles.
|
|
339
|
+
*
|
|
340
|
+
* Keys are custom property names (e.g. `'--twc-d0'`), values are the
|
|
341
|
+
* current runtime values (e.g. `'#ff0000'`, `'1.5rem'`).
|
|
342
|
+
*/
|
|
343
|
+
style: Record<string, string>;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
export { type Brand as B, type CSSColor as C, type DynamicResult as D, type Modifier as M, type RadiusInput as R, type StyleRule as S, type Utility as U, type DynamicValue as a, type CSSFontWeight as b, type CSSLength as c, type CSSShadow as d, type ColorInput as e, type ShadowInput as f, type SizeInput as g, type SpacingInput as h, dynamic as i, isDynamic as j };
|