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
@@ -1,6 +1,3 @@
1
- /** Cached reference to the `<style id="twc-theme">` element used by {@link injectTheme}. */
2
- let themeStyleEl: HTMLStyleElement | null = null
3
-
4
1
  /**
5
2
  * Injects theme CSS custom properties into the document.
6
3
  *
@@ -36,19 +33,7 @@ let themeStyleEl: HTMLStyleElement | null = null
36
33
  * // </style>
37
34
  * ```
38
35
  */
39
- export function injectTheme(cssText: string): void {
40
- if (typeof document === 'undefined') return
41
-
42
- if (!themeStyleEl) {
43
- themeStyleEl = document.createElement('style')
44
- themeStyleEl.id = 'twc-theme'
45
- document.head.appendChild(themeStyleEl)
46
- }
47
-
48
- // Append to existing theme styles
49
- themeStyleEl.textContent += (themeStyleEl.textContent ? '\n' : '') + cssText
50
- }
51
-
36
+ declare function injectTheme(cssText: string): void;
52
37
  /**
53
38
  * Activates a named theme by setting the `data-theme` attribute on the
54
39
  * document root element (`<html>`).
@@ -75,7 +60,6 @@ export function injectTheme(cssText: string): void {
75
60
  * // <html data-theme="light"> ...
76
61
  * ```
77
62
  */
