@csszyx/compiler 0.7.0 → 0.8.0
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/README.md +27 -2
- package/dist/color-var.cjs +3 -28
- package/dist/{color-var.js → color-var.mjs} +2 -6
- package/dist/index.cjs +2073 -3202
- package/dist/index.d.cts +12118 -111
- package/dist/index.d.mts +13484 -0
- package/dist/index.mjs +2706 -0
- package/dist/shared/compiler.BIUVmI0H.mjs +2271 -0
- package/dist/{index.js → shared/compiler.C6jT0mcT.cjs} +75 -1609
- package/dist/transform-core.cjs +17 -0
- package/dist/transform-core.d.cts +86 -0
- package/dist/transform-core.d.mts +86 -0
- package/dist/transform-core.mjs +1 -0
- package/package.json +41 -19
- package/dist/chunk-3RG5ZIWI.js +0 -10
- package/dist/index.d.ts +0 -1477
- /package/dist/{color-var.d.ts → color-var.d.mts} +0 -0
package/dist/index.d.ts
DELETED
|
@@ -1,1477 +0,0 @@
|
|
|
1
|
-
import * as t from '@babel/types';
|
|
2
|
-
import * as CSS from 'csstype';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Valid recovery modes for szRecover attribute.
|
|
6
|
-
*/
|
|
7
|
-
type RecoveryMode = 'csr' | 'dev-only';
|
|
8
|
-
/**
|
|
9
|
-
* Metadata for a recovery token.
|
|
10
|
-
*/
|
|
11
|
-
interface TokenMetadata {
|
|
12
|
-
/**
|
|
13
|
-
* The recovery mode ('csr' or 'dev-only')
|
|
14
|
-
*/
|
|
15
|
-
mode: RecoveryMode;
|
|
16
|
-
/**
|
|
17
|
-
* Component name where szRecover is used
|
|
18
|
-
*/
|
|
19
|
-
component: string;
|
|
20
|
-
/**
|
|
21
|
-
* Absolute file path
|
|
22
|
-
*/
|
|
23
|
-
filePath: string;
|
|
24
|
-
/**
|
|
25
|
-
* Line number in source file
|
|
26
|
-
*/
|
|
27
|
-
line: number;
|
|
28
|
-
/**
|
|
29
|
-
* Column number in source file
|
|
30
|
-
*/
|
|
31
|
-
column: number;
|
|
32
|
-
/**
|
|
33
|
-
* Build ID (git hash or timestamp)
|
|
34
|
-
*/
|
|
35
|
-
buildId: string;
|
|
36
|
-
}
|
|
37
|
-
/**
|
|
38
|
-
* Generated recovery token with metadata.
|
|
39
|
-
*/
|
|
40
|
-
interface RecoveryToken {
|
|
41
|
-
/**
|
|
42
|
-
* The generated token string
|
|
43
|
-
*/
|
|
44
|
-
token: string;
|
|
45
|
-
/**
|
|
46
|
-
* Token metadata
|
|
47
|
-
*/
|
|
48
|
-
metadata: TokenMetadata;
|
|
49
|
-
}
|
|
50
|
-
/**
|
|
51
|
-
* Validates if a value is a valid recovery mode.
|
|
52
|
-
*
|
|
53
|
-
* @param {unknown} value - The value to validate
|
|
54
|
-
* @returns {value is RecoveryMode} True if valid recovery mode
|
|
55
|
-
*
|
|
56
|
-
* @example
|
|
57
|
-
* ```typescript
|
|
58
|
-
* isValidRecoveryMode('csr') // true
|
|
59
|
-
* isValidRecoveryMode('dev-only') // true
|
|
60
|
-
* isValidRecoveryMode('invalid') // false
|
|
61
|
-
* ```
|
|
62
|
-
*/
|
|
63
|
-
declare function isValidRecoveryMode(value: unknown): value is RecoveryMode;
|
|
64
|
-
/**
|
|
65
|
-
* Generates a cryptographic token for a recovery declaration using WASM.
|
|
66
|
-
*
|
|
67
|
-
* @param {TokenMetadata} metadata - Token metadata
|
|
68
|
-
* @returns {string} The generated token (Base62 format)
|
|
69
|
-
*/
|
|
70
|
-
declare function generateRecoveryToken(metadata: TokenMetadata): string;
|
|
71
|
-
/**
|
|
72
|
-
* Creates a recovery token with full metadata.
|
|
73
|
-
*
|
|
74
|
-
* @param {Omit<TokenMetadata, 'buildId'>} metadata - Token metadata without buildId
|
|
75
|
-
* @param {string} buildId - Build ID to use
|
|
76
|
-
* @returns {RecoveryToken} The generated token with metadata
|
|
77
|
-
*
|
|
78
|
-
* @example
|
|
79
|
-
* ```typescript
|
|
80
|
-
* const recovery = createRecoveryToken({
|
|
81
|
-
* mode: 'csr',
|
|
82
|
-
* component: 'Button',
|
|
83
|
-
* filePath: '/app/Button.tsx',
|
|
84
|
-
* line: 10,
|
|
85
|
-
* column: 5
|
|
86
|
-
* }, 'build-123');
|
|
87
|
-
* ```
|
|
88
|
-
*/
|
|
89
|
-
declare function createRecoveryToken(metadata: Omit<TokenMetadata, 'buildId'>, buildId: string): RecoveryToken;
|
|
90
|
-
/**
|
|
91
|
-
* Validates szRecover attribute value.
|
|
92
|
-
*
|
|
93
|
-
* Ensures the value is a static literal 'csr' or 'dev-only'.
|
|
94
|
-
* Runtime expressions are not allowed.
|
|
95
|
-
*
|
|
96
|
-
* @param {unknown} value - The attribute value to validate
|
|
97
|
-
* @param {string} componentName - Component name for error messages
|
|
98
|
-
* @returns {{ valid: boolean; error?: string }} Validation result
|
|
99
|
-
*
|
|
100
|
-
* @example
|
|
101
|
-
* ```typescript
|
|
102
|
-
* validateSzRecover('csr', 'MyComponent')
|
|
103
|
-
* // Returns: { valid: true }
|
|
104
|
-
*
|
|
105
|
-
* validateSzRecover('invalid', 'MyComponent')
|
|
106
|
-
* // Returns: { valid: false, error: '...' }
|
|
107
|
-
* ```
|
|
108
|
-
*/
|
|
109
|
-
declare function validateSzRecover(value: unknown, componentName: string): {
|
|
110
|
-
valid: boolean;
|
|
111
|
-
error?: string;
|
|
112
|
-
};
|
|
113
|
-
/**
|
|
114
|
-
* Injects recovery token into JSX attributes.
|
|
115
|
-
*
|
|
116
|
-
* Adds the data-sz-recovery-token attribute with the generated token.
|
|
117
|
-
*
|
|
118
|
-
* @param {Record<string, unknown>} attributes - JSX attributes object
|
|
119
|
-
* @param {string} token - The recovery token to inject
|
|
120
|
-
* @returns {Record<string, unknown>} Updated attributes with token
|
|
121
|
-
*
|
|
122
|
-
* @example
|
|
123
|
-
* ```typescript
|
|
124
|
-
* const attrs = { szRecover: 'csr', className: 'foo' };
|
|
125
|
-
* const updated = injectRecoveryToken(attrs, 'abc123');
|
|
126
|
-
* // Returns: { szRecover: 'csr', className: 'foo', 'data-sz-recovery-token': 'abc123' }
|
|
127
|
-
* ```
|
|
128
|
-
*/
|
|
129
|
-
declare function injectRecoveryToken(attributes: Record<string, unknown>, token: string): Record<string, unknown>;
|
|
130
|
-
|
|
131
|
-
/**
|
|
132
|
-
* Recovery Manifest Generation.
|
|
133
|
-
*
|
|
134
|
-
* This module handles the creation and management of the recovery manifest,
|
|
135
|
-
* which maps recovery tokens to their metadata for runtime verification.
|
|
136
|
-
*/
|
|
137
|
-
|
|
138
|
-
/**
|
|
139
|
-
* Token data stored in the manifest.
|
|
140
|
-
*/
|
|
141
|
-
interface TokenData {
|
|
142
|
-
/**
|
|
143
|
-
* Recovery mode ('csr' or 'dev-only')
|
|
144
|
-
*/
|
|
145
|
-
mode: RecoveryMode;
|
|
146
|
-
/**
|
|
147
|
-
* Component name
|
|
148
|
-
*/
|
|
149
|
-
component: string;
|
|
150
|
-
/**
|
|
151
|
-
* File path (relative to project root)
|
|
152
|
-
*/
|
|
153
|
-
path: string;
|
|
154
|
-
}
|
|
155
|
-
/**
|
|
156
|
-
* Recovery manifest structure.
|
|
157
|
-
*
|
|
158
|
-
* Embedded in the build output as a JSON script tag.
|
|
159
|
-
*/
|
|
160
|
-
interface RecoveryManifest {
|
|
161
|
-
/**
|
|
162
|
-
* Build ID (git hash or timestamp)
|
|
163
|
-
*/
|
|
164
|
-
buildId: string;
|
|
165
|
-
/**
|
|
166
|
-
* SHA-256 checksum of the tokens object
|
|
167
|
-
*/
|
|
168
|
-
checksum: string;
|
|
169
|
-
/**
|
|
170
|
-
* Map of token → token data
|
|
171
|
-
*/
|
|
172
|
-
tokens: Record<string, TokenData>;
|
|
173
|
-
}
|
|
174
|
-
/**
|
|
175
|
-
* Builder class for creating recovery manifests.
|
|
176
|
-
*/
|
|
177
|
-
declare class ManifestBuilder {
|
|
178
|
-
private tokens;
|
|
179
|
-
private buildId;
|
|
180
|
-
/**
|
|
181
|
-
* Creates a new manifest builder.
|
|
182
|
-
*
|
|
183
|
-
* @param {string} buildId - Build ID (git hash or timestamp)
|
|
184
|
-
*
|
|
185
|
-
* @example
|
|
186
|
-
* ```typescript
|
|
187
|
-
* const builder = new ManifestBuilder('abc123');
|
|
188
|
-
* ```
|
|
189
|
-
*/
|
|
190
|
-
constructor(buildId: string);
|
|
191
|
-
/**
|
|
192
|
-
* Adds a token to the manifest.
|
|
193
|
-
*
|
|
194
|
-
* @param {string} token - The recovery token
|
|
195
|
-
* @param {TokenMetadata} metadata - Token metadata
|
|
196
|
-
*
|
|
197
|
-
* @example
|
|
198
|
-
* ```typescript
|
|
199
|
-
* builder.addToken('a94f1c2e8b3d', {
|
|
200
|
-
* mode: 'csr',
|
|
201
|
-
* component: 'Button',
|
|
202
|
-
* filePath: '/app/Button.tsx',
|
|
203
|
-
* line: 10,
|
|
204
|
-
* column: 5,
|
|
205
|
-
* buildId: 'abc123'
|
|
206
|
-
* });
|
|
207
|
-
* ```
|
|
208
|
-
*/
|
|
209
|
-
addToken(token: string, metadata: TokenMetadata): void;
|
|
210
|
-
/**
|
|
211
|
-
* Converts absolute path to relative path.
|
|
212
|
-
*
|
|
213
|
-
* @param {string} absolutePath - Absolute file path
|
|
214
|
-
* @returns {string} Relative path
|
|
215
|
-
*/
|
|
216
|
-
private toRelativePath;
|
|
217
|
-
/**
|
|
218
|
-
* Computes checksum of the tokens object.
|
|
219
|
-
*
|
|
220
|
-
* @param {Record<string, TokenData>} tokens - Tokens object
|
|
221
|
-
* @returns {string} SHA-256 checksum
|
|
222
|
-
*/
|
|
223
|
-
private computeChecksum;
|
|
224
|
-
/**
|
|
225
|
-
* Builds the final recovery manifest.
|
|
226
|
-
*
|
|
227
|
-
* @returns {RecoveryManifest} The complete recovery manifest
|
|
228
|
-
*
|
|
229
|
-
* @example
|
|
230
|
-
* ```typescript
|
|
231
|
-
* const manifest = builder.build();
|
|
232
|
-
* // Returns: { buildId: 'abc123', checksum: '...', tokens: {...} }
|
|
233
|
-
* ```
|
|
234
|
-
*/
|
|
235
|
-
build(): RecoveryManifest;
|
|
236
|
-
/**
|
|
237
|
-
* Gets the number of tokens in the manifest.
|
|
238
|
-
*
|
|
239
|
-
* @returns {number} Token count
|
|
240
|
-
*/
|
|
241
|
-
size(): number;
|
|
242
|
-
/**
|
|
243
|
-
* Checks if a token exists in the manifest.
|
|
244
|
-
*
|
|
245
|
-
* @param {string} token - Token to check
|
|
246
|
-
* @returns {boolean} True if token exists
|
|
247
|
-
*/
|
|
248
|
-
hasToken(token: string): boolean;
|
|
249
|
-
/**
|
|
250
|
-
* Clears all tokens from the manifest.
|
|
251
|
-
*/
|
|
252
|
-
clear(): void;
|
|
253
|
-
}
|
|
254
|
-
/**
|
|
255
|
-
* Serializes a recovery manifest to JSON string.
|
|
256
|
-
*
|
|
257
|
-
* @param {RecoveryManifest} manifest - The manifest to serialize
|
|
258
|
-
* @param {boolean} pretty - Whether to pretty-print the JSON
|
|
259
|
-
* @returns {string} JSON string
|
|
260
|
-
*
|
|
261
|
-
* @example
|
|
262
|
-
* ```typescript
|
|
263
|
-
* const json = serializeManifest(manifest, true);
|
|
264
|
-
* ```
|
|
265
|
-
*/
|
|
266
|
-
declare function serializeManifest(manifest: RecoveryManifest, pretty?: boolean): string;
|
|
267
|
-
/**
|
|
268
|
-
* Parses a recovery manifest from JSON string.
|
|
269
|
-
*
|
|
270
|
-
* @param {string} json - JSON string to parse
|
|
271
|
-
* @returns {RecoveryManifest} Parsed manifest
|
|
272
|
-
*
|
|
273
|
-
* @example
|
|
274
|
-
* ```typescript
|
|
275
|
-
* const manifest = parseManifest(jsonString);
|
|
276
|
-
* ```
|
|
277
|
-
*/
|
|
278
|
-
declare function parseManifest(json: string): RecoveryManifest;
|
|
279
|
-
/**
|
|
280
|
-
* Validates a recovery manifest structure.
|
|
281
|
-
*
|
|
282
|
-
* @param {unknown} manifest - Manifest to validate
|
|
283
|
-
* @returns {{ valid: boolean; error?: string }} Validation result
|
|
284
|
-
*
|
|
285
|
-
* @example
|
|
286
|
-
* ```typescript
|
|
287
|
-
* const result = validateManifest(manifest);
|
|
288
|
-
* if (!result.valid) {
|
|
289
|
-
* console.error(result.error);
|
|
290
|
-
* }
|
|
291
|
-
* ```
|
|
292
|
-
*/
|
|
293
|
-
declare function validateManifest(manifest: unknown): {
|
|
294
|
-
valid: boolean;
|
|
295
|
-
error?: string;
|
|
296
|
-
};
|
|
297
|
-
|
|
298
|
-
/**
|
|
299
|
-
* JSX Transform - Converts sz prop to className string.
|
|
300
|
-
*
|
|
301
|
-
* This module handles the transformation of csszyx object syntax into
|
|
302
|
-
* Tailwind CSS class strings. It processes nested objects for variants
|
|
303
|
-
* like hover, focus, etc.
|
|
304
|
-
*/
|
|
305
|
-
/**
|
|
306
|
-
* Represents a value in the sz object.
|
|
307
|
-
* Can be a string, number, boolean, or nested object for variants.
|
|
308
|
-
*/
|
|
309
|
-
type SzValue = string | number | boolean | SzObject;
|
|
310
|
-
/**
|
|
311
|
-
* Represents the sz object structure.
|
|
312
|
-
* Keys are CSS property abbreviations, values can be primitives or nested objects.
|
|
313
|
-
*/
|
|
314
|
-
interface SzObject {
|
|
315
|
-
[key: string]: SzValue;
|
|
316
|
-
}
|
|
317
|
-
declare const PROPERTY_MAP: Record<string, string>;
|
|
318
|
-
declare const SUGGESTION_MAP: Record<string, string>;
|
|
319
|
-
declare const KNOWN_VARIANTS: Set<string>;
|
|
320
|
-
declare const BOOLEAN_SHORTHANDS: Set<string>;
|
|
321
|
-
/**
|
|
322
|
-
* Represents the result of a transformation.
|
|
323
|
-
*/
|
|
324
|
-
interface TransformResult {
|
|
325
|
-
className: string;
|
|
326
|
-
attributes: Record<string, string>;
|
|
327
|
-
}
|
|
328
|
-
/**
|
|
329
|
-
* Transforms a csszyx sz object into a Tailwind CSS className string and extracted attributes.
|
|
330
|
-
*
|
|
331
|
-
* @param {SzObject} szProp - The sz object from JSX
|
|
332
|
-
* @param {string} prefix - Variant prefix for nested properties
|
|
333
|
-
* @param {Record<string, string>} [mangleMap] - Optional map for property name mangling
|
|
334
|
-
* @returns {TransformResult} The transformation result
|
|
335
|
-
*/
|
|
336
|
-
declare function transform(szProp: SzObject, prefix?: string, mangleMap?: Record<string, string>): TransformResult;
|
|
337
|
-
/**
|
|
338
|
-
* Validates that an sz prop object is valid.
|
|
339
|
-
*
|
|
340
|
-
* @param {unknown} szProp - The value to validate
|
|
341
|
-
* @returns {boolean} True if valid, false otherwise
|
|
342
|
-
*/
|
|
343
|
-
declare function isValidSzProp(szProp: unknown): szProp is SzObject;
|
|
344
|
-
/**
|
|
345
|
-
* Normalizes a className string by removing extra whitespace.
|
|
346
|
-
*
|
|
347
|
-
* @param {string} className - The className string to normalize
|
|
348
|
-
* @returns {string} The normalized className string
|
|
349
|
-
*/
|
|
350
|
-
declare function normalizeClassName(className: string): string;
|
|
351
|
-
|
|
352
|
-
/**
|
|
353
|
-
* Options for {@link transformSourceCode}.
|
|
354
|
-
*/
|
|
355
|
-
interface TransformSourceCodeOptions {
|
|
356
|
-
/**
|
|
357
|
-
* Override the AST node budget. Files larger than this throw
|
|
358
|
-
* {@link ASTBudgetExceededError}. Defaults to {@link AST_BUDGET} (50 000).
|
|
359
|
-
* Useful for repos with legitimately large generated files (json-as-ts
|
|
360
|
-
* fixtures, GraphQL schema snapshots) that exceed the default cap but
|
|
361
|
-
* are still safe to transform.
|
|
362
|
-
*/
|
|
363
|
-
astBudget?: number;
|
|
364
|
-
}
|
|
365
|
-
/**
|
|
366
|
-
* Transforms all sz props in a source code string into Tailwind classNames.
|
|
367
|
-
*
|
|
368
|
-
* @param {string} source - The source code to transform
|
|
369
|
-
* @param {string} [filename] - Source filename, used in error messages and
|
|
370
|
-
* passed to Babel as the parser filename. Defaults to a placeholder.
|
|
371
|
-
* @param {TransformSourceCodeOptions} [options] - Optional overrides
|
|
372
|
-
* (currently: `astBudget` to raise/lower the per-file node cap).
|
|
373
|
-
* @returns {object} Transformation result with code and metadata
|
|
374
|
-
* @throws {ASTBudgetExceededError} when the file's AST exceeds the
|
|
375
|
-
* effective budget (`options.astBudget` or {@link AST_BUDGET}).
|
|
376
|
-
*/
|
|
377
|
-
declare function transformSourceCode(source: string, filename?: string, options?: TransformSourceCodeOptions): {
|
|
378
|
-
code: string;
|
|
379
|
-
transformed: boolean;
|
|
380
|
-
usesRuntime: boolean;
|
|
381
|
-
usesMerge: boolean;
|
|
382
|
-
usesColorVar: boolean;
|
|
383
|
-
classes: Set<string>;
|
|
384
|
-
rawClassNames: Set<string>;
|
|
385
|
-
diagnostics: string[];
|
|
386
|
-
recoveryTokens: Map<string, TokenData>;
|
|
387
|
-
};
|
|
388
|
-
|
|
389
|
-
/**
|
|
390
|
-
* Core Compiler class for csszyx.
|
|
391
|
-
*
|
|
392
|
-
* This class manages the WASM lifecycle and provides high-performance
|
|
393
|
-
* transformation methods. It falls back to JavaScript if WASM is not available.
|
|
394
|
-
*/
|
|
395
|
-
declare class CsszyxCompiler {
|
|
396
|
-
private static instance;
|
|
397
|
-
private wasmLoaded;
|
|
398
|
-
/**
|
|
399
|
-
* Private constructor to enforce singleton pattern.
|
|
400
|
-
*/
|
|
401
|
-
private constructor();
|
|
402
|
-
/**
|
|
403
|
-
* Gets the singleton instance of the compiler.
|
|
404
|
-
*
|
|
405
|
-
* @returns {CsszyxCompiler} The compiler instance.
|
|
406
|
-
*/
|
|
407
|
-
static getInstance(): CsszyxCompiler;
|
|
408
|
-
/**
|
|
409
|
-
* Initializes the WASM core.
|
|
410
|
-
*
|
|
411
|
-
* @returns {Promise<void>} Resolves when WASM is ready.
|
|
412
|
-
*/
|
|
413
|
-
init(): Promise<void>;
|
|
414
|
-
/**
|
|
415
|
-
* Transforms an sz object into Tailwind classes.
|
|
416
|
-
*
|
|
417
|
-
* @param {SzObject} sz - The object to transform.
|
|
418
|
-
* @returns {string} The transformed class string.
|
|
419
|
-
*/
|
|
420
|
-
transform(sz: SzObject): string;
|
|
421
|
-
/**
|
|
422
|
-
* Checks if the WASM core is currently active.
|
|
423
|
-
*
|
|
424
|
-
* @returns {boolean} True if WASM is loaded.
|
|
425
|
-
*/
|
|
426
|
-
isWasmActive(): boolean;
|
|
427
|
-
/**
|
|
428
|
-
* Generates a recovery token using WASM or JS fallback.
|
|
429
|
-
*
|
|
430
|
-
* @param {object} metadata - Token metadata
|
|
431
|
-
* @param metadata.component - Component name
|
|
432
|
-
* @param metadata.filePath - File path source
|
|
433
|
-
* @param metadata.line - Line number
|
|
434
|
-
* @param metadata.column - Column number
|
|
435
|
-
* @param metadata.mode - Build mode (dev/prod)
|
|
436
|
-
* @param metadata.buildId - Unique build identifier
|
|
437
|
-
* @returns {string} The generated token
|
|
438
|
-
*/
|
|
439
|
-
generateRecoveryToken(metadata: {
|
|
440
|
-
component: string;
|
|
441
|
-
filePath: string;
|
|
442
|
-
line: number;
|
|
443
|
-
column: number;
|
|
444
|
-
mode: 'csr' | 'dev-only';
|
|
445
|
-
buildId: string;
|
|
446
|
-
}): string;
|
|
447
|
-
}
|
|
448
|
-
|
|
449
|
-
/**
|
|
450
|
-
* Property Type System for CSS Variable Auto-Compile.
|
|
451
|
-
*
|
|
452
|
-
* Maps every sz property to its CSS variable value generation strategy,
|
|
453
|
-
* determining how dynamic values should be converted to inline style values.
|
|
454
|
-
*
|
|
455
|
-
* @module @csszyx/compiler/property-types
|
|
456
|
-
*/
|
|
457
|
-
/**
|
|
458
|
-
* Property categories for CSS variable value generation.
|
|
459
|
-
* Each category determines how a dynamic runtime value is transformed
|
|
460
|
-
* into a CSS custom property value.
|
|
461
|
-
*/
|
|
462
|
-
declare enum PropertyCategory {
|
|
463
|
-
/** Spacing props (p, m, gap, inset, top, etc.) → calc(N * var(--spacing)) */
|
|
464
|
-
SPACING = 0,
|
|
465
|
-
/** Color props (bg, color, borderColor, etc.) → __szColorVar(value) */
|
|
466
|
-
COLOR = 1,
|
|
467
|
-
/** Fraction props (w, h when value like '1/2') → percentage */
|
|
468
|
-
FRACTION = 2,
|
|
469
|
-
/** Unitless number props (z, order, columns, opacity) → direct number */
|
|
470
|
-
UNITLESS = 3,
|
|
471
|
-
/** Angle props (rotate, skew) → Ndeg */
|
|
472
|
-
ANGLE = 4,
|
|
473
|
-
/** Duration props (duration, delay) → Nms */
|
|
474
|
-
DURATION = 5,
|
|
475
|
-
/** Already has [] brackets → pass-through */
|
|
476
|
-
ARBITRARY = 6,
|
|
477
|
-
/** Unknown → direct pass-through */
|
|
478
|
-
PASSTHROUGH = 7
|
|
479
|
-
}
|
|
480
|
-
/**
|
|
481
|
-
* Maps sz property names to their PropertyCategory.
|
|
482
|
-
* Covers all ~200 properties from PROPERTY_MAP in transform.ts.
|
|
483
|
-
*/
|
|
484
|
-
declare const PROPERTY_CATEGORY_MAP: Record<string, PropertyCategory>;
|
|
485
|
-
/**
|
|
486
|
-
* Returns the PropertyCategory for a given sz property name.
|
|
487
|
-
* Falls back to PASSTHROUGH for unknown properties.
|
|
488
|
-
* @param property - the sz property name to look up
|
|
489
|
-
* @returns the PropertyCategory for the property, or PASSTHROUGH if unknown
|
|
490
|
-
*/
|
|
491
|
-
declare function getPropertyCategory(property: string): PropertyCategory;
|
|
492
|
-
/**
|
|
493
|
-
* Set of all properties that are color-type.
|
|
494
|
-
* Used for quick lookup to determine if __szColorVar import is needed.
|
|
495
|
-
*/
|
|
496
|
-
declare const COLOR_PROPERTIES: Set<string>;
|
|
497
|
-
/**
|
|
498
|
-
* Generates the CSS variable naming convention for a property.
|
|
499
|
-
* @param property - the sz property name
|
|
500
|
-
* @param variantPrefix - variant chain (e.g., 'hover', 'md')
|
|
501
|
-
* @returns CSS variable name like '--_sz-p' or '--_sz-hover-bg'
|
|
502
|
-
*/
|
|
503
|
-
declare function getCSSVariableName(property: string, variantPrefix?: string): string;
|
|
504
|
-
|
|
505
|
-
/**
|
|
506
|
-
* CSS Variable Hoisting — deduplicates identical CSS variables across sibling elements.
|
|
507
|
-
*
|
|
508
|
-
* When multiple JSX elements in the same component share the same CSS variable
|
|
509
|
-
* name and value, the variable is hoisted to the nearest common ancestor JSX element.
|
|
510
|
-
*
|
|
511
|
-
* Hoisting rule: ALWAYS safe within the same Babel transform scope.
|
|
512
|
-
* Inner inline styles override inherited CSS variable values due to CSS cascade.
|
|
513
|
-
*
|
|
514
|
-
* @module @csszyx/compiler/hoisting
|
|
515
|
-
*/
|
|
516
|
-
|
|
517
|
-
/**
|
|
518
|
-
* Tracks a CSS variable usage on a specific JSX element.
|
|
519
|
-
*/
|
|
520
|
-
interface CSSVarUsage {
|
|
521
|
-
/** The JSX element AST node */
|
|
522
|
-
element: t.JSXOpeningElement;
|
|
523
|
-
/** CSS variable name, e.g., --_sz-p */
|
|
524
|
-
varName: string;
|
|
525
|
-
/** The style value AST expression */
|
|
526
|
-
valueExpr: t.Expression;
|
|
527
|
-
/** Serialized value for comparison (null if dynamic/non-comparable) */
|
|
528
|
-
serializedValue: string | null;
|
|
529
|
-
}
|
|
530
|
-
/**
|
|
531
|
-
* Hoists CSS variables to common ancestor elements when multiple siblings
|
|
532
|
-
* share the same variable name and value.
|
|
533
|
-
*
|
|
534
|
-
* @param usages - All CSS variable usages collected during transform
|
|
535
|
-
* @param parentMap - Map of child-to-parent relationships in the AST
|
|
536
|
-
*/
|
|
537
|
-
declare function hoistCSSVariables(usages: CSSVarUsage[], parentMap: Map<t.Node, t.Node>): void;
|
|
538
|
-
/**
|
|
539
|
-
* Builds a parent map for AST nodes (child-to-parent relationship).
|
|
540
|
-
* Used by hoistCSSVariables to find LCA.
|
|
541
|
-
*
|
|
542
|
-
* @param ast - The root AST node to traverse
|
|
543
|
-
* @returns A map of child-to-parent node relationships
|
|
544
|
-
*/
|
|
545
|
-
declare function buildParentMap(ast: t.Node): Map<t.Node, t.Node>;
|
|
546
|
-
|
|
547
|
-
/**
|
|
548
|
-
* @csszyx/compiler - TypeScript type definitions for sz prop.
|
|
549
|
-
*
|
|
550
|
-
* This module provides comprehensive type definitions for the sz prop
|
|
551
|
-
* to enable IntelliSense, autocompletion, and type safety.
|
|
552
|
-
*
|
|
553
|
-
* @module @csszyx/compiler/types
|
|
554
|
-
*/
|
|
555
|
-
|
|
556
|
-
/**
|
|
557
|
-
* Augmentable interface for user-defined Tailwind v4 design tokens.
|
|
558
|
-
*
|
|
559
|
-
* Users (or the theme-scanner plugin) extend this via module augmentation so
|
|
560
|
-
* that custom tokens appear in sz prop IntelliSense without requiring
|
|
561
|
-
* changes to the core types.
|
|
562
|
-
*
|
|
563
|
-
* @example
|
|
564
|
-
* // In .csszyx/theme.d.ts (auto-generated by @csszyx/unplugin scanCss option):
|
|
565
|
-
* declare module '@csszyx/compiler' {
|
|
566
|
-
* interface CustomTheme {
|
|
567
|
-
* colors: 'brand' | 'brand-dark';
|
|
568
|
-
* spacings: 'xl' | '2xs';
|
|
569
|
-
* }
|
|
570
|
-
* }
|
|
571
|
-
*/
|
|
572
|
-
interface CustomTheme {
|
|
573
|
-
}
|
|
574
|
-
/** Extracts custom color tokens from CustomTheme, or never if not defined. */
|
|
575
|
-
type CT_Colors = CustomTheme extends {
|
|
576
|
-
colors: infer T;
|
|
577
|
-
} ? T : never;
|
|
578
|
-
/** Extracts custom spacing tokens from CustomTheme, or never if not defined. */
|
|
579
|
-
type CT_Spacings = CustomTheme extends {
|
|
580
|
-
spacings: infer T;
|
|
581
|
-
} ? T : never;
|
|
582
|
-
/** Extracts custom font tokens from CustomTheme, or never if not defined. */
|
|
583
|
-
type CT_Fonts = CustomTheme extends {
|
|
584
|
-
fonts: infer T;
|
|
585
|
-
} ? T : never;
|
|
586
|
-
/** Extracts custom border-radius tokens from CustomTheme, or never if not defined. */
|
|
587
|
-
type CT_Radii = CustomTheme extends {
|
|
588
|
-
radii: infer T;
|
|
589
|
-
} ? T : never;
|
|
590
|
-
/** Extracts custom shadow tokens from CustomTheme, or never if not defined. */
|
|
591
|
-
type CT_Shadows = CustomTheme extends {
|
|
592
|
-
shadows: infer T;
|
|
593
|
-
} ? T : never;
|
|
594
|
-
/**
|
|
595
|
-
* Tailwind v4 spacing scale.
|
|
596
|
-
*
|
|
597
|
-
* Common preset values are listed for IDE autocomplete. Any number is valid —
|
|
598
|
-
* Tailwind v4's dynamic spacing system resolves n to `calc(var(--spacing) * n)`
|
|
599
|
-
* (e.g. w-13, w-92, p-1.5, p-2.5 are all valid).
|
|
600
|
-
*/
|
|
601
|
-
type SpacingScale = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | (number & {});
|
|
602
|
-
/** Spacing value that can be scale, keyword, arbitrary, or custom token */
|
|
603
|
-
type SpacingValue = SpacingScale | 'px' | 'auto' | CT_Spacings | (number & {}) | (string & {});
|
|
604
|
-
/** Negative spacing value */
|
|
605
|
-
type NegativeSpacingValue = SpacingValue | number;
|
|
606
|
-
/** Tailwind color names */
|
|
607
|
-
type ColorName = 'inherit' | 'current' | 'transparent' | 'black' | 'white' | 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'mauve' | 'olive' | 'mist' | 'taupe';
|
|
608
|
-
/** Tailwind color shades */
|
|
609
|
-
type ColorShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
|
|
610
|
-
/** Color value (string-based) */
|
|
611
|
-
type ColorValue = 'inherit' | 'current' | 'transparent' | 'black' | 'white' | `${ColorName}-${ColorShade}` | CT_Colors | (string & {});
|
|
612
|
-
/** Color object with opacity */
|
|
613
|
-
interface ColorObjectValue {
|
|
614
|
-
color: ColorValue;
|
|
615
|
-
op?: number | (string & {});
|
|
616
|
-
}
|
|
617
|
-
/** Union type for all color properties */
|
|
618
|
-
type ColorPropValue = ColorValue | ColorObjectValue;
|
|
619
|
-
/** Container size names */
|
|
620
|
-
type ContainerSize = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl';
|
|
621
|
-
/**
|
|
622
|
-
* Fraction values for sizing/layout props.
|
|
623
|
-
*
|
|
624
|
-
* Common fractions are listed for IDE autocomplete. Any `n/m` string is valid —
|
|
625
|
-
* Tailwind v4 accepts arbitrary numerator/denominator (e.g. '3/7', '5/9', '11/16').
|
|
626
|
-
*/
|
|
627
|
-
type FractionValue = '1/2' | '1/3' | '2/3' | '1/4' | '2/4' | '3/4' | '1/5' | '2/5' | '3/5' | '4/5' | '1/6' | '2/6' | '3/6' | '4/6' | '5/6' | '1/12' | '2/12' | '3/12' | '4/12' | '5/12' | '6/12' | '7/12' | '8/12' | '9/12' | '10/12' | '11/12' | (string & {});
|
|
628
|
-
/** Border radius keywords */
|
|
629
|
-
type BorderRadiusValue = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' | CT_Radii | true | (string & {});
|
|
630
|
-
/** Shadow keywords */
|
|
631
|
-
type ShadowValue = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'inner' | 'none' | CT_Shadows | true | (string & {});
|
|
632
|
-
/**
|
|
633
|
-
*
|
|
634
|
-
*/
|
|
635
|
-
interface LayoutProps {
|
|
636
|
-
/** @see https://tailwindcss.com/docs/aspect-ratio */
|
|
637
|
-
aspect?: 'auto' | 'square' | 'video' | (string & {});
|
|
638
|
-
/** @see https://tailwindcss.com/docs/columns */
|
|
639
|
-
columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto' | ContainerSize | (string & {});
|
|
640
|
-
/** @see https://tailwindcss.com/docs/break-after */
|
|
641
|
-
breakAfter?: 'auto' | 'avoid' | 'all' | 'avoid-page' | 'page' | 'left' | 'right' | 'column';
|
|
642
|
-
/** @see https://tailwindcss.com/docs/break-before */
|
|
643
|
-
breakBefore?: 'auto' | 'avoid' | 'all' | 'avoid-page' | 'page' | 'left' | 'right' | 'column';
|
|
644
|
-
/** @see https://tailwindcss.com/docs/break-inside */
|
|
645
|
-
breakInside?: 'auto' | 'avoid' | 'avoid-page' | 'avoid-column';
|
|
646
|
-
/** @see https://tailwindcss.com/docs/box-decoration-break */
|
|
647
|
-
boxDecoration?: 'slice' | 'clone';
|
|
648
|
-
/** @see https://tailwindcss.com/docs/box-sizing */
|
|
649
|
-
box?: 'border' | 'content';
|
|
650
|
-
/** @see https://tailwindcss.com/docs/display */
|
|
651
|
-
display?: 'block' | 'inline-block' | 'inline' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'contents' | 'table' | 'inline-table' | 'table-caption' | 'table-cell' | 'table-column' | 'table-column-group' | 'table-footer-group' | 'table-header-group' | 'table-row-group' | 'table-row' | 'flow-root' | 'list-item' | 'none';
|
|
652
|
-
/** Boolean sugar for display: block */
|
|
653
|
-
block?: boolean;
|
|
654
|
-
/** Boolean sugar for display: inline-block */
|
|
655
|
-
inlineBlock?: boolean;
|
|
656
|
-
/** Boolean sugar for display: inline */
|
|
657
|
-
inline?: boolean;
|
|
658
|
-
/** Boolean sugar for display: flex */
|
|
659
|
-
flex?: boolean | 'auto' | 'initial' | 'none' | 1 | (string & {});
|
|
660
|
-
/** Boolean sugar for display: inline-flex */
|
|
661
|
-
inlineFlex?: boolean;
|
|
662
|
-
/** Boolean sugar for display: grid */
|
|
663
|
-
grid?: boolean;
|
|
664
|
-
/** Boolean sugar for display: inline-grid */
|
|
665
|
-
inlineGrid?: boolean;
|
|
666
|
-
/** Boolean sugar for display: table */
|
|
667
|
-
table?: boolean;
|
|
668
|
-
/** Boolean sugar for display: table-row */
|
|
669
|
-
tableRow?: boolean;
|
|
670
|
-
/** Boolean sugar for display: table-cell */
|
|
671
|
-
tableCell?: boolean;
|
|
672
|
-
/** Boolean sugar for display: flow-root */
|
|
673
|
-
flowRoot?: boolean;
|
|
674
|
-
/** Boolean sugar for display: list-item */
|
|
675
|
-
listItem?: boolean;
|
|
676
|
-
/** Boolean sugar for display: contents */
|
|
677
|
-
contents?: boolean;
|
|
678
|
-
/** Boolean sugar for display: hidden/none */
|
|
679
|
-
hidden?: boolean;
|
|
680
|
-
/** Boolean sugar for sr-only */
|
|
681
|
-
srOnly?: boolean;
|
|
682
|
-
/** Boolean sugar for not-sr-only */
|
|
683
|
-
notSrOnly?: boolean;
|
|
684
|
-
/** Boolean sugar for container */
|
|
685
|
-
container?: boolean;
|
|
686
|
-
/** Boolean sugar for prose */
|
|
687
|
-
prose?: boolean;
|
|
688
|
-
/** Boolean sugar for prose-invert (requires @tailwindcss/typography plugin) */
|
|
689
|
-
proseInvert?: boolean;
|
|
690
|
-
/** @see https://tailwindcss.com/docs/float */
|
|
691
|
-
float?: 'right' | 'left' | 'start' | 'end' | 'none';
|
|
692
|
-
/** @see https://tailwindcss.com/docs/clear */
|
|
693
|
-
clear?: 'left' | 'right' | 'both' | 'none' | 'start' | 'end';
|
|
694
|
-
/** @see https://tailwindcss.com/docs/isolation */
|
|
695
|
-
isolation?: 'isolate' | 'auto';
|
|
696
|
-
isolate?: boolean;
|
|
697
|
-
/** @see https://tailwindcss.com/docs/object-fit */
|
|
698
|
-
objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
|
|
699
|
-
/** @see https://tailwindcss.com/docs/object-position */
|
|
700
|
-
objectPos?: 'bottom' | 'center' | 'left' | 'left-bottom' | 'left-top' | 'right' | 'right-bottom' | 'right-top' | 'top' | (string & {});
|
|
701
|
-
/** @see https://tailwindcss.com/docs/overflow */
|
|
702
|
-
overflow?: 'auto' | 'hidden' | 'clip' | 'visible' | 'scroll';
|
|
703
|
-
overflowX?: 'auto' | 'hidden' | 'clip' | 'visible' | 'scroll';
|
|
704
|
-
overflowY?: 'auto' | 'hidden' | 'clip' | 'visible' | 'scroll';
|
|
705
|
-
/** @see https://tailwindcss.com/docs/overscroll-behavior */
|
|
706
|
-
overscroll?: 'auto' | 'contain' | 'none';
|
|
707
|
-
overscrollX?: 'auto' | 'contain' | 'none';
|
|
708
|
-
overscrollY?: 'auto' | 'contain' | 'none';
|
|
709
|
-
/** @see https://tailwindcss.com/docs/position */
|
|
710
|
-
position?: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky';
|
|
711
|
-
static?: boolean;
|
|
712
|
-
fixed?: boolean;
|
|
713
|
-
absolute?: boolean;
|
|
714
|
-
relative?: boolean;
|
|
715
|
-
sticky?: boolean;
|
|
716
|
-
/** @see https://tailwindcss.com/docs/top-right-bottom-left */
|
|
717
|
-
inset?: SpacingValue;
|
|
718
|
-
insetX?: SpacingValue;
|
|
719
|
-
insetY?: SpacingValue;
|
|
720
|
-
top?: NegativeSpacingValue;
|
|
721
|
-
right?: NegativeSpacingValue;
|
|
722
|
-
bottom?: NegativeSpacingValue;
|
|
723
|
-
left?: NegativeSpacingValue;
|
|
724
|
-
start?: SpacingValue;
|
|
725
|
-
end?: SpacingValue;
|
|
726
|
-
/** inset-inline-start (camelCase alias for start, emits inset-s-*) */
|
|
727
|
-
insetS?: SpacingValue;
|
|
728
|
-
/** inset-inline-end (camelCase alias for end, emits inset-e-*) */
|
|
729
|
-
insetE?: SpacingValue;
|
|
730
|
-
/** inset-block-start */
|
|
731
|
-
insetBs?: SpacingValue;
|
|
732
|
-
/** inset-block-end */
|
|
733
|
-
insetBe?: SpacingValue;
|
|
734
|
-
/** @see https://tailwindcss.com/docs/visibility */
|
|
735
|
-
visibility?: 'visible' | 'hidden' | 'collapse';
|
|
736
|
-
visible?: boolean;
|
|
737
|
-
invisible?: boolean;
|
|
738
|
-
collapse?: boolean;
|
|
739
|
-
/** @see https://tailwindcss.com/docs/z-index */
|
|
740
|
-
z?: 'auto' | 0 | 10 | 20 | 30 | 40 | 50 | number | (string & {});
|
|
741
|
-
}
|
|
742
|
-
/**
|
|
743
|
-
*
|
|
744
|
-
*/
|
|
745
|
-
interface FlexboxGridProps {
|
|
746
|
-
/** @see https://tailwindcss.com/docs/flex-basis */
|
|
747
|
-
basis?: SpacingScale | 'px' | 'auto' | 'full' | FractionValue | ContainerSize | (string & {});
|
|
748
|
-
/** @see https://tailwindcss.com/docs/flex-direction */
|
|
749
|
-
flexDir?: 'row' | 'row-reverse' | 'col' | 'col-reverse';
|
|
750
|
-
/** @see https://tailwindcss.com/docs/flex-wrap */
|
|
751
|
-
flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
|
|
752
|
-
/** @see https://tailwindcss.com/docs/flex-grow */
|
|
753
|
-
grow?: boolean | 0 | number | (string & {});
|
|
754
|
-
/** @see https://tailwindcss.com/docs/flex-shrink */
|
|
755
|
-
shrink?: boolean | 0 | number | (string & {});
|
|
756
|
-
/** @see https://tailwindcss.com/docs/order */
|
|
757
|
-
order?: 'first' | 'last' | 'none' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | number | (string & {});
|
|
758
|
-
/** @see https://tailwindcss.com/docs/grid-template-columns */
|
|
759
|
-
gridCols?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none' | 'subgrid' | (string & {});
|
|
760
|
-
/** @see https://tailwindcss.com/docs/grid-template-rows */
|
|
761
|
-
gridRows?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none' | 'subgrid' | (string & {});
|
|
762
|
-
/** @see https://tailwindcss.com/docs/grid-column */
|
|
763
|
-
col?: 'auto' | number | (string & {});
|
|
764
|
-
colSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'full' | number | (string & {});
|
|
765
|
-
colStart?: 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | number | (string & {});
|
|
766
|
-
colEnd?: 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | number | (string & {});
|
|
767
|
-
/** @see https://tailwindcss.com/docs/grid-row */
|
|
768
|
-
row?: 'auto' | number | (string & {});
|
|
769
|
-
rowSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'full' | number | (string & {});
|
|
770
|
-
rowStart?: 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | number | (string & {});
|
|
771
|
-
rowEnd?: 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | number | (string & {});
|
|
772
|
-
/** @see https://tailwindcss.com/docs/grid-auto-flow */
|
|
773
|
-
gridFlow?: 'row' | 'col' | 'dense' | 'row-dense' | 'col-dense';
|
|
774
|
-
/** @see https://tailwindcss.com/docs/grid-auto-columns */
|
|
775
|
-
autoCols?: 'auto' | 'min' | 'max' | 'fr' | (string & {});
|
|
776
|
-
/** @see https://tailwindcss.com/docs/grid-auto-rows */
|
|
777
|
-
autoRows?: 'auto' | 'min' | 'max' | 'fr' | (string & {});
|
|
778
|
-
/** @see https://tailwindcss.com/docs/gap */
|
|
779
|
-
gap?: SpacingValue;
|
|
780
|
-
gapX?: SpacingValue;
|
|
781
|
-
gapY?: SpacingValue;
|
|
782
|
-
/** @see https://tailwindcss.com/docs/justify-content */
|
|
783
|
-
justify?: 'normal' | 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch' | 'baseline' | 'safe-center' | 'safe-end';
|
|
784
|
-
/** @see https://tailwindcss.com/docs/justify-items */
|
|
785
|
-
justifyItems?: 'start' | 'end' | 'center' | 'stretch' | 'normal' | 'safe-center' | 'safe-end';
|
|
786
|
-
/** @see https://tailwindcss.com/docs/justify-self */
|
|
787
|
-
justifySelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch' | 'safe-center' | 'safe-end';
|
|
788
|
-
/** @see https://tailwindcss.com/docs/align-content */
|
|
789
|
-
alignContent?: 'normal' | 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'baseline' | 'stretch';
|
|
790
|
-
/** @see https://tailwindcss.com/docs/align-items */
|
|
791
|
-
items?: 'start' | 'end' | 'center' | 'baseline' | 'stretch' | 'safe-center' | 'safe-end' | (string & {});
|
|
792
|
-
/** @see https://tailwindcss.com/docs/align-self */
|
|
793
|
-
self?: 'auto' | 'start' | 'end' | 'center' | 'stretch' | 'baseline' | 'safe-center' | 'safe-end' | (string & {});
|
|
794
|
-
/** @see https://tailwindcss.com/docs/place-content */
|
|
795
|
-
placeContent?: 'center' | 'start' | 'end' | 'between' | 'around' | 'evenly' | 'baseline' | 'stretch' | 'safe-center' | 'safe-end';
|
|
796
|
-
/** @see https://tailwindcss.com/docs/place-items */
|
|
797
|
-
placeItems?: 'start' | 'end' | 'center' | 'baseline' | 'stretch' | 'safe-center' | 'safe-end';
|
|
798
|
-
/** @see https://tailwindcss.com/docs/place-self */
|
|
799
|
-
placeSelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch' | 'safe-center' | 'safe-end';
|
|
800
|
-
}
|
|
801
|
-
/**
|
|
802
|
-
*
|
|
803
|
-
*/
|
|
804
|
-
interface SpacingProps {
|
|
805
|
-
/** Padding - all sides */
|
|
806
|
-
p?: SpacingValue;
|
|
807
|
-
/** Padding - X axis (left/right) */
|
|
808
|
-
px?: SpacingValue;
|
|
809
|
-
/** Padding - Y axis (top/bottom) */
|
|
810
|
-
py?: SpacingValue;
|
|
811
|
-
/** Padding - top */
|
|
812
|
-
pt?: SpacingValue;
|
|
813
|
-
/** Padding - right */
|
|
814
|
-
pr?: SpacingValue;
|
|
815
|
-
/** Padding - bottom */
|
|
816
|
-
pb?: SpacingValue;
|
|
817
|
-
/** Padding - left */
|
|
818
|
-
pl?: SpacingValue;
|
|
819
|
-
/** Padding - inline start (logical) */
|
|
820
|
-
ps?: SpacingValue;
|
|
821
|
-
/** Padding - inline end (logical) */
|
|
822
|
-
pe?: SpacingValue;
|
|
823
|
-
/** Padding - block-start (logical) */
|
|
824
|
-
pbs?: SpacingValue;
|
|
825
|
-
/** Padding - block-end (logical) */
|
|
826
|
-
pbe?: SpacingValue;
|
|
827
|
-
/** Margin - all sides */
|
|
828
|
-
m?: NegativeSpacingValue;
|
|
829
|
-
/** Margin - X axis (left/right) */
|
|
830
|
-
mx?: NegativeSpacingValue;
|
|
831
|
-
/** Margin - Y axis (top/bottom) */
|
|
832
|
-
my?: NegativeSpacingValue;
|
|
833
|
-
/** Margin - top */
|
|
834
|
-
mt?: NegativeSpacingValue;
|
|
835
|
-
/** Margin - right */
|
|
836
|
-
mr?: NegativeSpacingValue;
|
|
837
|
-
/** Margin - bottom */
|
|
838
|
-
mb?: NegativeSpacingValue;
|
|
839
|
-
/** Margin - left */
|
|
840
|
-
ml?: NegativeSpacingValue;
|
|
841
|
-
/** Margin - inline start (logical) */
|
|
842
|
-
ms?: NegativeSpacingValue;
|
|
843
|
-
/** Margin - inline end (logical) */
|
|
844
|
-
me?: NegativeSpacingValue;
|
|
845
|
-
/** Margin - block-start (logical) */
|
|
846
|
-
mbs?: NegativeSpacingValue;
|
|
847
|
-
/** Margin - block-end (logical) */
|
|
848
|
-
mbe?: NegativeSpacingValue;
|
|
849
|
-
/** Space between child elements - X axis */
|
|
850
|
-
spaceX?: NegativeSpacingValue;
|
|
851
|
-
/** Space between child elements - Y axis */
|
|
852
|
-
spaceY?: NegativeSpacingValue;
|
|
853
|
-
/** Reverse space-x direction */
|
|
854
|
-
spaceXReverse?: boolean;
|
|
855
|
-
/** Reverse space-y direction */
|
|
856
|
-
spaceYReverse?: boolean;
|
|
857
|
-
}
|
|
858
|
-
/**
|
|
859
|
-
*
|
|
860
|
-
*/
|
|
861
|
-
interface SizingProps {
|
|
862
|
-
/** @see https://tailwindcss.com/docs/width */
|
|
863
|
-
w?: SpacingScale | 'px' | 'auto' | 'full' | 'screen' | 'svw' | 'lvw' | 'dvw' | 'min' | 'max' | 'fit' | FractionValue | (string & {});
|
|
864
|
-
/** @see https://tailwindcss.com/docs/min-width */
|
|
865
|
-
minW?: SpacingScale | 'px' | 'full' | 'min' | 'max' | 'fit' | FractionValue | (string & {});
|
|
866
|
-
/** @see https://tailwindcss.com/docs/max-width */
|
|
867
|
-
maxW?: SpacingScale | 'px' | 'full' | 'none' | 'prose' | 'min' | 'max' | 'fit' | ContainerSize | 'screen-sm' | 'screen-md' | 'screen-lg' | 'screen-xl' | 'screen-2xl' | FractionValue | (string & {});
|
|
868
|
-
/** @see https://tailwindcss.com/docs/height */
|
|
869
|
-
h?: SpacingScale | 'px' | 'auto' | 'full' | 'screen' | 'svh' | 'lvh' | 'dvh' | 'min' | 'max' | 'fit' | FractionValue | (string & {});
|
|
870
|
-
/** @see https://tailwindcss.com/docs/min-height */
|
|
871
|
-
minH?: SpacingScale | 'px' | 'full' | 'screen' | 'svh' | 'lvh' | 'dvh' | 'min' | 'max' | 'fit' | (string & {});
|
|
872
|
-
/** @see https://tailwindcss.com/docs/max-height */
|
|
873
|
-
maxH?: SpacingScale | 'px' | 'full' | 'screen' | 'svh' | 'lvh' | 'dvh' | 'min' | 'max' | 'fit' | (string & {});
|
|
874
|
-
/** @see https://tailwindcss.com/docs/size */
|
|
875
|
-
size?: SpacingScale | 'px' | 'auto' | 'full' | 'min' | 'max' | 'fit' | (string & {});
|
|
876
|
-
/** @see https://tailwindcss.com/docs/block-size — block-size (logical height) */
|
|
877
|
-
blockSize?: SpacingScale | 'px' | 'auto' | 'full' | 'screen' | 'svh' | 'lvh' | 'dvh' | 'min' | 'max' | 'fit' | FractionValue | (string & {});
|
|
878
|
-
/** @see https://tailwindcss.com/docs/min-block-size */
|
|
879
|
-
minBlockSize?: SpacingScale | 'px' | 'full' | 'screen' | 'svh' | 'lvh' | 'dvh' | 'min' | 'max' | 'fit' | (string & {});
|
|
880
|
-
/** @see https://tailwindcss.com/docs/max-block-size */
|
|
881
|
-
maxBlockSize?: SpacingScale | 'px' | 'full' | 'screen' | 'svh' | 'lvh' | 'dvh' | 'min' | 'max' | 'fit' | (string & {});
|
|
882
|
-
/** @see https://tailwindcss.com/docs/inline-size — inline-size (logical width) */
|
|
883
|
-
inlineSize?: SpacingScale | 'px' | 'auto' | 'full' | 'screen' | 'svw' | 'lvw' | 'dvw' | 'min' | 'max' | 'fit' | FractionValue | (string & {});
|
|
884
|
-
/** @see https://tailwindcss.com/docs/min-inline-size */
|
|
885
|
-
minInlineSize?: SpacingScale | 'px' | 'full' | 'min' | 'max' | 'fit' | FractionValue | (string & {});
|
|
886
|
-
/** @see https://tailwindcss.com/docs/max-inline-size */
|
|
887
|
-
maxInlineSize?: SpacingScale | 'px' | 'full' | 'none' | 'prose' | 'min' | 'max' | 'fit' | ContainerSize | FractionValue | (string & {});
|
|
888
|
-
}
|
|
889
|
-
/**
|
|
890
|
-
*
|
|
891
|
-
*/
|
|
892
|
-
interface TypographyProps {
|
|
893
|
-
/** @see https://tailwindcss.com/docs/font-size — use `color` for text color, `textAlign` for alignment */
|
|
894
|
-
text?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl' | (string & {});
|
|
895
|
-
/** @see https://tailwindcss.com/docs/font-smoothing */
|
|
896
|
-
antialiased?: boolean;
|
|
897
|
-
subpixelAntialiased?: boolean;
|
|
898
|
-
/** @see https://tailwindcss.com/docs/font-style */
|
|
899
|
-
italic?: boolean;
|
|
900
|
-
notItalic?: boolean;
|
|
901
|
-
/** @see https://tailwindcss.com/docs/font-weight */
|
|
902
|
-
fontWeight?: 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | (string & {});
|
|
903
|
-
/** Explicit font-family key. Use `font` for the short form */
|
|
904
|
-
fontFamily?: 'sans' | 'serif' | 'mono' | CT_Fonts | (string & {});
|
|
905
|
-
/** @see https://tailwindcss.com/docs/font-stretch */
|
|
906
|
-
fontStretch?: 'ultra-condensed' | 'extra-condensed' | 'condensed' | 'semi-condensed' | 'normal' | 'semi-expanded' | 'expanded' | 'extra-expanded' | 'ultra-expanded' | (string & {});
|
|
907
|
-
/** @see https://tailwindcss.com/docs/font-variant-numeric */
|
|
908
|
-
ordinal?: boolean;
|
|
909
|
-
slashedZero?: boolean;
|
|
910
|
-
liningNums?: boolean;
|
|
911
|
-
oldstyleNums?: boolean;
|
|
912
|
-
proportionalNums?: boolean;
|
|
913
|
-
tabularNums?: boolean;
|
|
914
|
-
diagonalFractions?: boolean;
|
|
915
|
-
stackedFractions?: boolean;
|
|
916
|
-
/** @see https://tailwindcss.com/docs/letter-spacing */
|
|
917
|
-
tracking?: 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest' | (string & {});
|
|
918
|
-
/** @see https://tailwindcss.com/docs/line-clamp */
|
|
919
|
-
lineClamp?: 1 | 2 | 3 | 4 | 5 | 6 | 'none' | number | (string & {});
|
|
920
|
-
/** @see https://tailwindcss.com/docs/line-height */
|
|
921
|
-
leading?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose' | (string & {});
|
|
922
|
-
/** @see https://tailwindcss.com/docs/list-style-image */
|
|
923
|
-
listImg?: 'none' | (string & {});
|
|
924
|
-
/** @see https://tailwindcss.com/docs/list-style-position */
|
|
925
|
-
listPos?: 'inside' | 'outside';
|
|
926
|
-
/** @see https://tailwindcss.com/docs/list-style-type */
|
|
927
|
-
list?: 'none' | 'disc' | 'decimal' | (string & {});
|
|
928
|
-
/** @see https://tailwindcss.com/docs/text-align */
|
|
929
|
-
textAlign?: 'left' | 'center' | 'right' | 'justify' | 'start' | 'end';
|
|
930
|
-
/** @see https://tailwindcss.com/docs/text-color */
|
|
931
|
-
color?: ColorPropValue;
|
|
932
|
-
/** @see https://tailwindcss.com/docs/text-decoration */
|
|
933
|
-
underline?: boolean;
|
|
934
|
-
overline?: boolean;
|
|
935
|
-
lineThrough?: boolean;
|
|
936
|
-
noUnderline?: boolean;
|
|
937
|
-
/** String-keyed text-decoration prop for arbitrary values */
|
|
938
|
-
decoration?: 'underline' | 'overline' | 'line-through' | 'none' | (string & {});
|
|
939
|
-
/** @see https://tailwindcss.com/docs/text-decoration-color */
|
|
940
|
-
decorationColor?: ColorPropValue;
|
|
941
|
-
/** @see https://tailwindcss.com/docs/text-decoration-style */
|
|
942
|
-
decorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy';
|
|
943
|
-
/** @see https://tailwindcss.com/docs/text-decoration-thickness */
|
|
944
|
-
decorationThickness?: 'auto' | 'from-font' | 0 | 1 | 2 | 4 | 8 | (string & {});
|
|
945
|
-
/** @see https://tailwindcss.com/docs/text-underline-offset */
|
|
946
|
-
underlineOffset?: 'auto' | 0 | 1 | 2 | 4 | 8 | (string & {});
|
|
947
|
-
/** @see https://tailwindcss.com/docs/text-transform */
|
|
948
|
-
uppercase?: boolean;
|
|
949
|
-
lowercase?: boolean;
|
|
950
|
-
capitalize?: boolean;
|
|
951
|
-
normalCase?: boolean;
|
|
952
|
-
/** @see https://tailwindcss.com/docs/text-overflow */
|
|
953
|
-
truncate?: boolean;
|
|
954
|
-
textEllipsis?: boolean;
|
|
955
|
-
textClip?: boolean;
|
|
956
|
-
/** @see https://tailwindcss.com/docs/text-wrap */
|
|
957
|
-
textWrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty';
|
|
958
|
-
/** @see https://tailwindcss.com/docs/overflow-wrap (v4.1+) */
|
|
959
|
-
wrap?: 'normal' | 'break-word' | 'anywhere';
|
|
960
|
-
/** @see https://tailwindcss.com/docs/text-indent */
|
|
961
|
-
indent?: SpacingValue;
|
|
962
|
-
/** @see https://tailwindcss.com/docs/vertical-align */
|
|
963
|
-
align?: 'baseline' | 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom' | 'sub' | 'super' | (string & {});
|
|
964
|
-
/** @see https://tailwindcss.com/docs/whitespace */
|
|
965
|
-
whitespace?: 'normal' | 'nowrap' | 'pre' | 'pre-line' | 'pre-wrap' | 'break-spaces';
|
|
966
|
-
/** @see https://tailwindcss.com/docs/word-break */
|
|
967
|
-
break?: 'normal' | 'all' | 'keep';
|
|
968
|
-
/** @see https://tailwindcss.com/docs/hyphens */
|
|
969
|
-
hyphens?: 'none' | 'manual' | 'auto';
|
|
970
|
-
/** @see https://tailwindcss.com/docs/content */
|
|
971
|
-
content?: 'none' | (string & {});
|
|
972
|
-
/** @see https://tailwindcss.com/docs/font-feature-settings */
|
|
973
|
-
fontFeatures?: string & {};
|
|
974
|
-
/** @see https://tailwindcss.com/docs/forced-color-adjust */
|
|
975
|
-
forcedColorAdjust?: 'auto' | 'none';
|
|
976
|
-
}
|
|
977
|
-
/**
|
|
978
|
-
*
|
|
979
|
-
*/
|
|
980
|
-
interface BgImgGradient {
|
|
981
|
-
gradient: 'linear' | 'radial' | 'conic';
|
|
982
|
-
dir?: string | number;
|
|
983
|
-
in?: 'srgb' | 'hsl' | 'oklab' | 'oklch' | 'longer' | 'shorter' | 'increasing' | 'decreasing';
|
|
984
|
-
}
|
|
985
|
-
/** Background-related sz prop definitions. */
|
|
986
|
-
interface BackgroundProps {
|
|
987
|
-
/** @see https://tailwindcss.com/docs/background-attachment */
|
|
988
|
-
bgAttach?: 'fixed' | 'local' | 'scroll';
|
|
989
|
-
/** @see https://tailwindcss.com/docs/background-clip */
|
|
990
|
-
bgClip?: 'border' | 'padding' | 'content' | 'text';
|
|
991
|
-
/** @see https://tailwindcss.com/docs/background-color */
|
|
992
|
-
bg?: ColorPropValue;
|
|
993
|
-
/** @see https://tailwindcss.com/docs/background-origin */
|
|
994
|
-
bgOrigin?: 'border' | 'padding' | 'content';
|
|
995
|
-
/** @see https://tailwindcss.com/docs/background-position */
|
|
996
|
-
bgPos?: 'top-left' | 'top' | 'top-right' | 'left' | 'center' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right' | (string & {});
|
|
997
|
-
/** @see https://tailwindcss.com/docs/background-repeat */
|
|
998
|
-
bgRepeat?: 'repeat' | 'no-repeat' | 'repeat-x' | 'repeat-y' | 'round' | 'space';
|
|
999
|
-
/** @see https://tailwindcss.com/docs/background-size */
|
|
1000
|
-
bgSize?: 'auto' | 'cover' | 'contain' | (string & {});
|
|
1001
|
-
/** @see https://tailwindcss.com/docs/background-image */
|
|
1002
|
-
bgImg?: 'none' | BgImgGradient | (string & {});
|
|
1003
|
-
/** @see https://tailwindcss.com/docs/gradient-color-stops */
|
|
1004
|
-
from?: ColorPropValue;
|
|
1005
|
-
via?: ColorPropValue;
|
|
1006
|
-
to?: ColorPropValue;
|
|
1007
|
-
/** @see https://tailwindcss.com/docs/gradient-color-stops (position) */
|
|
1008
|
-
fromPos?: number | (string & {});
|
|
1009
|
-
viaPos?: number | (string & {});
|
|
1010
|
-
toPos?: number | (string & {});
|
|
1011
|
-
}
|
|
1012
|
-
/**
|
|
1013
|
-
*
|
|
1014
|
-
*/
|
|
1015
|
-
interface BorderProps {
|
|
1016
|
-
/** @see https://tailwindcss.com/docs/border-radius */
|
|
1017
|
-
rounded?: BorderRadiusValue;
|
|
1018
|
-
roundedT?: BorderRadiusValue;
|
|
1019
|
-
roundedR?: BorderRadiusValue;
|
|
1020
|
-
roundedB?: BorderRadiusValue;
|
|
1021
|
-
roundedL?: BorderRadiusValue;
|
|
1022
|
-
roundedTl?: BorderRadiusValue;
|
|
1023
|
-
roundedTr?: BorderRadiusValue;
|
|
1024
|
-
roundedBl?: BorderRadiusValue;
|
|
1025
|
-
roundedBr?: BorderRadiusValue;
|
|
1026
|
-
roundedS?: BorderRadiusValue;
|
|
1027
|
-
roundedE?: BorderRadiusValue;
|
|
1028
|
-
roundedSs?: BorderRadiusValue;
|
|
1029
|
-
roundedSe?: BorderRadiusValue;
|
|
1030
|
-
roundedEs?: BorderRadiusValue;
|
|
1031
|
-
roundedEe?: BorderRadiusValue;
|
|
1032
|
-
/** @see https://tailwindcss.com/docs/border-width — use `borderColor` for border color */
|
|
1033
|
-
border?: boolean | 0 | 2 | 4 | 8 | (string & {});
|
|
1034
|
-
borderX?: boolean | 0 | 2 | 4 | 8 | (string & {});
|
|
1035
|
-
borderY?: boolean | 0 | 2 | 4 | 8 | (string & {});
|
|
1036
|
-
borderT?: boolean | 0 | 2 | 4 | 8 | (string & {});
|
|
1037
|
-
borderR?: boolean | 0 | 2 | 4 | 8 | (string & {});
|
|
1038
|
-
borderB?: boolean | 0 | 2 | 4 | 8 | (string & {});
|
|
1039
|
-
borderL?: boolean | 0 | 2 | 4 | 8 | (string & {});
|
|
1040
|
-
borderS?: boolean | 0 | 2 | 4 | 8 | (string & {});
|
|
1041
|
-
borderE?: boolean | 0 | 2 | 4 | 8 | (string & {});
|
|
1042
|
-
/** border-block-start width */
|
|
1043
|
-
borderBs?: boolean | 0 | 2 | 4 | 8 | (string & {});
|
|
1044
|
-
/** border-block-end width */
|
|
1045
|
-
borderBe?: boolean | 0 | 2 | 4 | 8 | (string & {});
|
|
1046
|
-
/** @see https://tailwindcss.com/docs/border-color */
|
|
1047
|
-
borderColor?: ColorPropValue;
|
|
1048
|
-
/** @see https://tailwindcss.com/docs/border-style */
|
|
1049
|
-
borderStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'hidden' | 'none';
|
|
1050
|
-
/** @see https://tailwindcss.com/docs/divide-width */
|
|
1051
|
-
divideX?: boolean | 0 | 2 | 4 | 8 | 'reverse' | (string & {});
|
|
1052
|
-
divideY?: boolean | 0 | 2 | 4 | 8 | 'reverse' | (string & {});
|
|
1053
|
-
/** @see https://tailwindcss.com/docs/divide-color */
|
|
1054
|
-
divideColor?: ColorPropValue;
|
|
1055
|
-
/** @see https://tailwindcss.com/docs/divide-style */
|
|
1056
|
-
divideStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'none';
|
|
1057
|
-
/** Reverse divide-x direction */
|
|
1058
|
-
divideXReverse?: boolean;
|
|
1059
|
-
/** Reverse divide-y direction */
|
|
1060
|
-
divideYReverse?: boolean;
|
|
1061
|
-
/** @see https://tailwindcss.com/docs/outline-width */
|
|
1062
|
-
outline?: boolean | 'none' | 0 | 1 | 2 | 4 | 8 | (string & {});
|
|
1063
|
-
/** @see https://tailwindcss.com/docs/outline-color */
|
|
1064
|
-
outlineColor?: ColorPropValue;
|
|
1065
|
-
/** @see https://tailwindcss.com/docs/outline-style */
|
|
1066
|
-
outlineStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'none';
|
|
1067
|
-
/** @see https://tailwindcss.com/docs/outline-offset */
|
|
1068
|
-
outlineOffset?: 0 | 1 | 2 | 4 | 8 | (string & {});
|
|
1069
|
-
/** @see https://tailwindcss.com/docs/ring-width */
|
|
1070
|
-
ring?: boolean | 0 | 1 | 2 | 4 | 8 | 'inset' | (string & {});
|
|
1071
|
-
/** @see https://tailwindcss.com/docs/ring-color */
|
|
1072
|
-
ringColor?: ColorPropValue;
|
|
1073
|
-
/** @see https://tailwindcss.com/docs/ring-offset-width */
|
|
1074
|
-
ringOffset?: 0 | 1 | 2 | 4 | 8 | (string & {});
|
|
1075
|
-
/** @see https://tailwindcss.com/docs/ring-offset-color */
|
|
1076
|
-
ringOffsetColor?: ColorPropValue;
|
|
1077
|
-
}
|
|
1078
|
-
/**
|
|
1079
|
-
*
|
|
1080
|
-
*/
|
|
1081
|
-
interface EffectsProps {
|
|
1082
|
-
/** @see https://tailwindcss.com/docs/box-shadow */
|
|
1083
|
-
shadow?: ShadowValue;
|
|
1084
|
-
/** @see https://tailwindcss.com/docs/box-shadow-color */
|
|
1085
|
-
shadowColor?: ColorPropValue;
|
|
1086
|
-
/** Text shadow */
|
|
1087
|
-
textShadow?: ShadowValue;
|
|
1088
|
-
/** Text shadow color */
|
|
1089
|
-
textShadowColor?: ColorPropValue;
|
|
1090
|
-
/** Inset shadow */
|
|
1091
|
-
insetShadow?: ShadowValue;
|
|
1092
|
-
/** Inset shadow color */
|
|
1093
|
-
insetShadowColor?: ColorPropValue;
|
|
1094
|
-
/** Drop shadow color */
|
|
1095
|
-
dropShadowColor?: ColorPropValue;
|
|
1096
|
-
/** @see https://tailwindcss.com/docs/opacity */
|
|
1097
|
-
opacity?: 0 | 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100 | number | (string & {});
|
|
1098
|
-
/** @see https://tailwindcss.com/docs/mix-blend-mode */
|
|
1099
|
-
mixBlend?: 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity' | 'plus-darker' | 'plus-lighter';
|
|
1100
|
-
/** @see https://tailwindcss.com/docs/background-blend-mode */
|
|
1101
|
-
bgBlend?: 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity';
|
|
1102
|
-
}
|
|
1103
|
-
/**
|
|
1104
|
-
*
|
|
1105
|
-
*/
|
|
1106
|
-
interface FilterProps {
|
|
1107
|
-
/** @see https://tailwindcss.com/docs/blur */
|
|
1108
|
-
blur?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | true | (string & {});
|
|
1109
|
-
/** @see https://tailwindcss.com/docs/brightness */
|
|
1110
|
-
brightness?: 0 | 50 | 75 | 90 | 95 | 100 | 105 | 110 | 125 | 150 | 200 | number | (string & {});
|
|
1111
|
-
/** @see https://tailwindcss.com/docs/contrast */
|
|
1112
|
-
contrast?: 0 | 50 | 75 | 100 | 125 | 150 | 200 | number | (string & {});
|
|
1113
|
-
/** @see https://tailwindcss.com/docs/drop-shadow */
|
|
1114
|
-
dropShadow?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'none' | true | (string & {});
|
|
1115
|
-
/** @see https://tailwindcss.com/docs/grayscale */
|
|
1116
|
-
grayscale?: boolean | 0 | (string & {});
|
|
1117
|
-
/** @see https://tailwindcss.com/docs/hue-rotate */
|
|
1118
|
-
hueRotate?: 0 | 15 | 30 | 60 | 90 | 180 | number | (string & {});
|
|
1119
|
-
/** @see https://tailwindcss.com/docs/invert */
|
|
1120
|
-
invert?: boolean | 0 | (string & {});
|
|
1121
|
-
/** @see https://tailwindcss.com/docs/saturate */
|
|
1122
|
-
saturate?: 0 | 50 | 100 | 150 | 200 | number | (string & {});
|
|
1123
|
-
/** @see https://tailwindcss.com/docs/sepia */
|
|
1124
|
-
sepia?: boolean | 0 | (string & {});
|
|
1125
|
-
/** @see https://tailwindcss.com/docs/backdrop-blur */
|
|
1126
|
-
backdropBlur?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | true | (string & {});
|
|
1127
|
-
/** @see https://tailwindcss.com/docs/backdrop-brightness */
|
|
1128
|
-
backdropBrightness?: 0 | 50 | 75 | 90 | 95 | 100 | 105 | 110 | 125 | 150 | 200 | number | (string & {});
|
|
1129
|
-
/** @see https://tailwindcss.com/docs/backdrop-contrast */
|
|
1130
|
-
backdropContrast?: 0 | 50 | 75 | 100 | 125 | 150 | 200 | number | (string & {});
|
|
1131
|
-
/** @see https://tailwindcss.com/docs/backdrop-grayscale */
|
|
1132
|
-
backdropGrayscale?: boolean | 0 | (string & {});
|
|
1133
|
-
/** @see https://tailwindcss.com/docs/backdrop-hue-rotate */
|
|
1134
|
-
backdropHueRotate?: 0 | 15 | 30 | 60 | 90 | 180 | number | (string & {});
|
|
1135
|
-
/** @see https://tailwindcss.com/docs/backdrop-invert */
|
|
1136
|
-
backdropInvert?: boolean | 0 | (string & {});
|
|
1137
|
-
/** @see https://tailwindcss.com/docs/backdrop-opacity */
|
|
1138
|
-
backdropOpacity?: 0 | 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100 | number | (string & {});
|
|
1139
|
-
/** @see https://tailwindcss.com/docs/backdrop-saturate */
|
|
1140
|
-
backdropSaturate?: 0 | 50 | 100 | 150 | 200 | number | (string & {});
|
|
1141
|
-
/** @see https://tailwindcss.com/docs/backdrop-sepia */
|
|
1142
|
-
backdropSepia?: boolean | 0 | (string & {});
|
|
1143
|
-
}
|
|
1144
|
-
/**
|
|
1145
|
-
*
|
|
1146
|
-
*/
|
|
1147
|
-
interface TransformProps {
|
|
1148
|
-
/** @see https://tailwindcss.com/docs/scale */
|
|
1149
|
-
scale?: 0 | 50 | 75 | 90 | 95 | 100 | 105 | 110 | 125 | 150 | 200 | '3d' | number | (string & {});
|
|
1150
|
-
scaleX?: TransformProps['scale'];
|
|
1151
|
-
scaleY?: TransformProps['scale'];
|
|
1152
|
-
/** @see https://tailwindcss.com/docs/scale (Z-axis, 3D) */
|
|
1153
|
-
scaleZ?: TransformProps['scale'];
|
|
1154
|
-
/** @see https://tailwindcss.com/docs/rotate */
|
|
1155
|
-
rotate?: 0 | 1 | 2 | 3 | 6 | 12 | 45 | 90 | 180 | number | (string & {});
|
|
1156
|
-
/** @see https://tailwindcss.com/docs/rotate (X-axis, 3D) */
|
|
1157
|
-
rotateX?: TransformProps['rotate'];
|
|
1158
|
-
/** @see https://tailwindcss.com/docs/rotate (Y-axis, 3D) */
|
|
1159
|
-
rotateY?: TransformProps['rotate'];
|
|
1160
|
-
/** @see https://tailwindcss.com/docs/rotate (Z-axis, 3D) */
|
|
1161
|
-
rotateZ?: TransformProps['rotate'];
|
|
1162
|
-
/** @see https://tailwindcss.com/docs/translate — shorthand sets both axes */
|
|
1163
|
-
translate?: SpacingValue | FractionValue;
|
|
1164
|
-
/** @see https://tailwindcss.com/docs/translate */
|
|
1165
|
-
translateX?: SpacingValue | FractionValue;
|
|
1166
|
-
translateY?: SpacingValue | FractionValue;
|
|
1167
|
-
/** @see https://tailwindcss.com/docs/translate (Z-axis, 3D) */
|
|
1168
|
-
translateZ?: SpacingValue;
|
|
1169
|
-
/** @see https://tailwindcss.com/docs/skew */
|
|
1170
|
-
skewX?: 0 | 1 | 2 | 3 | 6 | 12 | number | (string & {});
|
|
1171
|
-
skewY?: 0 | 1 | 2 | 3 | 6 | 12 | number | (string & {});
|
|
1172
|
-
/** @see https://tailwindcss.com/docs/transform-origin */
|
|
1173
|
-
origin?: 'center' | 'top' | 'top-right' | 'right' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left' | 'top-left' | (string & {});
|
|
1174
|
-
/** @see https://tailwindcss.com/docs/transform */
|
|
1175
|
-
transform?: 'none' | 'gpu' | 'cpu';
|
|
1176
|
-
/** @see https://tailwindcss.com/docs/perspective */
|
|
1177
|
-
perspective?: 'none' | (string & {});
|
|
1178
|
-
perspectiveOrigin?: (string & {});
|
|
1179
|
-
/** @see https://tailwindcss.com/docs/backface-visibility */
|
|
1180
|
-
backface?: 'visible' | 'hidden';
|
|
1181
|
-
}
|
|
1182
|
-
/**
|
|
1183
|
-
*
|
|
1184
|
-
*/
|
|
1185
|
-
interface TransitionAnimationProps {
|
|
1186
|
-
/** @see https://tailwindcss.com/docs/transition-property */
|
|
1187
|
-
transition?: boolean | 'none' | 'all' | 'colors' | 'opacity' | 'shadow' | 'transform' | (string & {});
|
|
1188
|
-
/** @see https://tailwindcss.com/docs/transition-duration */
|
|
1189
|
-
duration?: 0 | 75 | 100 | 150 | 200 | 300 | 500 | 700 | 1000 | number | (string & {});
|
|
1190
|
-
/** @see https://tailwindcss.com/docs/transition-timing-function */
|
|
1191
|
-
ease?: 'linear' | 'in' | 'out' | 'in-out' | (string & {});
|
|
1192
|
-
/** @see https://tailwindcss.com/docs/transition-delay */
|
|
1193
|
-
delay?: 0 | 75 | 100 | 150 | 200 | 300 | 500 | 700 | 1000 | number | (string & {});
|
|
1194
|
-
/** @see https://tailwindcss.com/docs/animation */
|
|
1195
|
-
animate?: 'none' | 'spin' | 'ping' | 'pulse' | 'bounce' | (string & {});
|
|
1196
|
-
/**
|
|
1197
|
-
* Animation delay — sets `animation-delay` (distinct from `delay` which sets `transition-delay`).
|
|
1198
|
-
* Number values are treated as milliseconds: `150` → `[animation-delay:150ms]`.
|
|
1199
|
-
*/
|
|
1200
|
-
animationDelay?: 0 | 75 | 100 | 150 | 200 | 300 | 500 | 700 | 1000 | number | (string & {});
|
|
1201
|
-
}
|
|
1202
|
-
/**
|
|
1203
|
-
*
|
|
1204
|
-
*/
|
|
1205
|
-
interface InteractivityProps {
|
|
1206
|
-
/** @see https://tailwindcss.com/docs/accent-color */
|
|
1207
|
-
accent?: 'auto' | ColorPropValue;
|
|
1208
|
-
/** @see https://tailwindcss.com/docs/appearance */
|
|
1209
|
-
appearance?: 'none' | 'auto';
|
|
1210
|
-
/** @see https://tailwindcss.com/docs/cursor */
|
|
1211
|
-
cursor?: 'auto' | 'default' | 'pointer' | 'wait' | 'text' | 'move' | 'help' | 'not-allowed' | 'none' | 'context-menu' | 'progress' | 'cell' | 'crosshair' | 'vertical-text' | 'alias' | 'copy' | 'no-drop' | 'grab' | 'grabbing' | 'all-scroll' | 'col-resize' | 'row-resize' | 'n-resize' | 's-resize' | 'e-resize' | 'w-resize' | 'ne-resize' | 'nw-resize' | 'se-resize' | 'sw-resize' | 'ew-resize' | 'ns-resize' | 'nesw-resize' | 'nwse-resize' | 'zoom-in' | 'zoom-out' | (string & {});
|
|
1212
|
-
/** @see https://tailwindcss.com/docs/caret-color */
|
|
1213
|
-
caret?: 'auto' | ColorPropValue;
|
|
1214
|
-
/** @see https://tailwindcss.com/docs/pointer-events */
|
|
1215
|
-
pointerEvents?: 'none' | 'auto';
|
|
1216
|
-
/** @see https://tailwindcss.com/docs/field-sizing */
|
|
1217
|
-
fieldSizing?: 'fixed' | 'content';
|
|
1218
|
-
/** @see https://tailwindcss.com/docs/color-scheme */
|
|
1219
|
-
scheme?: 'normal' | 'dark' | 'light' | 'light-dark' | 'only-dark' | 'only-light';
|
|
1220
|
-
/** @see https://tailwindcss.com/docs/resize */
|
|
1221
|
-
resize?: 'none' | 'y' | 'x' | boolean;
|
|
1222
|
-
/** @see https://tailwindcss.com/docs/scroll-behavior */
|
|
1223
|
-
scroll?: 'auto' | 'smooth';
|
|
1224
|
-
/** @see https://tailwindcss.com/docs/scroll-margin */
|
|
1225
|
-
scrollM?: SpacingValue;
|
|
1226
|
-
scrollMx?: SpacingValue;
|
|
1227
|
-
scrollMy?: SpacingValue;
|
|
1228
|
-
scrollMt?: SpacingValue;
|
|
1229
|
-
scrollMr?: SpacingValue;
|
|
1230
|
-
scrollMb?: SpacingValue;
|
|
1231
|
-
scrollMl?: SpacingValue;
|
|
1232
|
-
scrollMs?: SpacingValue;
|
|
1233
|
-
scrollMe?: SpacingValue;
|
|
1234
|
-
/** @see https://tailwindcss.com/docs/scroll-padding */
|
|
1235
|
-
scrollP?: SpacingValue;
|
|
1236
|
-
scrollPx?: SpacingValue;
|
|
1237
|
-
scrollPy?: SpacingValue;
|
|
1238
|
-
scrollPt?: SpacingValue;
|
|
1239
|
-
scrollPr?: SpacingValue;
|
|
1240
|
-
scrollPb?: SpacingValue;
|
|
1241
|
-
scrollPl?: SpacingValue;
|
|
1242
|
-
scrollPs?: SpacingValue;
|
|
1243
|
-
scrollPe?: SpacingValue;
|
|
1244
|
-
/** scroll-padding-block-start */
|
|
1245
|
-
scrollPbs?: SpacingValue;
|
|
1246
|
-
/** scroll-padding-block-end */
|
|
1247
|
-
scrollPbe?: SpacingValue;
|
|
1248
|
-
/** scroll-margin-block-start */
|
|
1249
|
-
scrollMbs?: SpacingValue;
|
|
1250
|
-
/** scroll-margin-block-end */
|
|
1251
|
-
scrollMbe?: SpacingValue;
|
|
1252
|
-
/** @see https://tailwindcss.com/docs/scroll-snap-align */
|
|
1253
|
-
snapAlign?: 'start' | 'end' | 'center' | 'align-none';
|
|
1254
|
-
/** @see https://tailwindcss.com/docs/scroll-snap-stop */
|
|
1255
|
-
snapStop?: 'normal' | 'always';
|
|
1256
|
-
/** @see https://tailwindcss.com/docs/scroll-snap-type */
|
|
1257
|
-
snapType?: 'none' | 'x' | 'y' | 'both' | 'mandatory' | 'proximity';
|
|
1258
|
-
/** @see https://tailwindcss.com/docs/touch-action */
|
|
1259
|
-
touch?: 'auto' | 'none' | 'pan-x' | 'pan-left' | 'pan-right' | 'pan-y' | 'pan-up' | 'pan-down' | 'pinch-zoom' | 'manipulation';
|
|
1260
|
-
/** @see https://tailwindcss.com/docs/user-select */
|
|
1261
|
-
select?: 'none' | 'text' | 'all' | 'auto';
|
|
1262
|
-
/** @see https://tailwindcss.com/docs/will-change */
|
|
1263
|
-
willChange?: 'auto' | 'scroll' | 'contents' | 'transform' | (string & {});
|
|
1264
|
-
}
|
|
1265
|
-
/**
|
|
1266
|
-
*
|
|
1267
|
-
*/
|
|
1268
|
-
interface SvgProps {
|
|
1269
|
-
/** @see https://tailwindcss.com/docs/fill */
|
|
1270
|
-
fill?: 'none' | 'current' | ColorPropValue;
|
|
1271
|
-
/** @see https://tailwindcss.com/docs/stroke */
|
|
1272
|
-
stroke?: 'none' | 'current' | ColorPropValue;
|
|
1273
|
-
/** @see https://tailwindcss.com/docs/stroke-width */
|
|
1274
|
-
strokeWidth?: 0 | 1 | 2 | number | (string & {});
|
|
1275
|
-
}
|
|
1276
|
-
/**
|
|
1277
|
-
*
|
|
1278
|
-
*/
|
|
1279
|
-
interface TableProps {
|
|
1280
|
-
/** @see https://tailwindcss.com/docs/border-collapse */
|
|
1281
|
-
borderCollapse?: 'collapse' | 'separate';
|
|
1282
|
-
/** @see https://tailwindcss.com/docs/border-spacing */
|
|
1283
|
-
borderSpacing?: SpacingValue;
|
|
1284
|
-
borderSpacingX?: SpacingValue;
|
|
1285
|
-
borderSpacingY?: SpacingValue;
|
|
1286
|
-
/** @see https://tailwindcss.com/docs/table-layout */
|
|
1287
|
-
tableLayout?: 'auto' | 'fixed';
|
|
1288
|
-
/** @see https://tailwindcss.com/docs/caption-side */
|
|
1289
|
-
caption?: 'top' | 'bottom';
|
|
1290
|
-
}
|
|
1291
|
-
/**
|
|
1292
|
-
*
|
|
1293
|
-
*/
|
|
1294
|
-
interface MaskProps {
|
|
1295
|
-
/** CSS mask shorthand */
|
|
1296
|
-
mask?: 'none' | (string & {});
|
|
1297
|
-
/** CSS mask-size */
|
|
1298
|
-
maskSize?: 'auto' | 'cover' | 'contain' | (string & {});
|
|
1299
|
-
/** CSS mask-position */
|
|
1300
|
-
maskPos?: (string & {});
|
|
1301
|
-
/** CSS mask-repeat */
|
|
1302
|
-
maskRepeat?: 'repeat' | 'no-repeat' | 'repeat-x' | 'repeat-y' | 'round' | 'space';
|
|
1303
|
-
/** CSS mask-type (shape-rendering) */
|
|
1304
|
-
maskShape?: 'alpha' | 'luminance';
|
|
1305
|
-
}
|
|
1306
|
-
/**
|
|
1307
|
-
* Variant modifiers for pseudo-classes, breakpoints, and states.
|
|
1308
|
-
* These allow nesting SzProps for conditional styling.
|
|
1309
|
-
*/
|
|
1310
|
-
interface VariantModifiers {
|
|
1311
|
-
hover?: SzPropsBase;
|
|
1312
|
-
focus?: SzPropsBase;
|
|
1313
|
-
active?: SzPropsBase;
|
|
1314
|
-
visited?: SzPropsBase;
|
|
1315
|
-
target?: SzPropsBase;
|
|
1316
|
-
first?: SzPropsBase;
|
|
1317
|
-
last?: SzPropsBase;
|
|
1318
|
-
only?: SzPropsBase;
|
|
1319
|
-
odd?: SzPropsBase;
|
|
1320
|
-
even?: SzPropsBase;
|
|
1321
|
-
firstOfType?: SzPropsBase;
|
|
1322
|
-
lastOfType?: SzPropsBase;
|
|
1323
|
-
onlyOfType?: SzPropsBase;
|
|
1324
|
-
empty?: SzPropsBase;
|
|
1325
|
-
disabled?: SzPropsBase;
|
|
1326
|
-
enabled?: SzPropsBase;
|
|
1327
|
-
checked?: SzPropsBase;
|
|
1328
|
-
indeterminate?: SzPropsBase;
|
|
1329
|
-
default?: SzPropsBase;
|
|
1330
|
-
required?: SzPropsBase;
|
|
1331
|
-
valid?: SzPropsBase;
|
|
1332
|
-
invalid?: SzPropsBase;
|
|
1333
|
-
inRange?: SzPropsBase;
|
|
1334
|
-
outOfRange?: SzPropsBase;
|
|
1335
|
-
placeholderShown?: SzPropsBase;
|
|
1336
|
-
autofill?: SzPropsBase;
|
|
1337
|
-
readOnly?: SzPropsBase;
|
|
1338
|
-
focusWithin?: SzPropsBase;
|
|
1339
|
-
focusVisible?: SzPropsBase;
|
|
1340
|
-
before?: SzPropsBase;
|
|
1341
|
-
after?: SzPropsBase;
|
|
1342
|
-
placeholder?: SzPropsBase;
|
|
1343
|
-
file?: SzPropsBase;
|
|
1344
|
-
marker?: SzPropsBase;
|
|
1345
|
-
selection?: SzPropsBase;
|
|
1346
|
-
firstLine?: SzPropsBase;
|
|
1347
|
-
firstLetter?: SzPropsBase;
|
|
1348
|
-
backdrop?: SzPropsBase;
|
|
1349
|
-
sm?: SzPropsBase;
|
|
1350
|
-
md?: SzPropsBase;
|
|
1351
|
-
lg?: SzPropsBase;
|
|
1352
|
-
xl?: SzPropsBase;
|
|
1353
|
-
'2xl'?: SzPropsBase;
|
|
1354
|
-
'@sm'?: SzPropsBase;
|
|
1355
|
-
'@md'?: SzPropsBase;
|
|
1356
|
-
'@lg'?: SzPropsBase;
|
|
1357
|
-
'@xl'?: SzPropsBase;
|
|
1358
|
-
'@2xl'?: SzPropsBase;
|
|
1359
|
-
dark?: SzPropsBase;
|
|
1360
|
-
light?: SzPropsBase;
|
|
1361
|
-
motionReduce?: SzPropsBase;
|
|
1362
|
-
motionSafe?: SzPropsBase;
|
|
1363
|
-
contrastMore?: SzPropsBase;
|
|
1364
|
-
contrastLess?: SzPropsBase;
|
|
1365
|
-
print?: SzPropsBase;
|
|
1366
|
-
portrait?: SzPropsBase;
|
|
1367
|
-
landscape?: SzPropsBase;
|
|
1368
|
-
rtl?: SzPropsBase;
|
|
1369
|
-
ltr?: SzPropsBase;
|
|
1370
|
-
group?: boolean | string | SzPropsBase;
|
|
1371
|
-
peer?: boolean | string | SzPropsBase;
|
|
1372
|
-
not?: SzPropsBase;
|
|
1373
|
-
has?: Record<string, SzPropsBase>;
|
|
1374
|
-
aria?: Record<string, SzPropsBase>;
|
|
1375
|
-
data?: Record<string, SzPropsBase>;
|
|
1376
|
-
supports?: Record<string, SzPropsBase>;
|
|
1377
|
-
}
|
|
1378
|
-
/**
|
|
1379
|
-
* Base sz props without variant modifiers (to prevent infinite recursion).
|
|
1380
|
-
*/
|
|
1381
|
-
type SzPropsBase = LayoutProps & FlexboxGridProps & SpacingProps & SizingProps & TypographyProps & BackgroundProps & BorderProps & EffectsProps & FilterProps & TransformProps & TransitionAnimationProps & InteractivityProps & SvgProps & TableProps & MaskProps & {
|
|
1382
|
-
/**
|
|
1383
|
-
* Arbitrary CSS escape hatch — for CSS properties with no sz/Tailwind equivalent.
|
|
1384
|
-
* Keys are camelCase CSS properties (or `--custom-property` for CSS vars).
|
|
1385
|
-
* Each entry generates a Tailwind arbitrary-property class: `[prop:value]`.
|
|
1386
|
-
*
|
|
1387
|
-
* @example
|
|
1388
|
-
* { css: { writingMode: 'vertical-lr', touchAction: 'none' } }
|
|
1389
|
-
* // → [writing-mode:vertical-lr] [touch-action:none]
|
|
1390
|
-
*
|
|
1391
|
-
* { css: { '--my-color': 'red' } }
|
|
1392
|
-
* // → [--my-color:red]
|
|
1393
|
-
*/
|
|
1394
|
-
css?: CSS.Properties & {
|
|
1395
|
-
[cssVar: `--${string}`]: string | number;
|
|
1396
|
-
};
|
|
1397
|
-
} & {
|
|
1398
|
-
[key: string]: unknown;
|
|
1399
|
-
};
|
|
1400
|
-
/**
|
|
1401
|
-
* Complete sz prop type with all properties and variant modifiers.
|
|
1402
|
-
*
|
|
1403
|
-
* @example
|
|
1404
|
-
* ```tsx
|
|
1405
|
-
* <div sz={{ p: 4, bg: 'blue-500', hover: { bg: 'blue-700' } }} />
|
|
1406
|
-
* ```
|
|
1407
|
-
*/
|
|
1408
|
-
type SzProps = SzPropsBase & VariantModifiers;
|
|
1409
|
-
/**
|
|
1410
|
-
* Array element type for sz array composition — each element is a style object or a falsy
|
|
1411
|
-
* conditional guard (`false | null | undefined` are skipped at runtime by `_szMerge`).
|
|
1412
|
-
*/
|
|
1413
|
-
type SzArrayElement = SzProps | false | null | undefined;
|
|
1414
|
-
/**
|
|
1415
|
-
* All accepted forms of the `sz` prop:
|
|
1416
|
-
* - A plain Tailwind class string: `sz="p-4 bg-blue-500"`
|
|
1417
|
-
* - A style object: `sz={{ p: 4, bg: 'blue-500' }}`
|
|
1418
|
-
* - An array of style objects for composition: `sz={[layout, text, isActive && active]}`
|
|
1419
|
-
*
|
|
1420
|
-
* @example
|
|
1421
|
-
* ```tsx
|
|
1422
|
-
* <div sz="p-4 bg-blue-500 hover:bg-blue-700" />
|
|
1423
|
-
* <div sz={{ p: 4, bg: 'blue-500' }} />
|
|
1424
|
-
* <div sz={[base, isActive && activeStyle]} />
|
|
1425
|
-
* ```
|
|
1426
|
-
*/
|
|
1427
|
-
type SzPropValue = string | SzProps | SzArrayElement[];
|
|
1428
|
-
|
|
1429
|
-
/**
|
|
1430
|
-
* @csszyx/compiler - TypeScript compiler package for csszyx.
|
|
1431
|
-
*
|
|
1432
|
-
* This package provides the core compilation functionality for csszyx,
|
|
1433
|
-
* including JSX transformation, recovery token generation, and manifest
|
|
1434
|
-
* creation.
|
|
1435
|
-
*
|
|
1436
|
-
* @module @csszyx/compiler
|
|
1437
|
-
*/
|
|
1438
|
-
|
|
1439
|
-
/**
|
|
1440
|
-
* Compiler version.
|
|
1441
|
-
*/
|
|
1442
|
-
declare const VERSION = "0.0.0";
|
|
1443
|
-
/**
|
|
1444
|
-
* Compiler configuration options.
|
|
1445
|
-
*/
|
|
1446
|
-
interface CompilerOptions {
|
|
1447
|
-
/**
|
|
1448
|
-
* Build ID (git hash or timestamp)
|
|
1449
|
-
*/
|
|
1450
|
-
buildId?: string;
|
|
1451
|
-
/**
|
|
1452
|
-
* Enable development mode features
|
|
1453
|
-
*/
|
|
1454
|
-
development?: boolean;
|
|
1455
|
-
/**
|
|
1456
|
-
* Strict mode - fail build on warnings
|
|
1457
|
-
*/
|
|
1458
|
-
strictMode?: boolean;
|
|
1459
|
-
}
|
|
1460
|
-
/**
|
|
1461
|
-
* Default compiler options.
|
|
1462
|
-
*/
|
|
1463
|
-
declare const DEFAULT_COMPILER_OPTIONS: Required<CompilerOptions>;
|
|
1464
|
-
/**
|
|
1465
|
-
* Merges user options with defaults.
|
|
1466
|
-
*
|
|
1467
|
-
* @param {Partial<CompilerOptions>} options - User-provided options
|
|
1468
|
-
* @returns {Required<CompilerOptions>} Complete options object
|
|
1469
|
-
*
|
|
1470
|
-
* @example
|
|
1471
|
-
* ```typescript
|
|
1472
|
-
* const options = mergeOptions({ development: true });
|
|
1473
|
-
* ```
|
|
1474
|
-
*/
|
|
1475
|
-
declare function mergeOptions(options?: Partial<CompilerOptions>): Required<CompilerOptions>;
|
|
1476
|
-
|
|
1477
|
-
export { BOOLEAN_SHORTHANDS, type BackgroundProps, type BorderProps, type BorderRadiusValue, COLOR_PROPERTIES, type CSSVarUsage, type ColorName, type ColorObjectValue, type ColorPropValue, type ColorShade, type ColorValue, type CompilerOptions, type ContainerSize, CsszyxCompiler, type CustomTheme, DEFAULT_COMPILER_OPTIONS, type EffectsProps, type FilterProps, type FlexboxGridProps, type FractionValue, type InteractivityProps, KNOWN_VARIANTS, type LayoutProps, ManifestBuilder, type NegativeSpacingValue, PROPERTY_CATEGORY_MAP, PROPERTY_MAP, PropertyCategory, type RecoveryManifest, type RecoveryMode, type RecoveryToken, SUGGESTION_MAP, type ShadowValue, type SizingProps, type SpacingProps, type SpacingScale, type SpacingValue, type SvgProps, type SzObject, type SzPropValue, type SzProps, type SzPropsBase, type SzValue, type TableProps, type TokenData, type TokenMetadata, type TransformProps, type TransitionAnimationProps, type TypographyProps, VERSION, type VariantModifiers, buildParentMap, createRecoveryToken, generateRecoveryToken, getCSSVariableName, getPropertyCategory, hoistCSSVariables, injectRecoveryToken, isValidRecoveryMode, isValidSzProp, mergeOptions, normalizeClassName, parseManifest, serializeManifest, transform, transformSourceCode, validateManifest, validateSzRecover };
|