@csszyx/compiler 0.3.1 → 0.5.0

package/dist/index.d.cts

@@ -1,4 +1,5 @@
 import * as t from '@babel/types';
+import * as CSS from 'csstype';
 
 /**
  * JSX Transform - Converts sz prop to className string.
@@ -19,6 +20,10 @@ type SzValue = string | number | boolean | SzObject;
 interface SzObject {
     [key: string]: SzValue;
 }
+declare const PROPERTY_MAP: Record<string, string>;
+declare const SUGGESTION_MAP: Record<string, string>;
+declare const KNOWN_VARIANTS: Set<string>;
+declare const BOOLEAN_SHORTHANDS: Set<string>;
 /**
  * Represents the result of a transformation.
  */
@@ -60,8 +65,11 @@ declare function transformSourceCode(source: string): {
     code: string;
     transformed: boolean;
     usesRuntime: boolean;
+    usesMerge: boolean;
     usesColorVar: boolean;
     classes: Set<string>;
+    rawClassNames: Set<string>;
+    diagnostics: string[];
 };
 
 /**
@@ -524,10 +532,55 @@ declare function buildParentMap(ast: t.Node): Map<t.Node, t.Node>;
  *
  * @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 & {});
+
+/**
+ * Augmentable interface for user-defined Tailwind v4 design tokens.
+ *
+ * Users (or the theme-scanner plugin) extend this via module augmentation so
+ * that custom tokens appear in sz prop IntelliSense without requiring
+ * changes to the core types.
+ *
+ * @example
+ * // In .csszyx/theme.d.ts (auto-generated by @csszyx/unplugin scanCss option):
+ * declare module '@csszyx/compiler' {
+ *   interface CustomTheme {
+ *     colors: 'brand' | 'brand-dark';
+ *     spacings: 'xl' | '2xs';
+ *   }
+ * }
+ */
+interface CustomTheme {
+}
+/** Extracts custom color tokens from CustomTheme, or never if not defined. */
+type CT_Colors = CustomTheme extends {
+    colors: infer T;
+} ? T : never;
+/** Extracts custom spacing tokens from CustomTheme, or never if not defined. */
+type CT_Spacings = CustomTheme extends {
+    spacings: infer T;
+} ? T : never;
+/** Extracts custom font tokens from CustomTheme, or never if not defined. */
+type CT_Fonts = CustomTheme extends {
+    fonts: infer T;
+} ? T : never;
+/** Extracts custom border-radius tokens from CustomTheme, or never if not defined. */
+type CT_Radii = CustomTheme extends {
+    radii: infer T;
+} ? T : never;
+/** Extracts custom shadow tokens from CustomTheme, or never if not defined. */
+type CT_Shadows = CustomTheme extends {
+    shadows: infer T;
+} ? T : never;
+/**
+ * Tailwind v4 spacing scale.
+ *
+ * Common preset values are listed for IDE autocomplete. Any number is valid —
+ * Tailwind v4's dynamic spacing system resolves n to `calc(var(--spacing) * n)`
+ * (e.g. w-13, w-92, p-1.5, p-2.5 are all valid).
+ */
+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 & {});
+/** Spacing value that can be scale, keyword, arbitrary, or custom token */
+type SpacingValue = SpacingScale | 'px' | 'auto' | CT_Spacings | (number & {}) | (string & {});
 /** Negative spacing value */
 type NegativeSpacingValue = SpacingValue | number;
 /** Tailwind color names */