78
- export function setTheme(name: string): void {
79
- if (typeof document === 'undefined') return
80
- document.documentElement.setAttribute('data-theme', name)
81
- }
63
+ declare function setTheme(name: string): void;
64
+
65
+ export { injectTheme as i, setTheme as s };
@@ -0,0 +1,65 @@
1
+ /**
2
+ * Injects theme CSS custom properties into the document.
3
+ *
4
+ * Creates (or reuses) a `<style id="twc-theme">` element in the document head
5
+ * and appends the provided CSS text to it. Each call appends to the existing
6
+ * content, so multiple themes can be injected sequentially.
7
+ *
8
+ * This function is a no-op in non-browser environments (SSR-safe).
9
+ *
10
+ * @param cssText - The CSS string to inject, typically the `cssText` property
11
+ * from a {@link ThemeResult} returned by {@link createTheme}.
12
+ *
13
+ * @example
14
+ * ```ts
15
+ * import { createTheme, injectTheme } from 'typewritingclass/theme'
16
+ *
17
+ * const light = createTheme({
18
+ * name: 'light',
19
+ * colors: { blue: { 500: '#3b82f6' } },
20
+ * })
21
+ *
22
+ * const dark = createTheme({
23
+ * name: 'dark',
24
+ * colors: { blue: { 500: '#60a5fa' } },
25
+ * })
26
+ *
27
+ * // Inject both themes into a single <style> element
28
+ * injectTheme(light.cssText)
29
+ * injectTheme(dark.cssText)
30
+ * // <style id="twc-theme">
31
+ * // [data-theme="light"] { --twc-color-blue-500: #3b82f6; }
32
+ * // [data-theme="dark"] { --twc-color-blue-500: #60a5fa; }
33
+ * // </style>
34
+ * ```
35
+ */
36
+ declare function injectTheme(cssText: string): void;
37
+ /**
38
+ * Activates a named theme by setting the `data-theme` attribute on the
39
+ * document root element (`<html>`).
40
+ *
41
+ * The matching theme CSS must already be injected via {@link injectTheme}.
42
+ * The active theme's custom properties will take effect for any rules using
43
+ * `[data-theme="<name>"]` selectors generated by {@link createTheme}.
44
+ *
45
+ * This function is a no-op in non-browser environments (SSR-safe).
46
+ *
47
+ * @param name - The theme name to activate, matching the `name` used in
48
+ * {@link ThemeConfig} when calling {@link createTheme}.
49
+ *
50
+ * @example
51
+ * ```ts
52
+ * import { setTheme } from 'typewritingclass/theme'
53
+ *
54
+ * // Switch to the dark theme at runtime
55
+ * setTheme('dark')
56
+ * // <html data-theme="dark"> ...
57
+ *
58
+ * // Switch back to light
59
+ * setTheme('light')
60
+ * // <html data-theme="light"> ...
61
+ * ```
62
+ */
63
+ declare function setTheme(name: string): void;
64
+
65
+ export { injectTheme as i, setTheme as s };
@@ -0,0 +1,32 @@
1
+ "use strict";
2
+
3
+
4
+ var _chunkM34ZK4IVcjs = require('./chunk-M34ZK4IV.cjs');
5
+ require('./chunk-75ZPJI57.cjs');
6
+
7
+ // src/inject.ts
8
+ var styleEl = null;
9
+ var pending = false;
10
+ function flush() {
11
+ pending = false;
12
+ if (!styleEl) return;
13
+ styleEl.textContent = _chunkM34ZK4IVcjs.generateCSS.call(void 0, );
14
+ }
15
+ function scheduleUpdate() {
16
+ if (pending) return;
17
+ pending = true;
18
+ queueMicrotask(flush);
19
+ }
20
+ function init() {
21
+ if (typeof document === "undefined") return;
22
+ if (styleEl) return;
23
+ styleEl = document.getElementById("twc");
24
+ if (!styleEl) {
25
+ styleEl = document.createElement("style");
26
+ styleEl.id = "twc";
27
+ document.head.appendChild(styleEl);
28
+ }
29
+ _chunkM34ZK4IVcjs.onChange.call(void 0, scheduleUpdate);
30
+ scheduleUpdate();
31
+ }
32
+ init();
@@ -0,0 +1,2 @@
1
+
2
+ export { }
@@ -0,0 +1,2 @@
1
+
2
+ export { }
package/dist/inject.js ADDED
@@ -0,0 +1,32 @@
1
+ import {
2
+ generateCSS,
3
+ onChange
4
+ } from "./chunk-T776FXQK.js";
5
+ import "./chunk-MLKGABMK.js";
6
+
7
+ // src/inject.ts
8
+ var styleEl = null;
9
+ var pending = false;
10
+ function flush() {
11
+ pending = false;
12
+ if (!styleEl) return;
13
+ styleEl.textContent = generateCSS();
14
+ }
15
+ function scheduleUpdate() {
16
+ if (pending) return;
17
+ pending = true;
18
+ queueMicrotask(flush);
19
+ }
20
+ function init() {
21
+ if (typeof document === "undefined") return;
22
+ if (styleEl) return;
23
+ styleEl = document.getElementById("twc");
24
+ if (!styleEl) {
25
+ styleEl = document.createElement("style");
26
+ styleEl.id = "twc";
27
+ document.head.appendChild(styleEl);
28
+ }
29
+ onChange(scheduleUpdate);
30
+ scheduleUpdate();
31
+ }
32
+ init();
package/dist/rule.cjs ADDED
@@ -0,0 +1,19 @@
1
+ "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+ var _chunkPTY5FTFBcjs = require('./chunk-PTY5FTFB.cjs');
10
+ require('./chunk-75ZPJI57.cjs');
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+ exports.combineRules = _chunkPTY5FTFBcjs.combineRules; exports.createDynamicRule = _chunkPTY5FTFBcjs.createDynamicRule; exports.createRule = _chunkPTY5FTFBcjs.createRule; exports.wrapWithMediaQuery = _chunkPTY5FTFBcjs.wrapWithMediaQuery; exports.wrapWithSelector = _chunkPTY5FTFBcjs.wrapWithSelector; exports.wrapWithSelectorTemplate = _chunkPTY5FTFBcjs.wrapWithSelectorTemplate; exports.wrapWithSupportsQuery = _chunkPTY5FTFBcjs.wrapWithSupportsQuery;
@@ -1,4 +1,4 @@
1
- import type { StyleRule } from './types.ts'
1
+ import { S as StyleRule } from './types-FfRD4Hbd.cjs';
2
2
 
3
3
  /**
4
4
  * Creates a static {@link StyleRule} from a set of CSS declarations.
@@ -18,16 +18,7 @@ import type { StyleRule } from './types.ts'
18
18
  * // { _tag: 'StyleRule', declarations: { padding: '1rem', margin: '0' }, selectors: [], mediaQueries: [] }
19
19
  * ```
20
20
  */
