responsive-class-variants/dist/index.d.ts

rcv helps you create responsive class variants

export type DefaultBreakpoints = "sm" | "md" | "lg" | "xl";
export type Breakpoints = DefaultBreakpoints;
export type BreakpointsMap<V, B extends string = DefaultBreakpoints> = {
    initial: V;
} & Partial<{
    [breakpoint in B]: V;
}>;
export type ResponsiveValue<T, B extends string = DefaultBreakpoints> = T | BreakpointsMap<T, B>;
/**
 * Maps a ResponsiveValue to a new ResponsiveValue using the provided mapper function. Singular values are passed through as is.
 *
 * @template V The type of the original value
 * @template T The type of the mapped value
 * @template B The type of breakpoints
 * @param {ResponsiveValue<V, B>} value - The original ResponsiveValue to be mapped
 * @param {function(V): T} mapper - A function that maps a ResponsiveValue to a new ResponsiveValue
 * @returns {ResponsiveValue<T, B>} A new ResponsiveValue with the mapped values
 *
 *
 * @example
 * const sizes = {
 *  initial: 'md',
 *  sm: 'lg',
 * }
 *
 * const output = mapResponsiveValue(sizes, size => {
 *	switch (size) {
 *		case 'initial':
 *		return 'sm';
 *		case 'sm':
 *			return 'md';
 *		}
 *	});
 *
 * // console.log(output)
 * {
 *	initial: 'sm',
 *	sm: 'md',
 * }
 */
export declare const mapResponsiveValue: <V, T, B extends string = DefaultBreakpoints>(value: ResponsiveValue<V, B>, mapper: (value: V) => T) => ResponsiveValue<T, B>;
/**
 * Start of rcv and types
 */
type VariantValue = Record<string, string | Record<string, string>>;
type VariantConfig = Record<string, VariantValue>;
type StringBoolean = "true" | "false";
type BooleanVariant = Partial<Record<StringBoolean, string | Record<string, string>>>;
type VariantPropValue<T, B extends string> = T extends BooleanVariant ? ResponsiveValue<boolean, B> | undefined : T extends Record<string, unknown> ? ResponsiveValue<keyof T, B> : never;
type VariantProps<T extends VariantConfig, B extends string> = {
    [K in keyof T]?: VariantPropValue<T[K], B>;
} & {
    className?: string;
};
type SlotConfig = string;
type SlotsConfig<S extends string> = Record<S, SlotConfig>;
type CompoundVariantWithSlots<T extends VariantConfig, S extends string, B extends string> = Partial<VariantProps<T, B>> & {
    class?: Partial<Record<S, string>>;
    className?: string;
};
export declare function rcv<T extends VariantConfig, B extends string = DefaultBreakpoints>(config: {
    slots: SlotsConfig<string>;
    variants?: T;
    compoundVariants?: CompoundVariantWithSlots<T, string, B>[];
    onComplete?: (classes: string) => string;
}): {
    [K in keyof typeof config.slots]: (props?: VariantProps<T, B>) => string;
};
export declare function rcv<T extends VariantConfig, B extends string = DefaultBreakpoints>(config: {
    base: string;
    variants?: T;
    compoundVariants?: Partial<VariantProps<T, B>>[];
    onComplete?: (classes: string) => string;
}): (props: VariantProps<T, B>) => string;
/**
 * Creates a custom rcv function with custom breakpoints and an optional onComplete callback
 *
 * @template B - The custom breakpoints type
 * @param breakpoints - Optional array of custom breakpoint names
 * @param onComplete - Optional callback function that receives the generated classes and returns the final classes
 * @returns A function that creates rcv with custom breakpoints
 *
 * @example
 * const customRcv = createRcv(['mobile', 'tablet', 'desktop']);
 *
 * const getButtonVariants = customRcv({
 *   base: "px-4 py-2 rounded",
 *   variants: {
 *     intent: {
 *       primary: "bg-blue-500 text-white",
 *       secondary: "bg-gray-200 text-gray-800"
 *     }
 *   }
 * });
 *
 * // Usage with custom breakpoints:
 * getButtonVariants({ intent: { initial: "primary", mobile: "secondary", desktop: "primary" } })
 */
export declare const createRcv: <B extends string>(_breakpoints?: readonly B[], onComplete?: (classes: string) => string) => {
    <T extends VariantConfig>(config: {
        slots: SlotsConfig<string>;
        variants?: T;
        compoundVariants?: CompoundVariantWithSlots<T, string, B>[];
        onComplete?: (classes: string) => string;
    }): { [K in keyof typeof config.slots]: (props?: VariantProps<T, B>) => string; };
    <T extends VariantConfig>(config: {
        base: string;
        variants?: T;
        compoundVariants?: Partial<VariantProps<T, B>>[];
        onComplete?: (classes: string) => string;
    }): (props: VariantProps<T, B>) => string;
};
export {};