@@ -535,7 +588,7 @@ type ColorName = 'inherit' | 'current' | 'transparent' | 'black' | 'white' | 'sl
 /** 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 & {});
+type ColorValue = 'inherit' | 'current' | 'transparent' | 'black' | 'white' | `${ColorName}-${ColorShade}` | CT_Colors | (string & {});
 /** Color object with opacity */
 interface ColorObjectValue {
     color: ColorValue;
@@ -545,12 +598,17 @@ interface ColorObjectValue {
 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';
+/**
+ * Fraction values for sizing/layout props.
+ *
+ * Common fractions are listed for IDE autocomplete. Any `n/m` string is valid —
+ * Tailwind v4 accepts arbitrary numerator/denominator (e.g. '3/7', '5/9', '11/16').
+ */
+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 & {});
 /** Border radius keywords */
-type BorderRadiusValue = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' | true | (string & {});
+type BorderRadiusValue = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' | CT_Radii | true | (string & {});
 /** Shadow keywords */
-type ShadowValue = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'inner' | 'none' | true | (string & {});
+type ShadowValue = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'inner' | 'none' | CT_Shadows | true | (string & {});
 /**
  *
  */
@@ -823,7 +881,7 @@ interface TypographyProps {
     /** @see https://tailwindcss.com/docs/font-weight */
     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 & {});
+    fontFamily?: 'sans' | 'serif' | 'mono' | CT_Fonts | (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 */
@@ -1068,13 +1126,11 @@ interface FilterProps {
  */
 interface TransformProps {
     /** @see https://tailwindcss.com/docs/scale */
-    scale?: 0 | 50 | 75 | 90 | 95 | 100 | 105 | 110 | 125 | 150 | 200 | number | (string & {});
+    scale?: 0 | 50 | 75 | 90 | 95 | 100 | 105 | 110 | 125 | 150 | 200 | '3d' | number | (string & {});
     scaleX?: TransformProps['scale'];
     scaleY?: TransformProps['scale'];
     /** @see https://tailwindcss.com/docs/scale (Z-axis, 3D) */
     scaleZ?: 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 & {});
     /** @see https://tailwindcss.com/docs/rotate (X-axis, 3D) */
@@ -1083,25 +1139,20 @@ interface TransformProps {
     rotateY?: TransformProps['rotate'];
     /** @see https://tailwindcss.com/docs/rotate (Z-axis, 3D) */
     rotateZ?: TransformProps['rotate'];
-    /** Boolean sugar for 3D rotate */
-    rotate3d?: boolean;
+    /** @see https://tailwindcss.com/docs/translate — shorthand sets both axes */
+    translate?: SpacingValue | FractionValue;
     /** @see https://tailwindcss.com/docs/translate */
     translateX?: SpacingValue | FractionValue;
     translateY?: SpacingValue | FractionValue;
     /** @see https://tailwindcss.com/docs/translate (Z-axis, 3D) */
     translateZ?: SpacingValue;
-    /** 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;
     /** @see https://tailwindcss.com/docs/transform */
-    transform?: 'none';
+    transform?: 'none' | 'gpu' | 'cpu';
     /** @see https://tailwindcss.com/docs/perspective */
     perspective?: 'none' | (string & {});
     perspectiveOrigin?: (string & {});
@@ -1122,6 +1173,11 @@ interface TransitionAnimationProps {
     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 & {});
+    /**
+     * Animation delay — sets `animation-delay` (distinct from `delay` which sets `transition-delay`).
+     * Number values are treated as milliseconds: `150` → `[animation-delay:150ms]`.
+     */
+    animationDelay?: 0 | 75 | 100 | 150 | 200 | 300 | 500 | 700 | 1000 | number | (string & {});
 }
 /**
  *
@@ -1303,6 +1359,22 @@ interface VariantModifiers {
  * 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 & {
+    /**
+     * Arbitrary CSS escape hatch — for CSS properties with no sz/Tailwind equivalent.
+     * Keys are camelCase CSS properties (or `--custom-property` for CSS vars).
+     * Each entry generates a Tailwind arbitrary-property class: `[prop:value]`.
+     *
+     * @example
+     * { css: { writingMode: 'vertical-lr', touchAction: 'none' } }
+     * // → [writing-mode:vertical-lr] [touch-action:none]
+     *
+     * { css: { '--my-color': 'red' } }
+     * // → [--my-color:red]
+     */
+    css?: CSS.Properties & {
+        [cssVar: `--${string}`]: string | number;
+    };
+} & {
     [key: string]: unknown;
 };
 /**
@@ -1315,14 +1387,24 @@ type SzPropsBase = LayoutProps & FlexboxGridProps & SpacingProps & SizingProps &
  */
 type SzProps = SzPropsBase & VariantModifiers;
 /**
- * String-based sz prop for pass-through class names.
+ * Array element type for sz array composition — each element is a style object or a falsy
+ * conditional guard (`false | null | undefined` are skipped at runtime by `_szMerge`).
+ */
+type SzArrayElement = SzProps | false | null | undefined;
+/**
+ * All accepted forms of the `sz` prop:
+ * - A plain Tailwind class string: `sz="p-4 bg-blue-500"`
+ * - A style object: `sz={{ p: 4, bg: 'blue-500' }}`
+ * - An array of style objects for composition: `sz={[layout, text, isActive && active]}`
  *
  * @example
  * ```tsx
  * <div sz="p-4 bg-blue-500 hover:bg-blue-700" />
+ * <div sz={{ p: 4, bg: 'blue-500' }} />
+ * <div sz={[base, isActive && activeStyle]} />
  * ```
  */
-type SzPropValue = string | SzProps;
+type SzPropValue = string | SzProps | SzArrayElement[];
 
 /**
  * @csszyx/compiler - TypeScript compiler package for csszyx.
@@ -1376,4 +1458,4 @@ declare const DEFAULT_COMPILER_OPTIONS: Required<CompilerOptions>;
  */
 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 };
+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 };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as t from '@babel/types';
+import * as CSS from 'csstype';
 
 /**
  * JSX Transform - Converts sz prop to className string.
@@ -19,6 +20,10 @@ type SzValue = string | number | boolean | SzObject;
 interface SzObject {
     [key: string]: SzValue;
 }
+declare const PROPERTY_MAP: Record<string, string>;
+declare const SUGGESTION_MAP: Record<string, string>;
+declare const KNOWN_VARIANTS: Set<string>;
+declare const BOOLEAN_SHORTHANDS: Set<string>;
 /**
  * Represents the result of a transformation.
  */