21
- export function createRule(declarations: Record<string, string>): StyleRule {
22
- return {
23
- _tag: 'StyleRule',
24
- declarations,
25
- selectors: [],
26
- mediaQueries: [],
27
- supportsQueries: [],
28
- }
29
- }
30
-
21
+ declare function createRule(declarations: Record<string, string>): StyleRule;
31
22
  /**
32
23
  * Creates a {@link StyleRule} that includes dynamic CSS custom property bindings.
33
24
  *
@@ -52,20 +43,7 @@ export function createRule(declarations: Record<string, string>): StyleRule {
52
43
  * // rule.dynamicBindings === { '--twc-d0': '#ff0000' }
53
44
  * ```
54
45
  */
55
- export function createDynamicRule(
56
- declarations: Record<string, string>,
57
- dynamicBindings: Record<string, string>,
58
- ): StyleRule {
59
- return {
60
- _tag: 'StyleRule',
61
- declarations,
62
- selectors: [],
63
- mediaQueries: [],
64
- supportsQueries: [],
65
- dynamicBindings,
66
- }
67
- }
68
-
46
+ declare function createDynamicRule(declarations: Record<string, string>, dynamicBindings: Record<string, string>): StyleRule;
69
47
  /**
70
48
  * Merges multiple {@link StyleRule} objects into a single combined rule.
71
49
  *
@@ -86,33 +64,7 @@ export function createDynamicRule(
86
64
  * // combined.declarations === { padding: '1rem', margin: '0' }
87
65
  * ```
88
66
  */
89
- export function combineRules(rules: StyleRule[]): StyleRule {
90
- const merged: Record<string, string> = {}
91
- const selectorSet = new Set<string>()
92
- const mediaQuerySet = new Set<string>()
93
- const supportsQuerySet = new Set<string>()
94
- let dynamicBindings: Record<string, string> | undefined
95
- for (const rule of rules) {
96
- Object.assign(merged, rule.declarations)
97
- for (const s of rule.selectors) selectorSet.add(s)
98
- for (const mq of rule.mediaQueries) mediaQuerySet.add(mq)
99
- for (const sq of rule.supportsQueries) supportsQuerySet.add(sq)
100
- if (rule.dynamicBindings) {
101
- if (!dynamicBindings) dynamicBindings = {}
102
- Object.assign(dynamicBindings, rule.dynamicBindings)
103
- }
104
- }
105
- const result: StyleRule = {
106
- _tag: 'StyleRule',
107
- declarations: merged,
108
- selectors: [...selectorSet],
109
- mediaQueries: [...mediaQuerySet],
110
- supportsQueries: [...supportsQuerySet],
111
- }
112
- if (dynamicBindings) result.dynamicBindings = dynamicBindings
113
- return result
114
- }
115
-
67
+ declare function combineRules(rules: StyleRule[]): StyleRule;
116
68
  /**
117
69
  * Returns a copy of the given rule with an additional CSS selector appended.
118
70
  *
@@ -132,13 +84,7 @@ export function combineRules(rules: StyleRule[]): StyleRule {
132
84
  * // Rendered CSS: .abc:hover { opacity: 1; }
133
85
  * ```
134
86
  */
135
- export function wrapWithSelector(rule: StyleRule, selector: string): StyleRule {
136
- return {
137
- ...rule,
138
- selectors: [...rule.selectors, selector],
139
- }
140
- }
141
-
87
+ declare function wrapWithSelector(rule: StyleRule, selector: string): StyleRule;
142
88
  /**
143
89
  * Returns a copy of the given rule wrapped in an additional CSS media query.
144
90
  *
@@ -158,13 +104,7 @@ export function wrapWithSelector(rule: StyleRule, selector: string): StyleRule {
158
104
  * // Rendered CSS: @media (min-width: 768px) { .abc { padding: 2rem; } }
159
105
  * ```
160
106
  */
161
- export function wrapWithMediaQuery(rule: StyleRule, query: string): StyleRule {
162
- return {
163
- ...rule,
164
- mediaQueries: [...rule.mediaQueries, query],
165
- }
166
- }
167
-
107
+ declare function wrapWithMediaQuery(rule: StyleRule, query: string): StyleRule;
168
108
  /**
169
109
  * Returns a copy of the given rule with a selector template applied.
170
110
  *
@@ -176,13 +116,7 @@ export function wrapWithMediaQuery(rule: StyleRule, query: string): StyleRule {
176
116
  * @param template - The selector template (e.g., `'.group:hover &'`).
177
117
  * @returns A new {@link StyleRule} with the `selectorTemplate` set.
178
118
  */
