native-variants/dist/lib/cn.d.ts

A library for handling variants in React Native components with theme support.

import type { FlexStyle, ImageStyle, StyleProp, TextStyle, ViewStyle } from "react-native";
/**
 * Base style type that covers all React Native style types.
 */
type BaseStyle = ViewStyle | TextStyle | ImageStyle | FlexStyle;
/**
 * Animated style type compatible with react-native-reanimated.
 * Allows for animated values in style properties.
 */
type AnimatedStyle<T> = {
    [K in keyof T]: T[K] | {
        value: T[K];
    };
};
/**
 * Combined style input type that accepts:
 * - Regular React Native styles (ViewStyle, TextStyle, etc.)
 * - Animated styles from react-native-reanimated
 * - Partial style objects
 * - Style arrays
 * - null/undefined values
 */
type StyleInput = StyleProp<BaseStyle> | AnimatedStyle<BaseStyle> | Partial<BaseStyle> | Record<string, unknown> | null | undefined;
/**
 * Combines multiple style objects into a single merged style.
 * Supports React Native StyleProp, animated styles from react-native-reanimated,
 * and regular style objects.
 *
 * Features:
 * - Handles nested style arrays
 * - Compatible with react-native-reanimated animated styles
 * - Filters out null/undefined values
 * - Returns a properly typed style object
 *
 * @param styles - Variable number of style inputs to merge
 * @returns A single merged style object
 *
 * @example
 * ```ts
 * // Basic usage
 * const style = cn(styles.root, { padding: 16 });
 *
 * // With animated styles (react-native-reanimated)
 * const animatedStyle = useAnimatedStyle(() => ({
 *   transform: [{ translateX: translateX.value }],
 * }));
 * const style = cn(styles.wrapper, animatedStyle);
 *
 * // Multiple styles
 * const style = cn(
 *   baseStyles,
 *   conditionalStyles,
 *   { opacity: isVisible ? 1 : 0 }
 * );
 * ```
 */
export declare function cn<T extends BaseStyle = ViewStyle>(...styles: StyleInput[]): T;
/**
 * Type-safe version of cn specifically for ViewStyle.
 * Use this when you need explicit ViewStyle typing.
 *
 * @param styles - Variable number of style inputs to merge
 * @returns A merged ViewStyle object
 */
export declare function cnView(...styles: StyleInput[]): ViewStyle;
/**
 * Type-safe version of cn specifically for TextStyle.
 * Use this when you need explicit TextStyle typing.
 *
 * @param styles - Variable number of style inputs to merge
 * @returns A merged TextStyle object
 */
export declare function cnText(...styles: StyleInput[]): TextStyle;
/**
 * Type-safe version of cn specifically for ImageStyle.
 * Use this when you need explicit ImageStyle typing.
 *
 * @param styles - Variable number of style inputs to merge
 * @returns A merged ImageStyle object
 */
export declare function cnImage(...styles: StyleInput[]): ImageStyle;
export {};