@@ -60,8 +65,11 @@ declare function transformSourceCode(source: string): {
     code: string;
     transformed: boolean;
     usesRuntime: boolean;
+    usesMerge: boolean;
     usesColorVar: boolean;
     classes: Set<string>;
+    rawClassNames: Set<string>;
+    diagnostics: string[];
 };
 
 /**
@@ -524,10 +532,55 @@ declare function buildParentMap(ast: t.Node): Map<t.Node, t.Node>;
  *
  * @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 & {});
+
+/**
+ * Augmentable interface for user-defined Tailwind v4 design tokens.
+ *
+ * Users (or the theme-scanner plugin) extend this via module augmentation so
+ * that custom tokens appear in sz prop IntelliSense without requiring
+ * changes to the core types.
+ *
+ * @example
+ * // In .csszyx/theme.d.ts (auto-generated by @csszyx/unplugin scanCss option):
+ * declare module '@csszyx/compiler' {
+ *   interface CustomTheme {
+ *     colors: 'brand' | 'brand-dark';
+ *     spacings: 'xl' | '2xs';
+ *   }
+ * }
+ */
+interface CustomTheme {
+}
+/** Extracts custom color tokens from CustomTheme, or never if not defined. */
+type CT_Colors = CustomTheme extends {
+    colors: infer T;
+} ? T : never;
+/** Extracts custom spacing tokens from CustomTheme, or never if not defined. */
+type CT_Spacings = CustomTheme extends {
+    spacings: infer T;
+} ? T : never;
+/** Extracts custom font tokens from CustomTheme, or never if not defined. */
+type CT_Fonts = CustomTheme extends {
+    fonts: infer T;
+} ? T : never;
+/** Extracts custom border-radius tokens from CustomTheme, or never if not defined. */
+type CT_Radii = CustomTheme extends {
+    radii: infer T;
+} ? T : never;
+/** Extracts custom shadow tokens from CustomTheme, or never if not defined. */
+type CT_Shadows = CustomTheme extends {
+    shadows: infer T;
+} ? T : never;
+/**
+ * Tailwind v4 spacing scale.
+ *
+ * Common preset values are listed for IDE autocomplete. Any number is valid —
+ * Tailwind v4's dynamic spacing system resolves n to `calc(var(--spacing) * n)`
+ * (e.g. w-13, w-92, p-1.5, p-2.5 are all valid).
+ */
+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 & {});
+/** Spacing value that can be scale, keyword, arbitrary, or custom token */
+type SpacingValue = SpacingScale | 'px' | 'auto' | CT_Spacings | (number & {}) | (string & {});
 /** Negative spacing value */
 type NegativeSpacingValue = SpacingValue | number;
 /** Tailwind color names */