179
- export function wrapWithSelectorTemplate(rule: StyleRule, template: string): StyleRule {
180
- return {
181
- ...rule,
182
- selectorTemplate: template,
183
- }
184
- }
185
-
119
+ declare function wrapWithSelectorTemplate(rule: StyleRule, template: string): StyleRule;
186
120
  /**
187
121
  * Returns a copy of the given rule wrapped in an additional CSS `@supports` query.
188
122
  *
@@ -194,9 +128,6 @@ export function wrapWithSelectorTemplate(rule: StyleRule, template: string): Sty
194
128
  * @param query - The supports query condition (e.g., `'(display: grid)'`).
195
129
  * @returns A new {@link StyleRule} with the query added to its `supportsQueries` array.
196
130
  */
197
- export function wrapWithSupportsQuery(rule: StyleRule, query: string): StyleRule {
198
- return {
199
- ...rule,
200
- supportsQueries: [...rule.supportsQueries, query],
201
- }
202
- }
131
+ declare function wrapWithSupportsQuery(rule: StyleRule, query: string): StyleRule;
132
+
133
+ export { combineRules, createDynamicRule, createRule, wrapWithMediaQuery, wrapWithSelector, wrapWithSelectorTemplate, wrapWithSupportsQuery };
package/dist/rule.d.ts ADDED
@@ -0,0 +1,133 @@
1
+ import { S as StyleRule } from './types-FfRD4Hbd.js';
2
+
3
+ /**
4
+ * Creates a static {@link StyleRule} from a set of CSS declarations.
5
+ *
6
+ * This is the lowest-level rule constructor. The returned rule has no
7
+ * selectors, media queries, or dynamic bindings attached.
8
+ *
9
+ * @internal
10
+ * @param declarations - A record of CSS property-value pairs
11
+ * (e.g., `{ 'background-color': '#3b82f6' }`).
12
+ * @returns A new {@link StyleRule} with the given declarations and empty
13
+ * `selectors` and `mediaQueries` arrays.
14
+ *
15
+ * @example
16
+ * ```ts
17
+ * const rule = createRule({ 'padding': '1rem', 'margin': '0' })
18
+ * // { _tag: 'StyleRule', declarations: { padding: '1rem', margin: '0' }, selectors: [], mediaQueries: [] }
19
+ * ```
20
+ */
21
+ declare function createRule(declarations: Record<string, string>): StyleRule;
22
+ /**
23
+ * Creates a {@link StyleRule} that includes dynamic CSS custom property bindings.
24
+ *
25
+ * Dynamic rules are produced when a utility receives a {@link dynamic} value.
26
+ * The `dynamicBindings` map CSS custom property names to runtime expressions,
27
+ * enabling values that can change without regenerating the class name.
28
+ *
29
+ * @internal
30
+ * @param declarations - A record of CSS property-value pairs, where values may
31
+ * reference CSS custom properties (e.g., `{ color: 'var(--twc-d0)' }`).
32
+ * @param dynamicBindings - A record mapping CSS custom property names to their
33
+ * runtime values (e.g., `{ '--twc-d0': '#ff0000' }`).
34
+ * @returns A new {@link StyleRule} with declarations, empty selectors/mediaQueries,
35
+ * and the given `dynamicBindings`.
36
+ *
37
+ * @example
38
+ * ```ts
39
+ * const rule = createDynamicRule(
40
+ * { 'color': 'var(--twc-d0)' },
41
+ * { '--twc-d0': '#ff0000' },
42
+ * )
43
+ * // rule.dynamicBindings === { '--twc-d0': '#ff0000' }
44
+ * ```
45
+ */
46
+ declare function createDynamicRule(declarations: Record<string, string>, dynamicBindings: Record<string, string>): StyleRule;
47
+ /**
48
+ * Merges multiple {@link StyleRule} objects into a single combined rule.
49
+ *
50
+ * Declarations are merged left-to-right (later rules override earlier ones for
51
+ * the same property). Selectors and media queries are de-duplicated and
52
+ * concatenated. Dynamic bindings from all rules are merged together.
53
+ *
54
+ * @internal
55
+ * @param rules - An array of {@link StyleRule} objects to merge.
56
+ * @returns A single {@link StyleRule} containing the merged declarations,
57
+ * selectors, media queries, and dynamic bindings from all input rules.
58
+ *
59
+ * @example
60
+ * ```ts
61
+ * const a = createRule({ padding: '1rem' })
62
+ * const b = createRule({ margin: '0' })
63
+ * const combined = combineRules([a, b])
64
+ * // combined.declarations === { padding: '1rem', margin: '0' }
65
+ * ```
66
+ */
67
+ declare function combineRules(rules: StyleRule[]): StyleRule;
68
+ /**
69
+ * Returns a copy of the given rule with an additional CSS selector appended.
70
+ *
71
+ * The selector is appended directly to the generated class name when the CSS
72
+ * is rendered (e.g., `.abc:hover`). Multiple selectors can be stacked by
73
+ * calling this function repeatedly.
74
+ *
75
+ * @internal
76
+ * @param rule - The source {@link StyleRule} to wrap.
77
+ * @param selector - The CSS selector suffix to append (e.g., `':hover'`, `':first-child'`).
78
+ * @returns A new {@link StyleRule} with the selector added to its `selectors` array.
79
+ *
80
+ * @example
81
+ * ```ts
82
+ * const base = createRule({ opacity: '1' })
83
+ * const hovered = wrapWithSelector(base, ':hover')
84
+ * // Rendered CSS: .abc:hover { opacity: 1; }
85
+ * ```
86
+ */
87
+ declare function wrapWithSelector(rule: StyleRule, selector: string): StyleRule;
88
+ /**
89
+ * Returns a copy of the given rule wrapped in an additional CSS media query.
90
+ *
91
+ * When rendered, the rule's CSS block is nested inside a `@media` at-rule.
92
+ * Multiple media queries can be stacked by calling this function repeatedly.
93
+ *
94
+ * @internal
95
+ * @param rule - The source {@link StyleRule} to wrap.
96
+ * @param query - The media query condition (e.g., `'(min-width: 768px)'`,
97
+ * `'(prefers-color-scheme: dark)'`).
98
+ * @returns A new {@link StyleRule} with the query added to its `mediaQueries` array.
99
+ *
100
+ * @example
101
+ * ```ts
102
+ * const base = createRule({ padding: '2rem' })
103
+ * const responsive = wrapWithMediaQuery(base, '(min-width: 768px)')
104
+ * // Rendered CSS: @media (min-width: 768px) { .abc { padding: 2rem; } }
105
+ * ```
106
+ */
107
+ declare function wrapWithMediaQuery(rule: StyleRule, query: string): StyleRule;
108
+ /**
109
+ * Returns a copy of the given rule with a selector template applied.
110
+ *
111
+ * The template uses `&` as a placeholder for the generated class name.
112
+ * At render time, `&` is replaced with `.className`.
113
+ *
114
+ * @internal
115
+ * @param rule - The source {@link StyleRule} to wrap.
116
+ * @param template - The selector template (e.g., `'.group:hover &'`).
117
+ * @returns A new {@link StyleRule} with the `selectorTemplate` set.
118
+ */
119
+ declare function wrapWithSelectorTemplate(rule: StyleRule, template: string): StyleRule;
120
+ /**
121
+ * Returns a copy of the given rule wrapped in an additional CSS `@supports` query.
122
+ *
123
+ * When rendered, the rule's CSS block is nested inside a `@supports` at-rule.
124
+ * Multiple supports queries can be stacked by calling this function repeatedly.
125
+ *
126
+ * @internal
127
+ * @param rule - The source {@link StyleRule} to wrap.
128
+ * @param query - The supports query condition (e.g., `'(display: grid)'`).
129
+ * @returns A new {@link StyleRule} with the query added to its `supportsQueries` array.
130
+ */
131
+ declare function wrapWithSupportsQuery(rule: StyleRule, query: string): StyleRule;
132
+
133
+ export { combineRules, createDynamicRule, createRule, wrapWithMediaQuery, wrapWithSelector, wrapWithSelectorTemplate, wrapWithSupportsQuery };
package/dist/rule.js ADDED
@@ -0,0 +1,19 @@
1
+ import {
2
+ combineRules,
3
+ createDynamicRule,
4
+ createRule,
5
+ wrapWithMediaQuery,
6
+ wrapWithSelector,
7
+ wrapWithSelectorTemplate,
8
+ wrapWithSupportsQuery
9
+ } from "./chunk-PBQX6PVK.js";
10
+ import "./chunk-MLKGABMK.js";
11
+ export {
12
+ combineRules,
13
+ createDynamicRule,
14
+ createRule,
15
+ wrapWithMediaQuery,
16
+ wrapWithSelector,
17
+ wrapWithSelectorTemplate,
18
+ wrapWithSupportsQuery
19
+ };
@@ -0,0 +1,9 @@
1
+ "use strict";Object.defineProperty(exports, "__esModule", {value: true});require('./chunk-75ZPJI57.cjs');
2
+
3
+ // src/runtime.ts
4
+ function __twcDynamic(className, bindings) {
5
+ return { className, style: bindings };
6
+ }
7
+
8
+
9
+ exports.__twcDynamic = __twcDynamic;
@@ -1,4 +1,4 @@
1
- import type { DynamicResult } from './types.ts'
1
+ import { D as DynamicResult } from './types-FfRD4Hbd.cjs';
2
2
 
