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.
Files changed (139) hide show
  1. package/dist/borders-pzt8w5Wv.d.cts +24 -0
  2. package/dist/borders-pzt8w5Wv.d.ts +24 -0
  3. package/dist/chunk-34VD2OBF.cjs +74 -0
  4. package/dist/chunk-6CEDQ6GF.cjs +36 -0
  5. package/dist/chunk-75ZPJI57.cjs +9 -0
  6. package/dist/chunk-ATLK64TQ.js +85 -0
  7. package/dist/chunk-BAZLFQIV.cjs +85 -0
  8. package/dist/chunk-CB7B6PHY.cjs +19 -0
  9. package/dist/chunk-EBHM46CV.cjs +25 -0
  10. package/dist/chunk-IL3LVS32.js +36 -0
  11. package/dist/chunk-JKT74FUK.js +25 -0
  12. package/dist/chunk-L3IF2OVA.cjs +354 -0
  13. package/{src/theme/animations.ts → dist/chunk-L7AJQJBR.js} +16 -8
  14. package/dist/chunk-LARVCDO3.js +113 -0
  15. package/dist/chunk-M34ZK4IV.cjs +53 -0
  16. package/dist/chunk-MLKGABMK.js +9 -0
  17. package/dist/chunk-PBQX6PVK.js +80 -0
  18. package/dist/chunk-PTY5FTFB.cjs +80 -0
  19. package/dist/chunk-T776FXQK.js +53 -0
  20. package/dist/chunk-TAAEIXRF.js +74 -0
  21. package/dist/chunk-TUUH2FJY.cjs +39 -0
  22. package/dist/chunk-U2LSMKZS.js +60 -0
  23. package/dist/chunk-UUUE7HRN.cjs +60 -0
  24. package/dist/chunk-UUVUSZJS.cjs +113 -0
  25. package/dist/chunk-XEHQXLQR.js +354 -0
  26. package/dist/chunk-YHDPOIUZ.js +39 -0
  27. package/dist/colors-MvgcZKUW.d.cts +72 -0
  28. package/dist/colors-MvgcZKUW.d.ts +72 -0
  29. package/dist/index.cjs +2922 -0
  30. package/dist/index.d.cts +3515 -0
  31. package/dist/index.d.ts +3515 -0
  32. package/dist/index.js +2922 -0
  33. package/{src/theme/inject-theme.ts → dist/inject-theme-CTzyfQH0.d.cts} +4 -20
  34. package/dist/inject-theme-CTzyfQH0.d.ts +65 -0
  35. package/dist/inject.cjs +32 -0
  36. package/dist/inject.d.cts +2 -0
  37. package/dist/inject.d.ts +2 -0
  38. package/dist/inject.js +32 -0
  39. package/dist/rule.cjs +19 -0
  40. package/{src/rule.ts → dist/rule.d.cts} +10 -79
  41. package/dist/rule.d.ts +133 -0
  42. package/dist/rule.js +19 -0
  43. package/dist/runtime.cjs +9 -0
  44. package/{src/runtime.ts → dist/runtime.d.cts} +4 -7
  45. package/dist/runtime.d.ts +33 -0
  46. package/dist/runtime.js +9 -0
  47. package/dist/shadows-CWViP1Zk.d.cts +22 -0
  48. package/dist/shadows-CWViP1Zk.d.ts +22 -0
  49. package/dist/sizes-CS9iz8YG.d.cts +46 -0
  50. package/dist/sizes-CS9iz8YG.d.ts +46 -0
  51. package/dist/theme/animations.cjs +15 -0
  52. package/dist/theme/animations.d.cts +12 -0
  53. package/dist/theme/animations.d.ts +12 -0
  54. package/dist/theme/animations.js +15 -0
  55. package/dist/theme/borders.cjs +23 -0
  56. package/dist/theme/borders.d.cts +1 -0
  57. package/dist/theme/borders.d.ts +1 -0
  58. package/dist/theme/borders.js +23 -0
  59. package/dist/theme/colors.cjs +57 -0
  60. package/dist/theme/colors.d.cts +1 -0
  61. package/dist/theme/colors.d.ts +1 -0
  62. package/dist/theme/colors.js +57 -0
  63. package/dist/theme/createTheme.cjs +7 -0
  64. package/dist/theme/createTheme.d.cts +133 -0
  65. package/dist/theme/createTheme.d.ts +133 -0
  66. package/dist/theme/createTheme.js +7 -0
  67. package/dist/theme/filters.cjs +9 -0
  68. package/dist/theme/filters.d.cts +21 -0
  69. package/dist/theme/filters.d.ts +21 -0
  70. package/dist/theme/filters.js +9 -0
  71. package/dist/theme/index.cjs +35 -0
  72. package/dist/theme/index.d.cts +18 -0
  73. package/dist/theme/index.d.ts +18 -0
  74. package/dist/theme/index.js +35 -0
  75. package/dist/theme/shadows.cjs +21 -0
  76. package/dist/theme/shadows.d.cts +1 -0
  77. package/dist/theme/shadows.d.ts +1 -0
  78. package/dist/theme/shadows.js +21 -0
  79. package/dist/theme/sizes.cjs +21 -0
  80. package/dist/theme/sizes.d.cts +1 -0
  81. package/dist/theme/sizes.d.ts +1 -0
  82. package/dist/theme/sizes.js +21 -0
  83. package/dist/theme/typography.cjs +55 -0
  84. package/dist/theme/typography.d.cts +1 -0
  85. package/dist/theme/typography.d.ts +1 -0
  86. package/dist/theme/typography.js +55 -0
  87. package/dist/types-FfRD4Hbd.d.cts +346 -0
  88. package/dist/types-FfRD4Hbd.d.ts +346 -0
  89. package/dist/typography-C8wipcCK.d.cts +87 -0
  90. package/dist/typography-C8wipcCK.d.ts +87 -0
  91. package/package.json +117 -33
  92. package/src/css.ts +0 -140
  93. package/src/cx.ts +0 -105
  94. package/src/dcx.ts +0 -79
  95. package/src/dynamic.ts +0 -117
  96. package/src/hash.ts +0 -55
  97. package/src/index.ts +0 -139
  98. package/src/inject.ts +0 -86
  99. package/src/layer.ts +0 -81
  100. package/src/modifiers/aria.ts +0 -15
  101. package/src/modifiers/colorScheme.ts +0 -32
  102. package/src/modifiers/data.ts +0 -6
  103. package/src/modifiers/direction.ts +0 -5
  104. package/src/modifiers/group.ts +0 -21
  105. package/src/modifiers/index.ts +0 -17
  106. package/src/modifiers/media.ts +0 -11
  107. package/src/modifiers/peer.ts +0 -24
  108. package/src/modifiers/pseudo.ts +0 -183
  109. package/src/modifiers/pseudoElements.ts +0 -26
  110. package/src/modifiers/responsive.ts +0 -110
  111. package/src/modifiers/supports.ts +0 -6
  112. package/src/registry.ts +0 -171
  113. package/src/theme/borders.ts +0 -9
  114. package/src/theme/colors.ts +0 -326
  115. package/src/theme/createTheme.ts +0 -238
  116. package/src/theme/filters.ts +0 -20
  117. package/src/theme/index.ts +0 -9
  118. package/src/theme/shadows.ts +0 -8
  119. package/src/theme/sizes.ts +0 -37
  120. package/src/theme/spacing.ts +0 -44
  121. package/src/theme/typography.ts +0 -72
  122. package/src/tw.ts +0 -967
  123. package/src/types.ts +0 -273
  124. package/src/utilities/accessibility.ts +0 -33
  125. package/src/utilities/backgrounds.ts +0 -87
  126. package/src/utilities/borders.ts +0 -629
  127. package/src/utilities/colors.ts +0 -151
  128. package/src/utilities/effects.ts +0 -181
  129. package/src/utilities/filters.ts +0 -113
  130. package/src/utilities/index.ts +0 -57
  131. package/src/utilities/interactivity.ts +0 -254
  132. package/src/utilities/layout.ts +0 -1194
  133. package/src/utilities/spacing.ts +0 -681
  134. package/src/utilities/svg.ts +0 -35
  135. package/src/utilities/tables.ts +0 -54
  136. package/src/utilities/transforms.ts +0 -88
  137. package/src/utilities/transitions.ts +0 -107
  138. package/src/utilities/typography.ts +0 -387
  139. 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
+ import {
2
+ DEFAULT,
3
+ _2xl,
4
+ inner,
5
+ lg,
6
+ md,
7
+ none,
8
+ sm,
9
+ xl
10
+ } from "../chunk-IL3LVS32.js";
11
+ import "../chunk-MLKGABMK.js";
12
+ export {
13
+ DEFAULT,
14
+ _2xl,
15
+ inner,
16
+ lg,
17
+ md,
18
+ none,
19
+ sm,
20
+ xl
21
+ };
@@ -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 };