@@ -535,7 +588,7 @@ type ColorName = 'inherit' | 'current' | 'transparent' | 'black' | 'white' | 'sl
 /** 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 & {});
+type ColorValue = 'inherit' | 'current' | 'transparent' | 'black' | 'white' | `${ColorName}-${ColorShade}` | CT_Colors | (string & {});
 /** Color object with opacity */
 interface ColorObjectValue {
     color: ColorValue;
@@ -545,12 +598,17 @@ interface ColorObjectValue {
 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';
+/**
+ * Fraction values for sizing/layout props.
+ *
+ * Common fractions are listed for IDE autocomplete. Any `n/m` string is valid —
+ * Tailwind v4 accepts arbitrary numerator/denominator (e.g. '3/7', '5/9', '11/16').
+ */
+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 & {});
 /** Border radius keywords */
-type BorderRadiusValue = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' | true | (string & {});
+type BorderRadiusValue = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' | CT_Radii | true | (string & {});
 /** Shadow keywords */
-type ShadowValue = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'inner' | 'none' | true | (string & {});
+type ShadowValue = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'inner' | 'none' | CT_Shadows | true | (string & {});
 /**
  *
  */
@@ -823,7 +881,7 @@ interface TypographyProps {
     /** @see https://tailwindcss.com/docs/font-weight */
     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 & {});
+    fontFamily?: 'sans' | 'serif' | 'mono' | CT_Fonts | (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 */
@@ -1068,13 +1126,11 @@ interface FilterProps {
  */
 interface TransformProps {
     /** @see https://tailwindcss.com/docs/scale */
-    scale?: 0 | 50 | 75 | 90 | 95 | 100 | 105 | 110 | 125 | 150 | 200 | number | (string & {});
+    scale?: 0 | 50 | 75 | 90 | 95 | 100 | 105 | 110 | 125 | 150 | 200 | '3d' | number | (string & {});
     scaleX?: TransformProps['scale'];
     scaleY?: TransformProps['scale'];
     /** @see https://tailwindcss.com/docs/scale (Z-axis, 3D) */
     scaleZ?: 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 & {});
     /** @see https://tailwindcss.com/docs/rotate (X-axis, 3D) */
@@ -1083,25 +1139,20 @@ interface TransformProps {
     rotateY?: TransformProps['rotate'];
     /** @see https://tailwindcss.com/docs/rotate (Z-axis, 3D) */
     rotateZ?: TransformProps['rotate'];
-    /** Boolean sugar for 3D rotate */
-    rotate3d?: boolean;
+    /** @see https://tailwindcss.com/docs/translate — shorthand sets both axes */
+    translate?: SpacingValue | FractionValue;
     /** @see https://tailwindcss.com/docs/translate */
     translateX?: SpacingValue | FractionValue;
     translateY?: SpacingValue | FractionValue;
     /** @see https://tailwindcss.com/docs/translate (Z-axis, 3D) */
     translateZ?: SpacingValue;
-    /** 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;
     /** @see https://tailwindcss.com/docs/transform */
-    transform?: 'none';
+    transform?: 'none' | 'gpu' | 'cpu';
     /** @see https://tailwindcss.com/docs/perspective */
     perspective?: 'none' | (string & {});
     perspectiveOrigin?: (string & {});
@@ -1122,6 +1173,11 @@ interface TransitionAnimationProps {
     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 & {});
+    /**
+     * Animation delay — sets `animation-delay` (distinct from `delay` which sets `transition-delay`).
+     * Number values are treated as milliseconds: `150` → `[animation-delay:150ms]`.
+     */
+    animationDelay?: 0 | 75 | 100 | 150 | 200 | 300 | 500 | 700 | 1000 | number | (string & {});
 }
 /**
  *
@@ -1303,6 +1359,22 @@ interface VariantModifiers {
  * 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 & {
+    /**
+     * Arbitrary CSS escape hatch — for CSS properties with no sz/Tailwind equivalent.
+     * Keys are camelCase CSS properties (or `--custom-property` for CSS vars).
+     * Each entry generates a Tailwind arbitrary-property class: `[prop:value]`.
+     *
+     * @example
+     * { css: { writingMode: 'vertical-lr', touchAction: 'none' } }
+     * // → [writing-mode:vertical-lr] [touch-action:none]
+     *
+     * { css: { '--my-color': 'red' } }
+     * // → [--my-color:red]
+     */
+    css?: CSS.Properties & {
+        [cssVar: `--${string}`]: string | number;
+    };
+} & {
     [key: string]: unknown;
 };
 /**
@@ -1315,14 +1387,24 @@ type SzPropsBase = LayoutProps & FlexboxGridProps & SpacingProps & SizingProps &
  */
 type SzProps = SzPropsBase & VariantModifiers;
 /**
- * String-based sz prop for pass-through class names.
+ * Array element type for sz array composition — each element is a style object or a falsy
+ * conditional guard (`false | null | undefined` are skipped at runtime by `_szMerge`).
+ */
+type SzArrayElement = SzProps | false | null | undefined;
+/**
+ * All accepted forms of the `sz` prop:
+ * - A plain Tailwind class string: `sz="p-4 bg-blue-500"`
+ * - A style object: `sz={{ p: 4, bg: 'blue-500' }}`
+ * - An array of style objects for composition: `sz={[layout, text, isActive && active]}`
  *
  * @example
  * ```tsx
  * <div sz="p-4 bg-blue-500 hover:bg-blue-700" />
+ * <div sz={{ p: 4, bg: 'blue-500' }} />
+ * <div sz={[base, isActive && activeStyle]} />
  * ```
  */
-type SzPropValue = string | SzProps;
+type SzPropValue = string | SzProps | SzArrayElement[];
 
 /**
  * @csszyx/compiler - TypeScript compiler package for csszyx.
@@ -1376,4 +1458,4 @@ declare const DEFAULT_COMPILER_OPTIONS: Required<CompilerOptions>;
  */
 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 };
+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 };