3
3
  /**
4
4
  * Runtime helper injected by the compiler when `dynamic()` values are used.
@@ -28,9 +28,6 @@ import type { DynamicResult } from './types.ts'
28
28
  * // => { className: '_a1b2c', style: { '--twc-d0': '#ff0000' } }
29
29
  * ```
30
30
  */
31
- export function __twcDynamic(
32
- className: string,
33
- bindings: Record<string, string>,
34
- ): DynamicResult {
35
- return { className, style: bindings }
36
- }
31
+ declare function __twcDynamic(className: string, bindings: Record<string, string>): DynamicResult;
32
+
33
+ export { __twcDynamic };
@@ -0,0 +1,33 @@
1
+ import { D as DynamicResult } from './types-FfRD4Hbd.js';
2
+
3
+ /**
4
+ * Runtime helper injected by the compiler when `dynamic()` values are used.
5
+ *
6
+ * Combines a pre-computed static class name with a set of CSS custom property
7
+ * bindings that carry runtime values. The returned {@link DynamicResult} can
8
+ * be spread onto a DOM element (or passed to {@link useStyle} in React) to
9
+ * apply both the `className` and the inline `style` containing the custom
10
+ * property overrides.
11
+ *
12
+ * This function is **not intended to be called manually** -- the typewritingclass
13
+ * compiler generates calls to it when it encounters `dynamic()` in style
14
+ * expressions.
15
+ *
16
+ * @internal
17
+ * @param className - The hashed class name generated at compile time
18
+ * (e.g., `'_a1b2c'`).
19
+ * @param bindings - A record mapping CSS custom property names to their
20
+ * runtime string values (e.g., `{ '--twc-d0': '#ff0000' }`).
21
+ * @returns A {@link DynamicResult} with `className` and `style` properties
22
+ * ready for spreading onto an element.
23
+ *
24
+ * @example
25
+ * ```ts
26
+ * // Compiler output (not written by hand):
27
+ * __twcDynamic('_a1b2c', { '--twc-d0': props.color })
28
+ * // => { className: '_a1b2c', style: { '--twc-d0': '#ff0000' } }
29
+ * ```
30
+ */
31
+ declare function __twcDynamic(className: string, bindings: Record<string, string>): DynamicResult;
32
+
33
+ export { __twcDynamic };
@@ -0,0 +1,9 @@
1
+ import "./chunk-MLKGABMK.js";
2
+
3
+ // src/runtime.ts
4
+ function __twcDynamic(className, bindings) {
5
+ return { className, style: bindings };
6
+ }
7
+ export {
8
+ __twcDynamic
9
+ };
@@ -0,0 +1,22 @@
1
+ declare const sm = "0 1px 2px 0 rgb(0 0 0 / 0.05)";
2
+ declare const DEFAULT = "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
3
+ declare const md = "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
4
+ declare const lg = "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
5
+ declare const xl = "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
6
+ declare const _2xl = "0 25px 50px -12px rgb(0 0 0 / 0.25)";
7
+ declare const inner = "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)";
8
+ declare const none = "0 0 #0000";
9
+
10
+ declare const shadows_DEFAULT: typeof DEFAULT;
11
+ declare const shadows__2xl: typeof _2xl;
12
+ declare const shadows_inner: typeof inner;
13
+ declare const shadows_lg: typeof lg;
14
+ declare const shadows_md: typeof md;
15
+ declare const shadows_none: typeof none;
16
+ declare const shadows_sm: typeof sm;
17
+ declare const shadows_xl: typeof xl;
18
+ declare namespace shadows {
19
+ export { shadows_DEFAULT as DEFAULT, shadows__2xl as _2xl, shadows_inner as inner, shadows_lg as lg, shadows_md as md, shadows_none as none, shadows_sm as sm, shadows_xl as xl };
20
+ }
21
+
22
+ export { DEFAULT as D, _2xl as _, sm as a, inner as i, lg as l, md as m, none as n, shadows as s, xl as x };
@@ -0,0 +1,22 @@
1
+ declare const sm = "0 1px 2px 0 rgb(0 0 0 / 0.05)";
2
+ declare const DEFAULT = "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
3
+ declare const md = "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
4
+ declare const lg = "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
5
+ declare const xl = "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
6
+ declare const _2xl = "0 25px 50px -12px rgb(0 0 0 / 0.25)";
7
+ declare const inner = "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)";
8
+ declare const none = "0 0 #0000";
9
+
10
+ declare const shadows_DEFAULT: typeof DEFAULT;
11
+ declare const shadows__2xl: typeof _2xl;
12
+ declare const shadows_inner: typeof inner;
13
+ declare const shadows_lg: typeof lg;
14
+ declare const shadows_md: typeof md;
15
+ declare const shadows_none: typeof none;
16
+ declare const shadows_sm: typeof sm;
17
+ declare const shadows_xl: typeof xl;
18
+ declare namespace shadows {
19
+ export { shadows_DEFAULT as DEFAULT, shadows__2xl as _2xl, shadows_inner as inner, shadows_lg as lg, shadows_md as md, shadows_none as none, shadows_sm as sm, shadows_xl as xl };
20
+ }
21
+
22
+ export { DEFAULT as D, _2xl as _, sm as a, inner as i, lg as l, md as m, none as n, shadows as s, xl as x };
@@ -0,0 +1,46 @@
1
+ declare const full = "100%";
2
+ declare const screen = "100vw";
3
+ declare const screenH = "100vh";
4
+ declare const min = "min-content";
5
+ declare const max = "max-content";
6
+ declare const fit = "fit-content";
7
+ declare const auto = "auto";
8
+ declare const maxWidths: {
9
+ readonly none: "none";
10
+ readonly 0: "0rem";
11
+ readonly xs: "20rem";
12
+ readonly sm: "24rem";
13
+ readonly md: "28rem";
14
+ readonly lg: "32rem";
15
+ readonly xl: "36rem";
16
+ readonly '2xl': "42rem";
17
+ readonly '3xl': "48rem";
18
+ readonly '4xl': "56rem";
19
+ readonly '5xl': "64rem";
20
+ readonly '6xl': "72rem";
21
+ readonly '7xl': "80rem";
22
+ readonly full: "100%";
23
+ readonly min: "min-content";
24
+ readonly max: "max-content";
25
+ readonly fit: "fit-content";
26
+ readonly prose: "65ch";
27
+ readonly screenSm: "640px";
28
+ readonly screenMd: "768px";
29
+ readonly screenLg: "1024px";
30
+ readonly screenXl: "1280px";
31
+ readonly screen2xl: "1536px";
32
+ };
33
+
34
+ declare const sizes_auto: typeof auto;
35
+ declare const sizes_fit: typeof fit;
36
+ declare const sizes_full: typeof full;
37
+ declare const sizes_max: typeof max;
38
+ declare const sizes_maxWidths: typeof maxWidths;
39
+ declare const sizes_min: typeof min;
40
+ declare const sizes_screen: typeof screen;
41
+ declare const sizes_screenH: typeof screenH;
42
+ declare namespace sizes {
43
+ export { sizes_auto as auto, sizes_fit as fit, sizes_full as full, sizes_max as max, sizes_maxWidths as maxWidths, sizes_min as min, sizes_screen as screen, sizes_screenH as screenH };
44
+ }
45
+
46
+ export { auto as a, full as b, maxWidths as c, min as d, screen as e, fit as f, screenH as g, max as m, sizes as s };