@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/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 };