@csszyx/compiler 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,1319 @@
+import * as t from '@babel/types';
+
+/**
+ * JSX Transform - Converts sz prop to className string.
+ *
+ * This module handles the transformation of csszyx object syntax into
+ * Tailwind CSS class strings. It processes nested objects for variants
+ * like hover, focus, etc.
+ */
+/**
+ * Represents a value in the sz object.
+ * Can be a string, number, boolean, or nested object for variants.
+ */
+type SzValue = string | number | boolean | SzObject;
+/**
+ * Represents the sz object structure.
+ * Keys are CSS property abbreviations, values can be primitives or nested objects.
+ */
+interface SzObject {
+    [key: string]: SzValue;
+}
+/**
+ * Represents the result of a transformation.
+ */
+interface TransformResult {
+    className: string;
+    attributes: Record<string, string>;
+}
+/**
+ * Transforms a csszyx sz object into a Tailwind CSS className string and extracted attributes.
+ *
+ * @param {SzObject} szProp - The sz object from JSX
+ * @param {string} prefix - Variant prefix for nested properties
+ * @param {Record<string, string>} [mangleMap] - Optional map for property name mangling
+ * @returns {TransformResult} The transformation result
+ */
+declare function transform(szProp: SzObject, prefix?: string, mangleMap?: Record<string, string>): TransformResult;
+/**
+ * Validates that an sz prop object is valid.
+ *
+ * @param {unknown} szProp - The value to validate
+ * @returns {boolean} True if valid, false otherwise
+ */
+declare function isValidSzProp(szProp: unknown): szProp is SzObject;
+/**
+ * Normalizes a className string by removing extra whitespace.
+ *
+ * @param {string} className - The className string to normalize
+ * @returns {string} The normalized className string
+ */
+declare function normalizeClassName(className: string): string;
+
+/**
+ * Transforms all sz props in a source code string into Tailwind classNames.
+ *
+ * @param {string} source - The source code to transform
+ * @returns {object} Transformation result with code and metadata
+ */
+declare function transformSourceCode(source: string): {
+    code: string;
+    transformed: boolean;
+    usesRuntime: boolean;
+    usesColorVar: boolean;
+};
+
+/**
+ * Core Compiler class for csszyx.
+ *
+ * This class manages the WASM lifecycle and provides high-performance
+ * transformation methods. It falls back to JavaScript if WASM is not available.
+ */
+declare class CsszyxCompiler {
+    private static instance;
+    private wasmLoaded;
+    /**
+     * Private constructor to enforce singleton pattern.
+     */
+    private constructor();
+    /**
+     * Gets the singleton instance of the compiler.
+     *
+     * @returns {CsszyxCompiler} The compiler instance.
+     */
+    static getInstance(): CsszyxCompiler;
+    /**
+     * Initializes the WASM core.
+     *
+     * @returns {Promise<void>} Resolves when WASM is ready.
+     */
+    init(): Promise<void>;
+    /**
+     * Transforms an sz object into Tailwind classes.
+     *
+     * @param {SzObject} sz - The object to transform.
+     * @returns {string} The transformed class string.
+     */
+    transform(sz: SzObject): string;
+    /**
+     * Checks if the WASM core is currently active.
+     *
+     * @returns {boolean} True if WASM is loaded.
+     */
+    isWasmActive(): boolean;
+    /**
+     * Generates a recovery token using WASM or JS fallback.
+     *
+     * @param {object} metadata - Token metadata
+     * @param metadata.component - Component name
+     * @param metadata.filePath - File path source
+     * @param metadata.line - Line number
+     * @param metadata.column - Column number
+     * @param metadata.mode - Build mode (dev/prod)
+     * @param metadata.buildId - Unique build identifier
+     * @returns {string} The generated token
+     */
+    generateRecoveryToken(metadata: {
+        component: string;
+        filePath: string;
+        line: number;
+        column: number;
+        mode: 'csr' | 'dev-only';
+        buildId: string;
+    }): string;
+}
+
+/**
+ * Valid recovery modes for szRecover attribute.
+ */
+type RecoveryMode = 'csr' | 'dev-only';
+/**
+ * Metadata for a recovery token.
+ */
+interface TokenMetadata {
+    /**
+     * The recovery mode ('csr' or 'dev-only')
+     */
+    mode: RecoveryMode;
+    /**
+     * Component name where szRecover is used
+     */
+    component: string;
+    /**
+     * Absolute file path
+     */
+    filePath: string;
+    /**
+     * Line number in source file
+     */
+    line: number;
+    /**
+     * Column number in source file
+     */
+    column: number;
+    /**
+     * Build ID (git hash or timestamp)
+     */
+    buildId: string;
+}
+/**
+ * Generated recovery token with metadata.
+ */
+interface RecoveryToken {
+    /**
+     * The generated token string
+     */
+    token: string;
+    /**
+     * Token metadata
+     */
+    metadata: TokenMetadata;
+}
+/**
+ * Validates if a value is a valid recovery mode.
+ *
+ * @param {unknown} value - The value to validate
+ * @returns {value is RecoveryMode} True if valid recovery mode
+ *
+ * @example
+ * ```typescript
+ * isValidRecoveryMode('csr') // true
+ * isValidRecoveryMode('dev-only') // true
+ * isValidRecoveryMode('invalid') // false
+ * ```
+ */
+declare function isValidRecoveryMode(value: unknown): value is RecoveryMode;
+/**
+ * Generates a cryptographic token for a recovery declaration using WASM.
+ *
+ * @param {TokenMetadata} metadata - Token metadata
+ * @returns {string} The generated token (Base62 format)
+ */
+declare function generateRecoveryToken(metadata: TokenMetadata): string;
+/**
+ * Creates a recovery token with full metadata.
+ *
+ * @param {Omit<TokenMetadata, 'buildId'>} metadata - Token metadata without buildId
+ * @param {string} buildId - Build ID to use
+ * @returns {RecoveryToken} The generated token with metadata
+ *
+ * @example
+ * ```typescript
+ * const recovery = createRecoveryToken({
+ *     mode: 'csr',
+ *     component: 'Button',
+ *     filePath: '/app/Button.tsx',
+ *     line: 10,
+ *     column: 5
+ * }, 'build-123');
+ * ```
+ */
+declare function createRecoveryToken(metadata: Omit<TokenMetadata, 'buildId'>, buildId: string): RecoveryToken;
+/**
+ * Validates szRecover attribute value.
+ *
+ * Ensures the value is a static literal 'csr' or 'dev-only'.
+ * Runtime expressions are not allowed.
+ *
+ * @param {unknown} value - The attribute value to validate
+ * @param {string} componentName - Component name for error messages
+ * @returns {{ valid: boolean; error?: string }} Validation result
+ *
+ * @example
+ * ```typescript
+ * validateSzRecover('csr', 'MyComponent')
+ * // Returns: { valid: true }
+ *
+ * validateSzRecover('invalid', 'MyComponent')
+ * // Returns: { valid: false, error: '...' }
+ * ```
+ */
+declare function validateSzRecover(value: unknown, componentName: string): {
+    valid: boolean;
+    error?: string;
+};
+/**
+ * Injects recovery token into JSX attributes.
+ *
+ * Adds the data-sz-recovery-token attribute with the generated token.
+ *
+ * @param {Record<string, unknown>} attributes - JSX attributes object
+ * @param {string} token - The recovery token to inject
+ * @returns {Record<string, unknown>} Updated attributes with token
+ *
+ * @example
+ * ```typescript
+ * const attrs = { szRecover: 'csr', className: 'foo' };
+ * const updated = injectRecoveryToken(attrs, 'abc123');
+ * // Returns: { szRecover: 'csr', className: 'foo', 'data-sz-recovery-token': 'abc123' }
+ * ```
+ */
+declare function injectRecoveryToken(attributes: Record<string, unknown>, token: string): Record<string, unknown>;
+
+/**
+ * Recovery Manifest Generation.
+ *
+ * This module handles the creation and management of the recovery manifest,
+ * which maps recovery tokens to their metadata for runtime verification.
+ */
+
+/**
+ * Token data stored in the manifest.
+ */
+interface TokenData {
+    /**
+     * Recovery mode ('csr' or 'dev-only')
+     */
+    mode: RecoveryMode;
+    /**
+     * Component name
+     */
+    component: string;
+    /**
+     * File path (relative to project root)
+     */
+    path: string;
+}
+/**
+ * Recovery manifest structure.
+ *
+ * Embedded in the build output as a JSON script tag.
+ */
+interface RecoveryManifest {
+    /**
+     * Build ID (git hash or timestamp)
+     */
+    buildId: string;
+    /**
+     * SHA-256 checksum of the tokens object
+     */
+    checksum: string;
+    /**
+     * Map of token → token data
+     */
+    tokens: Record<string, TokenData>;
+}
+/**
+ * Builder class for creating recovery manifests.
+ */
+declare class ManifestBuilder {
+    private tokens;
+    private buildId;
+    /**
+     * Creates a new manifest builder.
+     *
+     * @param {string} buildId - Build ID (git hash or timestamp)
+     *
+     * @example
+     * ```typescript
+     * const builder = new ManifestBuilder('abc123');
+     * ```
+     */
+    constructor(buildId: string);
+    /**
+     * Adds a token to the manifest.
+     *
+     * @param {string} token - The recovery token
+     * @param {TokenMetadata} metadata - Token metadata
+     *
+     * @example
+     * ```typescript
+     * builder.addToken('a94f1c2e8b3d', {
+     *     mode: 'csr',
+     *     component: 'Button',
+     *     filePath: '/app/Button.tsx',
+     *     line: 10,
+     *     column: 5,
+     *     buildId: 'abc123'
+     * });
+     * ```
+     */
+    addToken(token: string, metadata: TokenMetadata): void;
+    /**
+     * Converts absolute path to relative path.
+     *
+     * @param {string} absolutePath - Absolute file path
+     * @returns {string} Relative path
+     */
+    private toRelativePath;
+    /**
+     * Computes checksum of the tokens object.
+     *
+     * @param {Record<string, TokenData>} tokens - Tokens object
+     * @returns {string} SHA-256 checksum
+     */
+    private computeChecksum;
+    /**
+     * Builds the final recovery manifest.
+     *
+     * @returns {RecoveryManifest} The complete recovery manifest
+     *
+     * @example
+     * ```typescript
+     * const manifest = builder.build();
+     * // Returns: { buildId: 'abc123', checksum: '...', tokens: {...} }
+     * ```
+     */
+    build(): RecoveryManifest;
+    /**
+     * Gets the number of tokens in the manifest.
+     *
+     * @returns {number} Token count
+     */
+    size(): number;
+    /**
+     * Checks if a token exists in the manifest.
+     *
+     * @param {string} token - Token to check
+     * @returns {boolean} True if token exists
+     */
+    hasToken(token: string): boolean;
+    /**
+     * Clears all tokens from the manifest.
+     */
+    clear(): void;
+}
+/**
+ * Serializes a recovery manifest to JSON string.
+ *
+ * @param {RecoveryManifest} manifest - The manifest to serialize
+ * @param {boolean} pretty - Whether to pretty-print the JSON
+ * @returns {string} JSON string
+ *
+ * @example
+ * ```typescript
+ * const json = serializeManifest(manifest, true);
+ * ```
+ */
+declare function serializeManifest(manifest: RecoveryManifest, pretty?: boolean): string;
+/**
+ * Parses a recovery manifest from JSON string.
+ *
+ * @param {string} json - JSON string to parse
+ * @returns {RecoveryManifest} Parsed manifest
+ *
+ * @example
+ * ```typescript
+ * const manifest = parseManifest(jsonString);
+ * ```
+ */
+declare function parseManifest(json: string): RecoveryManifest;
+/**
+ * Validates a recovery manifest structure.
+ *
+ * @param {unknown} manifest - Manifest to validate
+ * @returns {{ valid: boolean; error?: string }} Validation result
+ *
+ * @example
+ * ```typescript
+ * const result = validateManifest(manifest);
+ * if (!result.valid) {
+ *     console.error(result.error);
+ * }
+ * ```
+ */
+declare function validateManifest(manifest: unknown): {
+    valid: boolean;
+    error?: string;
+};
+
+/**
+ * Property Type System for CSS Variable Auto-Compile.
+ *
+ * Maps every sz property to its CSS variable value generation strategy,
+ * determining how dynamic values should be converted to inline style values.
+ *
+ * @module @csszyx/compiler/property-types
+ */
+/**
+ * Property categories for CSS variable value generation.
+ * Each category determines how a dynamic runtime value is transformed
+ * into a CSS custom property value.
+ */
+declare enum PropertyCategory {
+    /** Spacing props (p, m, gap, inset, top, etc.) → calc(N * var(--spacing)) */
+    SPACING = 0,
+    /** Color props (bg, color, borderColor, etc.) → __szColorVar(value) */
+    COLOR = 1,
+    /** Fraction props (w, h when value like '1/2') → percentage */
+    FRACTION = 2,
+    /** Unitless number props (z, order, columns, opacity) → direct number */
+    UNITLESS = 3,
+    /** Angle props (rotate, skew) → Ndeg */
+    ANGLE = 4,
+    /** Duration props (duration, delay) → Nms */
+    DURATION = 5,
+    /** Already has [] brackets → pass-through */
+    ARBITRARY = 6,
+    /** Unknown → direct pass-through */
+    PASSTHROUGH = 7
+}
+/**
+ * Maps sz property names to their PropertyCategory.
+ * Covers all ~200 properties from PROPERTY_MAP in transform.ts.
+ */
+declare const PROPERTY_CATEGORY_MAP: Record<string, PropertyCategory>;
+/**
+ * Returns the PropertyCategory for a given sz property name.
+ * Falls back to PASSTHROUGH for unknown properties.
+ * @param property - the sz property name to look up
+ * @returns the PropertyCategory for the property, or PASSTHROUGH if unknown
+ */
+declare function getPropertyCategory(property: string): PropertyCategory;
+/**
+ * Set of all properties that are color-type.
+ * Used for quick lookup to determine if __szColorVar import is needed.
+ */
+declare const COLOR_PROPERTIES: Set<string>;
+/**
+ * Generates the CSS variable naming convention for a property.
+ * @param property - the sz property name
+ * @param variantPrefix - variant chain (e.g., 'hover', 'md')
+ * @returns CSS variable name like '--_sz-p' or '--_sz-hover-bg'
+ */
+declare function getCSSVariableName(property: string, variantPrefix?: string): string;
+
+/**
+ * CSS Variable Hoisting — deduplicates identical CSS variables across sibling elements.
+ *
+ * When multiple JSX elements in the same component share the same CSS variable
+ * name and value, the variable is hoisted to the nearest common ancestor JSX element.
+ *
+ * Hoisting rule: ALWAYS safe within the same Babel transform scope.
+ * Inner inline styles override inherited CSS variable values due to CSS cascade.
+ *
+ * @module @csszyx/compiler/hoisting
+ */
+
+/**
+ * Tracks a CSS variable usage on a specific JSX element.
+ */
+interface CSSVarUsage {
+    /** The JSX element AST node */
+    element: t.JSXOpeningElement;
+    /** CSS variable name, e.g., --_sz-p */
+    varName: string;
+    /** The style value AST expression */
+    valueExpr: t.Expression;
+    /** Serialized value for comparison (null if dynamic/non-comparable) */
+    serializedValue: string | null;
+}
+/**
+ * Hoists CSS variables to common ancestor elements when multiple siblings
+ * share the same variable name and value.
+ *
+ * @param usages - All CSS variable usages collected during transform
+ * @param parentMap - Map of child-to-parent relationships in the AST
+ */
+declare function hoistCSSVariables(usages: CSSVarUsage[], parentMap: Map<t.Node, t.Node>): void;
+/**
+ * Builds a parent map for AST nodes (child-to-parent relationship).
+ * Used by hoistCSSVariables to find LCA.
+ *
+ * @param ast - The root AST node to traverse
+ * @returns A map of child-to-parent node relationships
+ */
+declare function buildParentMap(ast: t.Node): Map<t.Node, t.Node>;
+
+/**
+ * @csszyx/compiler - TypeScript type definitions for sz prop.
+ *
+ * This module provides comprehensive type definitions for the sz prop
+ * to enable IntelliSense, autocompletion, and type safety.
+ *
+ * @module @csszyx/compiler/types
+ */
+/** Tailwind spacing scale values (0-96 + special values) */
+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;
+/** Spacing value that can be scale, keyword, or arbitrary */
+type SpacingValue = SpacingScale | 'px' | 'auto' | (number & {}) | (string & {});
+/** Negative spacing value */
+type NegativeSpacingValue = SpacingValue | number;
+/** Tailwind color names */
+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';
+/** Tailwind color shades */
+type ColorShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
+/** Color value (string-based) */
+type ColorValue = 'inherit' | 'current' | 'transparent' | 'black' | 'white' | `${ColorName}-${ColorShade}` | (string & {});
+/** Color object with opacity */
+interface ColorObjectValue {
+    color: ColorValue;
+    op?: number | (string & {});
+}
+/** Union type for all color properties */
+type ColorPropValue = ColorValue | ColorObjectValue;
+/** Container size names */
+type ContainerSize = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl';
+/** Fraction values */
+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';
+/** Border radius keywords */
+type BorderRadiusValue = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' | true | (string & {});
+/** Shadow keywords */
+type ShadowValue = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'inner' | 'none' | true | (string & {});
+/**
+ *
+ */
+interface LayoutProps {
+    /** @see https://tailwindcss.com/docs/aspect-ratio */
+    aspect?: 'auto' | 'square' | 'video' | (string & {});
+    /** @see https://tailwindcss.com/docs/columns */
+    columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto' | ContainerSize | (string & {});
+    /** @see https://tailwindcss.com/docs/break-after */
+    breakAfter?: 'auto' | 'avoid' | 'all' | 'avoid-page' | 'page' | 'left' | 'right' | 'column';
+    /** @see https://tailwindcss.com/docs/break-before */
+    breakBefore?: 'auto' | 'avoid' | 'all' | 'avoid-page' | 'page' | 'left' | 'right' | 'column';
+    /** @see https://tailwindcss.com/docs/break-inside */
+    breakInside?: 'auto' | 'avoid' | 'avoid-page' | 'avoid-column';
+    /** @see https://tailwindcss.com/docs/box-decoration-break */
+    boxDecoration?: 'slice' | 'clone';
+    /** @see https://tailwindcss.com/docs/box-sizing */
+    box?: 'border' | 'content';
+    /** @see https://tailwindcss.com/docs/display */
+    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';
+    /** Boolean sugar for display: block */
+    block?: boolean;
+    /** Boolean sugar for display: inline-block */
+    inlineBlock?: boolean;
+    /** Boolean sugar for display: inline */
+    inline?: boolean;
+    /** Boolean sugar for display: flex */
+    flex?: boolean | 'auto' | 'initial' | 'none' | 1 | (string & {});
+    /** Boolean sugar for display: inline-flex */
+    inlineFlex?: boolean;
+    /** Boolean sugar for display: grid */
+    grid?: boolean;
+    /** Boolean sugar for display: inline-grid */
+    inlineGrid?: boolean;
+    /** Boolean sugar for display: table */
+    table?: boolean;
+    /** Boolean sugar for display: table-row */
+    tableRow?: boolean;
+    /** Boolean sugar for display: table-cell */
+    tableCell?: boolean;
+    /** Boolean sugar for display: flow-root */
+    flowRoot?: boolean;
+    /** Boolean sugar for display: list-item */
+    listItem?: boolean;
+    /** Boolean sugar for display: contents */
+    contents?: boolean;
+    /** Boolean sugar for display: hidden/none */
+    hidden?: boolean;
+    /** Boolean sugar for sr-only */
+    srOnly?: boolean;
+    /** Boolean sugar for not-sr-only */
+    notSrOnly?: boolean;
+    /** Boolean sugar for container */
+    container?: boolean;
+    /** Boolean sugar for prose */
+    prose?: boolean;
+    /** @see https://tailwindcss.com/docs/float */
+    float?: 'right' | 'left' | 'start' | 'end' | 'none';
+    /** @see https://tailwindcss.com/docs/clear */
+    clear?: 'left' | 'right' | 'both' | 'none' | 'start' | 'end';
+    /** @see https://tailwindcss.com/docs/isolation */
+    isolation?: 'isolate' | 'auto';
+    isolate?: boolean;
+    /** @see https://tailwindcss.com/docs/object-fit */
+    objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    /** @see https://tailwindcss.com/docs/object-position */
+    objectPos?: 'bottom' | 'center' | 'left' | 'left-bottom' | 'left-top' | 'right' | 'right-bottom' | 'right-top' | 'top' | (string & {});
+    /** @see https://tailwindcss.com/docs/overflow */
+    overflow?: 'auto' | 'hidden' | 'clip' | 'visible' | 'scroll';
+    overflowX?: 'auto' | 'hidden' | 'clip' | 'visible' | 'scroll';
+    overflowY?: 'auto' | 'hidden' | 'clip' | 'visible' | 'scroll';
+    /** @see https://tailwindcss.com/docs/overscroll-behavior */
+    overscroll?: 'auto' | 'contain' | 'none';
+    overscrollX?: 'auto' | 'contain' | 'none';
+    overscrollY?: 'auto' | 'contain' | 'none';
+    /** @see https://tailwindcss.com/docs/position */
+    position?: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky';
+    static?: boolean;
+    fixed?: boolean;
+    absolute?: boolean;
+    relative?: boolean;
+    sticky?: boolean;
+    /** @see https://tailwindcss.com/docs/top-right-bottom-left */
+    inset?: SpacingValue;
+    insetX?: SpacingValue;
+    insetY?: SpacingValue;
+    top?: NegativeSpacingValue;
+    right?: NegativeSpacingValue;
+    bottom?: NegativeSpacingValue;
+    left?: NegativeSpacingValue;
+    start?: SpacingValue;
+    end?: SpacingValue;
+    /** @see https://tailwindcss.com/docs/visibility */
+    visibility?: 'visible' | 'hidden' | 'collapse';
+    visible?: boolean;
+    invisible?: boolean;
+    collapse?: boolean;
+    /** @see https://tailwindcss.com/docs/z-index */
+    z?: 'auto' | 0 | 10 | 20 | 30 | 40 | 50 | number | (string & {});
+}
+/**
+ *
+ */
+interface FlexboxGridProps {
+    /** @see https://tailwindcss.com/docs/flex-basis */
+    basis?: SpacingScale | 'px' | 'auto' | 'full' | FractionValue | ContainerSize | (string & {});
+    /** @see https://tailwindcss.com/docs/flex-direction */
+    flexDir?: 'row' | 'row-reverse' | 'col' | 'col-reverse';
+    /** @see https://tailwindcss.com/docs/flex-wrap */
+    flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
+    /** @see https://tailwindcss.com/docs/flex-grow */
+    grow?: boolean | 0 | number | (string & {});
+    /** @see https://tailwindcss.com/docs/flex-shrink */
+    shrink?: boolean | 0 | number | (string & {});
+    /** @see https://tailwindcss.com/docs/order */
+    order?: 'first' | 'last' | 'none' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | number | (string & {});
+    /** @see https://tailwindcss.com/docs/grid-template-columns */
+    gridCols?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none' | 'subgrid' | (string & {});
+    /** @see https://tailwindcss.com/docs/grid-template-rows */
+    gridRows?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none' | 'subgrid' | (string & {});
+    /** @see https://tailwindcss.com/docs/grid-column */
+    col?: 'auto' | number | (string & {});
+    colSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'full' | number | (string & {});
+    colStart?: 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | number | (string & {});
+    colEnd?: 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | number | (string & {});
+    /** @see https://tailwindcss.com/docs/grid-row */
+    row?: 'auto' | number | (string & {});
+    rowSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'full' | number | (string & {});
+    rowStart?: 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | number | (string & {});
+    rowEnd?: 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | number | (string & {});
+    /** @see https://tailwindcss.com/docs/grid-auto-flow */
+    gridFlow?: 'row' | 'col' | 'dense' | 'row-dense' | 'col-dense';
+    /** @see https://tailwindcss.com/docs/grid-auto-columns */
+    autoCols?: 'auto' | 'min' | 'max' | 'fr' | (string & {});
+    /** @see https://tailwindcss.com/docs/grid-auto-rows */
+    autoRows?: 'auto' | 'min' | 'max' | 'fr' | (string & {});
+    /** @see https://tailwindcss.com/docs/gap */
+    gap?: SpacingValue;
+    gapX?: SpacingValue;
+    gapY?: SpacingValue;
+    /** @see https://tailwindcss.com/docs/justify-content */
+    justify?: 'normal' | 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch' | 'baseline' | 'safe-center' | 'safe-end';
+    /** @see https://tailwindcss.com/docs/justify-items */
+    justifyItems?: 'start' | 'end' | 'center' | 'stretch' | 'normal' | 'safe-center' | 'safe-end';
+    /** @see https://tailwindcss.com/docs/justify-self */
+    justifySelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch' | 'safe-center' | 'safe-end';
+    /** @see https://tailwindcss.com/docs/align-items */
+    items?: 'start' | 'end' | 'center' | 'baseline' | 'stretch' | 'safe-center' | 'safe-end' | (string & {});
+    /** @see https://tailwindcss.com/docs/align-self */
+    self?: 'auto' | 'start' | 'end' | 'center' | 'stretch' | 'baseline' | 'safe-center' | 'safe-end' | (string & {});
+    /** @see https://tailwindcss.com/docs/place-content */
+    placeContent?: 'center' | 'start' | 'end' | 'between' | 'around' | 'evenly' | 'baseline' | 'stretch' | 'safe-center' | 'safe-end';
+    /** @see https://tailwindcss.com/docs/place-items */
+    placeItems?: 'start' | 'end' | 'center' | 'baseline' | 'stretch' | 'safe-center' | 'safe-end';
+    /** @see https://tailwindcss.com/docs/place-self */
+    placeSelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch' | 'safe-center' | 'safe-end';
+}
+/**
+ *
+ */
+interface SpacingProps {
+    /** Padding - all sides */
+    p?: SpacingValue;
+    /** Padding - X axis (left/right) */
+    px?: SpacingValue;
+    /** Padding - Y axis (top/bottom) */
+    py?: SpacingValue;
+    /** Padding - top */
+    pt?: SpacingValue;
+    /** Padding - right */
+    pr?: SpacingValue;
+    /** Padding - bottom */
+    pb?: SpacingValue;
+    /** Padding - left */
+    pl?: SpacingValue;
+    /** Padding - inline start (logical) */
+    ps?: SpacingValue;
+    /** Padding - inline end (logical) */
+    pe?: SpacingValue;
+    /** Margin - all sides */
+    m?: NegativeSpacingValue;
+    /** Margin - X axis (left/right) */
+    mx?: NegativeSpacingValue;
+    /** Margin - Y axis (top/bottom) */
+    my?: NegativeSpacingValue;
+    /** Margin - top */
+    mt?: NegativeSpacingValue;
+    /** Margin - right */
+    mr?: NegativeSpacingValue;
+    /** Margin - bottom */
+    mb?: NegativeSpacingValue;
+    /** Margin - left */
+    ml?: NegativeSpacingValue;
+    /** Margin - inline start (logical) */
+    ms?: NegativeSpacingValue;
+    /** Margin - inline end (logical) */
+    me?: NegativeSpacingValue;
+    /** Space between child elements - X axis */
+    spaceX?: NegativeSpacingValue;
+    /** Space between child elements - Y axis */
+    spaceY?: NegativeSpacingValue;
+    /** Reverse space-x direction */
+    spaceXReverse?: boolean;
+    /** Reverse space-y direction */
+    spaceYReverse?: boolean;
+}
+/**
+ *
+ */
+interface SizingProps {
+    /** @see https://tailwindcss.com/docs/width */
+    w?: SpacingScale | 'px' | 'auto' | 'full' | 'screen' | 'svw' | 'lvw' | 'dvw' | 'min' | 'max' | 'fit' | FractionValue | (string & {});
+    /** @see https://tailwindcss.com/docs/min-width */
+    minW?: SpacingScale | 'px' | 'full' | 'min' | 'max' | 'fit' | FractionValue | (string & {});
+    /** @see https://tailwindcss.com/docs/max-width */
+    maxW?: SpacingScale | 'px' | 'full' | 'none' | 'prose' | 'min' | 'max' | 'fit' | ContainerSize | 'screen-sm' | 'screen-md' | 'screen-lg' | 'screen-xl' | 'screen-2xl' | FractionValue | (string & {});
+    /** @see https://tailwindcss.com/docs/height */
+    h?: SpacingScale | 'px' | 'auto' | 'full' | 'screen' | 'svh' | 'lvh' | 'dvh' | 'min' | 'max' | 'fit' | FractionValue | (string & {});
+    /** @see https://tailwindcss.com/docs/min-height */
+    minH?: SpacingScale | 'px' | 'full' | 'screen' | 'svh' | 'lvh' | 'dvh' | 'min' | 'max' | 'fit' | (string & {});
+    /** @see https://tailwindcss.com/docs/max-height */
+    maxH?: SpacingScale | 'px' | 'full' | 'screen' | 'svh' | 'lvh' | 'dvh' | 'min' | 'max' | 'fit' | (string & {});
+    /** @see https://tailwindcss.com/docs/size */
+    size?: SpacingScale | 'px' | 'auto' | 'full' | 'min' | 'max' | 'fit' | (string & {});
+}
+/**
+ *
+ */
+interface TypographyProps {
+    /** @see https://tailwindcss.com/docs/font-size */
+    text?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl' | 'left' | 'center' | 'right' | 'justify' | 'start' | 'end' | ColorPropValue | (string & {});
+    /** @see https://tailwindcss.com/docs/font-smoothing */
+    antialiased?: boolean;
+    subpixelAntialiased?: boolean;
+    /** @see https://tailwindcss.com/docs/font-style */
+    italic?: boolean;
+    notItalic?: boolean;
+    /** @see https://tailwindcss.com/docs/font-weight — also accepts font-family keywords */
+    font?: 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black' | 'sans' | 'serif' | 'mono' | (string & {});
+    /** Explicit font-weight key. Use `font` for the short form */
+    fontWeight?: 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | (string & {});
+    /** Explicit font-family key. Use `font` for the short form */
+    fontFamily?: 'sans' | 'serif' | 'mono' | (string & {});
+    /** @see https://tailwindcss.com/docs/font-stretch */
+    fontStretch?: 'ultra-condensed' | 'extra-condensed' | 'condensed' | 'semi-condensed' | 'normal' | 'semi-expanded' | 'expanded' | 'extra-expanded' | 'ultra-expanded' | (string & {});
+    /** @see https://tailwindcss.com/docs/font-variant-numeric */
+    ordinal?: boolean;
+    slashedZero?: boolean;
+    liningNums?: boolean;
+    oldstyleNums?: boolean;
+    proportionalNums?: boolean;
+    tabularNums?: boolean;
+    diagonalFractions?: boolean;
+    stackedFractions?: boolean;
+    /** @see https://tailwindcss.com/docs/letter-spacing */
+    tracking?: 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest' | (string & {});
+    /** @see https://tailwindcss.com/docs/line-clamp */
+    lineClamp?: 1 | 2 | 3 | 4 | 5 | 6 | 'none' | number | (string & {});
+    /** @see https://tailwindcss.com/docs/line-height */
+    leading?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose' | (string & {});
+    /** @see https://tailwindcss.com/docs/list-style-image */
+    listImg?: 'none' | (string & {});
+    /** @see https://tailwindcss.com/docs/list-style-position */
+    listPos?: 'inside' | 'outside';
+    /** @see https://tailwindcss.com/docs/list-style-type */
+    list?: 'none' | 'disc' | 'decimal' | (string & {});
+    /** @see https://tailwindcss.com/docs/text-align */
+    textAlign?: 'left' | 'center' | 'right' | 'justify' | 'start' | 'end';
+    /** @see https://tailwindcss.com/docs/text-color */
+    color?: ColorPropValue;
+    /** @see https://tailwindcss.com/docs/text-decoration */
+    underline?: boolean;
+    overline?: boolean;
+    lineThrough?: boolean;
+    noUnderline?: boolean;
+    /** String-keyed text-decoration prop for arbitrary values */
+    decoration?: 'underline' | 'overline' | 'line-through' | 'none' | (string & {});
+    /** @see https://tailwindcss.com/docs/text-decoration-color */
+    decorationColor?: ColorPropValue;
+    /** @see https://tailwindcss.com/docs/text-decoration-style */
+    decorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy';
+    /** @see https://tailwindcss.com/docs/text-decoration-thickness */
+    decorationThickness?: 'auto' | 'from-font' | 0 | 1 | 2 | 4 | 8 | (string & {});
+    /** @see https://tailwindcss.com/docs/text-underline-offset */
+    underlineOffset?: 'auto' | 0 | 1 | 2 | 4 | 8 | (string & {});
+    /** @see https://tailwindcss.com/docs/text-transform */
+    uppercase?: boolean;
+    lowercase?: boolean;
+    capitalize?: boolean;
+    normalCase?: boolean;
+    /** @see https://tailwindcss.com/docs/text-overflow */
+    truncate?: boolean;
+    textEllipsis?: boolean;
+    textClip?: boolean;
+    /** @see https://tailwindcss.com/docs/text-wrap */
+    textWrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty';
+    /** @see https://tailwindcss.com/docs/overflow-wrap (v4.1+) */
+    wrap?: 'normal' | 'break-word' | 'anywhere';
+    /** @see https://tailwindcss.com/docs/text-indent */
+    indent?: SpacingValue;
+    /** @see https://tailwindcss.com/docs/vertical-align */
+    align?: 'baseline' | 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom' | 'sub' | 'super' | (string & {});
+    /** @see https://tailwindcss.com/docs/whitespace */
+    whitespace?: 'normal' | 'nowrap' | 'pre' | 'pre-line' | 'pre-wrap' | 'break-spaces';
+    /** @see https://tailwindcss.com/docs/word-break */
+    break?: 'normal' | 'all' | 'keep';
+    /** @see https://tailwindcss.com/docs/hyphens */
+    hyphens?: 'none' | 'manual' | 'auto';
+    /** @see https://tailwindcss.com/docs/content — also handles align-content */
+    content?: 'none' | 'normal' | 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'baseline' | 'stretch' | (string & {});
+    /** @see https://tailwindcss.com/docs/forced-color-adjust */
+    forcedColorAdjust?: 'auto' | 'none';
+}
+/**
+ *
+ */
+interface BgImgGradient {
+    gradient: 'linear' | 'radial' | 'conic';
+    dir?: string | number;
+    in?: 'srgb' | 'hsl' | 'oklab' | 'oklch' | 'longer' | 'shorter' | 'increasing' | 'decreasing';
+}
+/** Background-related sz prop definitions. */
+interface BackgroundProps {
+    /** @see https://tailwindcss.com/docs/background-attachment */
+    bgAttach?: 'fixed' | 'local' | 'scroll';
+    /** @see https://tailwindcss.com/docs/background-clip */
+    bgClip?: 'border' | 'padding' | 'content' | 'text';
+    /** @see https://tailwindcss.com/docs/background-color */
+    bg?: ColorPropValue | (string & {});
+    /** @see https://tailwindcss.com/docs/background-origin */
+    bgOrigin?: 'border' | 'padding' | 'content';
+    /** @see https://tailwindcss.com/docs/background-position */
+    bgPos?: 'top-left' | 'top' | 'top-right' | 'left' | 'center' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right' | (string & {});
+    /** @see https://tailwindcss.com/docs/background-repeat */
+    bgRepeat?: 'repeat' | 'no-repeat' | 'repeat-x' | 'repeat-y' | 'round' | 'space';
+    /** @see https://tailwindcss.com/docs/background-size */
+    bgSize?: 'auto' | 'cover' | 'contain' | (string & {});
+    /** @see https://tailwindcss.com/docs/background-image */
+    bgImg?: 'none' | BgImgGradient | (string & {});
+    /** @see https://tailwindcss.com/docs/gradient-color-stops */
+    from?: ColorPropValue;
+    via?: ColorPropValue;
+    to?: ColorPropValue;
+    /** @see https://tailwindcss.com/docs/gradient-color-stops (position) */
+    fromPos?: number | (string & {});
+    viaPos?: number | (string & {});
+    toPos?: number | (string & {});
+}
+/**
+ *
+ */
+interface BorderProps {
+    /** @see https://tailwindcss.com/docs/border-radius */
+    rounded?: BorderRadiusValue;
+    roundedT?: BorderRadiusValue;
+    roundedR?: BorderRadiusValue;
+    roundedB?: BorderRadiusValue;
+    roundedL?: BorderRadiusValue;
+    roundedTl?: BorderRadiusValue;
+    roundedTr?: BorderRadiusValue;
+    roundedBl?: BorderRadiusValue;
+    roundedBr?: BorderRadiusValue;
+    roundedS?: BorderRadiusValue;
+    roundedE?: BorderRadiusValue;
+    roundedSs?: BorderRadiusValue;
+    roundedSe?: BorderRadiusValue;
+    roundedEs?: BorderRadiusValue;
+    roundedEe?: BorderRadiusValue;
+    /** @see https://tailwindcss.com/docs/border-width */
+    border?: boolean | 0 | 2 | 4 | 8 | ColorValue | (string & {});
+    borderX?: boolean | 0 | 2 | 4 | 8 | (string & {});
+    borderY?: boolean | 0 | 2 | 4 | 8 | (string & {});
+    borderT?: boolean | 0 | 2 | 4 | 8 | (string & {});
+    borderR?: boolean | 0 | 2 | 4 | 8 | (string & {});
+    borderB?: boolean | 0 | 2 | 4 | 8 | (string & {});
+    borderL?: boolean | 0 | 2 | 4 | 8 | (string & {});
+    borderS?: boolean | 0 | 2 | 4 | 8 | (string & {});
+    borderE?: boolean | 0 | 2 | 4 | 8 | (string & {});
+    /** @see https://tailwindcss.com/docs/border-color */
+    borderColor?: ColorPropValue;
+    /** @see https://tailwindcss.com/docs/border-style */
+    borderStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'hidden' | 'none';
+    /** @see https://tailwindcss.com/docs/divide-width */
+    divideX?: boolean | 0 | 2 | 4 | 8 | 'reverse' | (string & {});
+    divideY?: boolean | 0 | 2 | 4 | 8 | 'reverse' | (string & {});
+    /** @see https://tailwindcss.com/docs/divide-color */
+    divideColor?: ColorPropValue;
+    /** @see https://tailwindcss.com/docs/divide-style */
+    divideStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'none';
+    /** Reverse divide-x direction */
+    divideXReverse?: boolean;
+    /** Reverse divide-y direction */
+    divideYReverse?: boolean;
+    /** @see https://tailwindcss.com/docs/outline-width */
+    outline?: boolean | 'none' | 0 | 1 | 2 | 4 | 8 | (string & {});
+    /** @see https://tailwindcss.com/docs/outline-color */
+    outlineColor?: ColorPropValue;
+    /** @see https://tailwindcss.com/docs/outline-style */
+    outlineStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'none';
+    /** @see https://tailwindcss.com/docs/outline-offset */
+    outlineOffset?: 0 | 1 | 2 | 4 | 8 | (string & {});
+    /** @see https://tailwindcss.com/docs/ring-width */
+    ring?: boolean | 0 | 1 | 2 | 4 | 8 | 'inset' | (string & {});
+    /** @see https://tailwindcss.com/docs/ring-color */
+    ringColor?: ColorPropValue;
+    /** @see https://tailwindcss.com/docs/ring-offset-width */
+    ringOffset?: 0 | 1 | 2 | 4 | 8 | (string & {});
+    /** @see https://tailwindcss.com/docs/ring-offset-color */
+    ringOffsetColor?: ColorPropValue;
+}
+/**
+ *
+ */
+interface EffectsProps {
+    /** @see https://tailwindcss.com/docs/box-shadow */
+    shadow?: ShadowValue;
+    /** @see https://tailwindcss.com/docs/box-shadow-color */
+    shadowColor?: ColorPropValue;
+    /** Text shadow */
+    textShadow?: ShadowValue;
+    /** Text shadow color */
+    textShadowColor?: ColorPropValue;
+    /** Inset shadow */
+    insetShadow?: ShadowValue;
+    /** Inset shadow color */
+    insetShadowColor?: ColorPropValue;
+    /** Drop shadow color */
+    dropShadowColor?: ColorPropValue;
+    /** @see https://tailwindcss.com/docs/opacity */
+    opacity?: 0 | 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100 | number | (string & {});
+    /** @see https://tailwindcss.com/docs/mix-blend-mode */
+    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';
+    /** @see https://tailwindcss.com/docs/background-blend-mode */
+    bgBlend?: 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity';
+}
+/**
+ *
+ */
+interface FilterProps {
+    /** @see https://tailwindcss.com/docs/blur */
+    blur?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | true | (string & {});
+    /** @see https://tailwindcss.com/docs/brightness */
+    brightness?: 0 | 50 | 75 | 90 | 95 | 100 | 105 | 110 | 125 | 150 | 200 | number | (string & {});
+    /** @see https://tailwindcss.com/docs/contrast */
+    contrast?: 0 | 50 | 75 | 100 | 125 | 150 | 200 | number | (string & {});
+    /** @see https://tailwindcss.com/docs/drop-shadow */
+    dropShadow?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'none' | true | (string & {});
+    /** @see https://tailwindcss.com/docs/grayscale */
+    grayscale?: boolean | 0 | (string & {});
+    /** @see https://tailwindcss.com/docs/hue-rotate */
+    hueRotate?: 0 | 15 | 30 | 60 | 90 | 180 | number | (string & {});
+    /** @see https://tailwindcss.com/docs/invert */
+    invert?: boolean | 0 | (string & {});
+    /** @see https://tailwindcss.com/docs/saturate */
+    saturate?: 0 | 50 | 100 | 150 | 200 | number | (string & {});
+    /** @see https://tailwindcss.com/docs/sepia */
+    sepia?: boolean | 0 | (string & {});
+    /** @see https://tailwindcss.com/docs/backdrop-blur */
+    backdropBlur?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | true | (string & {});
+    /** @see https://tailwindcss.com/docs/backdrop-brightness */
+    backdropBrightness?: 0 | 50 | 75 | 90 | 95 | 100 | 105 | 110 | 125 | 150 | 200 | number | (string & {});
+    /** @see https://tailwindcss.com/docs/backdrop-contrast */
+    backdropContrast?: 0 | 50 | 75 | 100 | 125 | 150 | 200 | number | (string & {});
+    /** @see https://tailwindcss.com/docs/backdrop-grayscale */
+    backdropGrayscale?: boolean | 0 | (string & {});
+    /** @see https://tailwindcss.com/docs/backdrop-hue-rotate */
+    backdropHueRotate?: 0 | 15 | 30 | 60 | 90 | 180 | number | (string & {});
+    /** @see https://tailwindcss.com/docs/backdrop-invert */
+    backdropInvert?: boolean | 0 | (string & {});
+    /** @see https://tailwindcss.com/docs/backdrop-opacity */
+    backdropOpacity?: 0 | 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100 | number | (string & {});
+    /** @see https://tailwindcss.com/docs/backdrop-saturate */
+    backdropSaturate?: 0 | 50 | 100 | 150 | 200 | number | (string & {});
+    /** @see https://tailwindcss.com/docs/backdrop-sepia */
+    backdropSepia?: boolean | 0 | (string & {});
+}
+/**
+ *
+ */
+interface TransformProps {
+    /** @see https://tailwindcss.com/docs/scale */
+    scale?: 0 | 50 | 75 | 90 | 95 | 100 | 105 | 110 | 125 | 150 | 200 | number | (string & {});
+    scaleX?: TransformProps['scale'];
+    scaleY?: TransformProps['scale'];
+    /** Boolean sugar for 3D scale */
+    scale3d?: boolean;
+    /** @see https://tailwindcss.com/docs/rotate */
+    rotate?: 0 | 1 | 2 | 3 | 6 | 12 | 45 | 90 | 180 | number | (string & {});
+    /** Boolean sugar for 3D rotate */
+    rotate3d?: boolean;
+    /** @see https://tailwindcss.com/docs/translate */
+    translateX?: SpacingValue | FractionValue;
+    translateY?: SpacingValue | FractionValue;
+    /** Boolean sugar for 3D translate */
+    translate3d?: boolean;
+    /** @see https://tailwindcss.com/docs/skew */
+    skewX?: 0 | 1 | 2 | 3 | 6 | 12 | number | (string & {});
+    skewY?: 0 | 1 | 2 | 3 | 6 | 12 | number | (string & {});
+    /** @see https://tailwindcss.com/docs/transform-origin */
+    origin?: 'center' | 'top' | 'top-right' | 'right' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left' | 'top-left' | (string & {});
+    /** Transform rendering hints */
+    transformGpu?: boolean;
+    transformCpu?: boolean;
+    transformNone?: boolean;
+    /** @see https://tailwindcss.com/docs/perspective */
+    perspective?: 'none' | (string & {});
+    perspectiveOrigin?: (string & {});
+    /** @see https://tailwindcss.com/docs/backface-visibility */
+    backface?: 'visible' | 'hidden';
+}
+/**
+ *
+ */
+interface TransitionAnimationProps {
+    /** @see https://tailwindcss.com/docs/transition-property */
+    transition?: boolean | 'none' | 'all' | 'colors' | 'opacity' | 'shadow' | 'transform' | (string & {});
+    /** @see https://tailwindcss.com/docs/transition-duration */
+    duration?: 0 | 75 | 100 | 150 | 200 | 300 | 500 | 700 | 1000 | number | (string & {});
+    /** @see https://tailwindcss.com/docs/transition-timing-function */
+    ease?: 'linear' | 'in' | 'out' | 'in-out' | (string & {});
+    /** @see https://tailwindcss.com/docs/transition-delay */
+    delay?: 0 | 75 | 100 | 150 | 200 | 300 | 500 | 700 | 1000 | number | (string & {});
+    /** @see https://tailwindcss.com/docs/animation */
+    animate?: 'none' | 'spin' | 'ping' | 'pulse' | 'bounce' | (string & {});
+}
+/**
+ *
+ */
+interface InteractivityProps {
+    /** @see https://tailwindcss.com/docs/accent-color */
+    accent?: 'auto' | ColorPropValue;
+    /** @see https://tailwindcss.com/docs/appearance */
+    appearance?: 'none' | 'auto';
+    /** @see https://tailwindcss.com/docs/cursor */
+    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 & {});
+    /** @see https://tailwindcss.com/docs/caret-color */
+    caret?: 'auto' | ColorPropValue;
+    /** @see https://tailwindcss.com/docs/pointer-events */
+    pointerEvents?: 'none' | 'auto';
+    /** @see https://tailwindcss.com/docs/resize */
+    resize?: 'none' | 'y' | 'x' | boolean;
+    /** @see https://tailwindcss.com/docs/scroll-behavior */
+    scroll?: 'auto' | 'smooth';
+    /** @see https://tailwindcss.com/docs/scroll-margin */
+    scrollM?: SpacingValue;
+    scrollMx?: SpacingValue;
+    scrollMy?: SpacingValue;
+    scrollMt?: SpacingValue;
+    scrollMr?: SpacingValue;
+    scrollMb?: SpacingValue;
+    scrollMl?: SpacingValue;
+    scrollMs?: SpacingValue;
+    scrollMe?: SpacingValue;
+    /** @see https://tailwindcss.com/docs/scroll-padding */
+    scrollP?: SpacingValue;
+    scrollPx?: SpacingValue;
+    scrollPy?: SpacingValue;
+    scrollPt?: SpacingValue;
+    scrollPr?: SpacingValue;
+    scrollPb?: SpacingValue;
+    scrollPl?: SpacingValue;
+    scrollPs?: SpacingValue;
+    scrollPe?: SpacingValue;
+    /** @see https://tailwindcss.com/docs/scroll-snap-align */
+    snapAlign?: 'start' | 'end' | 'center' | 'align-none';
+    /** @see https://tailwindcss.com/docs/scroll-snap-stop */
+    snapStop?: 'normal' | 'always';
+    /** @see https://tailwindcss.com/docs/scroll-snap-type */
+    snapType?: 'none' | 'x' | 'y' | 'both' | 'mandatory' | 'proximity';
+    /** @see https://tailwindcss.com/docs/touch-action */
+    touch?: 'auto' | 'none' | 'pan-x' | 'pan-left' | 'pan-right' | 'pan-y' | 'pan-up' | 'pan-down' | 'pinch-zoom' | 'manipulation';
+    /** @see https://tailwindcss.com/docs/user-select */
+    select?: 'none' | 'text' | 'all' | 'auto';
+    /** @see https://tailwindcss.com/docs/will-change */
+    willChange?: 'auto' | 'scroll' | 'contents' | 'transform' | (string & {});
+}
+/**
+ *
+ */
+interface SvgProps {
+    /** @see https://tailwindcss.com/docs/fill */
+    fill?: 'none' | 'current' | ColorPropValue;
+    /** @see https://tailwindcss.com/docs/stroke */
+    stroke?: 'none' | 'current' | ColorPropValue;
+    /** @see https://tailwindcss.com/docs/stroke-width */
+    strokeWidth?: 0 | 1 | 2 | number | (string & {});
+}
+/**
+ *
+ */
+interface TableProps {
+    /** @see https://tailwindcss.com/docs/border-collapse */
+    borderCollapse?: 'collapse' | 'separate';
+    /** @see https://tailwindcss.com/docs/border-spacing */
+    borderSpacing?: SpacingValue;
+    borderSpacingX?: SpacingValue;
+    borderSpacingY?: SpacingValue;
+    /** @see https://tailwindcss.com/docs/table-layout */
+    tableLayout?: 'auto' | 'fixed';
+    /** @see https://tailwindcss.com/docs/caption-side */
+    caption?: 'top' | 'bottom';
+}
+/**
+ *
+ */
+interface MaskProps {
+    /** CSS mask shorthand */
+    mask?: 'none' | (string & {});
+    /** CSS mask-size */
+    maskSize?: 'auto' | 'cover' | 'contain' | (string & {});
+    /** CSS mask-position */
+    maskPos?: (string & {});
+    /** CSS mask-repeat */
+    maskRepeat?: 'repeat' | 'no-repeat' | 'repeat-x' | 'repeat-y' | 'round' | 'space';
+    /** CSS mask-type (shape-rendering) */
+    maskShape?: 'alpha' | 'luminance';
+}
+/**
+ * Variant modifiers for pseudo-classes, breakpoints, and states.
+ * These allow nesting SzProps for conditional styling.
+ */
+interface VariantModifiers {
+    hover?: SzPropsBase;
+    focus?: SzPropsBase;
+    active?: SzPropsBase;
+    visited?: SzPropsBase;
+    target?: SzPropsBase;
+    first?: SzPropsBase;
+    last?: SzPropsBase;
+    only?: SzPropsBase;
+    odd?: SzPropsBase;
+    even?: SzPropsBase;
+    firstOfType?: SzPropsBase;
+    lastOfType?: SzPropsBase;
+    onlyOfType?: SzPropsBase;
+    empty?: SzPropsBase;
+    disabled?: SzPropsBase;
+    enabled?: SzPropsBase;
+    checked?: SzPropsBase;
+    indeterminate?: SzPropsBase;
+    default?: SzPropsBase;
+    required?: SzPropsBase;
+    valid?: SzPropsBase;
+    invalid?: SzPropsBase;
+    inRange?: SzPropsBase;
+    outOfRange?: SzPropsBase;
+    placeholderShown?: SzPropsBase;
+    autofill?: SzPropsBase;
+    readOnly?: SzPropsBase;
+    focusWithin?: SzPropsBase;
+    focusVisible?: SzPropsBase;
+    before?: SzPropsBase;
+    after?: SzPropsBase;
+    placeholder?: SzPropsBase;
+    file?: SzPropsBase;
+    marker?: SzPropsBase;
+    selection?: SzPropsBase;
+    firstLine?: SzPropsBase;
+    firstLetter?: SzPropsBase;
+    backdrop?: SzPropsBase;
+    sm?: SzPropsBase;
+    md?: SzPropsBase;
+    lg?: SzPropsBase;
+    xl?: SzPropsBase;
+    '2xl'?: SzPropsBase;
+    '@sm'?: SzPropsBase;
+    '@md'?: SzPropsBase;
+    '@lg'?: SzPropsBase;
+    '@xl'?: SzPropsBase;
+    '@2xl'?: SzPropsBase;
+    dark?: SzPropsBase;
+    light?: SzPropsBase;
+    motionReduce?: SzPropsBase;
+    motionSafe?: SzPropsBase;
+    contrastMore?: SzPropsBase;
+    contrastLess?: SzPropsBase;
+    print?: SzPropsBase;
+    portrait?: SzPropsBase;
+    landscape?: SzPropsBase;
+    rtl?: SzPropsBase;
+    ltr?: SzPropsBase;
+    group?: boolean | string | SzPropsBase;
+    peer?: boolean | string | SzPropsBase;
+    not?: SzPropsBase;
+    has?: Record<string, SzPropsBase>;
+    aria?: Record<string, SzPropsBase>;
+    data?: Record<string, SzPropsBase>;
+    supports?: Record<string, SzPropsBase>;
+}
+/**
+ * Base sz props without variant modifiers (to prevent infinite recursion).
+ */
+type SzPropsBase = LayoutProps & FlexboxGridProps & SpacingProps & SizingProps & TypographyProps & BackgroundProps & BorderProps & EffectsProps & FilterProps & TransformProps & TransitionAnimationProps & InteractivityProps & SvgProps & TableProps & MaskProps & {
+    [key: string]: unknown;
+};
+/**
+ * Complete sz prop type with all properties and variant modifiers.
+ *
+ * @example
+ * ```tsx
+ * <div sz={{ p: 4, bg: 'blue-500', hover: { bg: 'blue-700' } }} />
+ * ```
+ */
+type SzProps = SzPropsBase & VariantModifiers;
+/**
+ * String-based sz prop for pass-through class names.
+ *
+ * @example
+ * ```tsx
+ * <div sz="p-4 bg-blue-500 hover:bg-blue-700" />
+ * ```
+ */
+type SzPropValue = string | SzProps;
+
+/**
+ * @csszyx/compiler - TypeScript compiler package for csszyx.
+ *
+ * This package provides the core compilation functionality for csszyx,
+ * including JSX transformation, recovery token generation, and manifest
+ * creation.
+ *
+ * @module @csszyx/compiler
+ */
+
+/**
+ * Compiler version.
+ */
+declare const VERSION = "0.0.0";
+/**
+ * Compiler configuration options.
+ */
+interface CompilerOptions {
+    /**
+     * Build ID (git hash or timestamp)
+     */
+    buildId?: string;
+    /**
+     * Enable development mode features
+     */
+    development?: boolean;
+    /**
+     * Auto-inject recovery tokens
+     */
+    autoInjectRecovery?: boolean;
+    /**
+     * Strict mode - fail build on warnings
+     */
+    strictMode?: boolean;
+}
+/**
+ * Default compiler options.
+ */
+declare const DEFAULT_COMPILER_OPTIONS: Required<CompilerOptions>;
+/**
+ * Merges user options with defaults.
+ *
+ * @param {Partial<CompilerOptions>} options - User-provided options
+ * @returns {Required<CompilerOptions>} Complete options object
+ *
+ * @example
+ * ```typescript
+ * const options = mergeOptions({ development: true });
+ * ```
+ */
+declare function mergeOptions(options?: Partial<CompilerOptions>): Required<CompilerOptions>;
+
+export { 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, DEFAULT_COMPILER_OPTIONS, type EffectsProps, type FilterProps, type FlexboxGridProps, type FractionValue, type InteractivityProps, type LayoutProps, ManifestBuilder, type NegativeSpacingValue, PROPERTY_CATEGORY_MAP, PropertyCategory, type RecoveryManifest, type RecoveryMode, type RecoveryToken, 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 };