@teamsparta/stack-core/dist/responsive/utils.d.mts

stack core

import { Responsive } from './types.mjs';

declare function breakpointMapper<T extends Record<string, any>, K extends keyof T, R extends Record<string, any>>(breakpoints: Record<string, number>, targetObject: T, callback: (breakpoint: number, value: Exclude<T[K], undefined>) => R): R[];
/**
 * 반응형 디자인을 위한 유틸리티 함수입니다.
 * `Responsive` 타입을 사용하는 값을 반응형으로 변환합니다.
 * ReactNode를 반응형으로 변환해야 한다면 mapResponsiveElement를 사용해주세요.
 */
declare function mapResponsive<T extends Record<string, any> | any, K extends keyof T, R extends Record<string, any>>(breakpoints: Record<string, number>, targetObject: T, callback: (breakpoint: number, value: T extends Record<string, any> ? T[K] : T) => R): R[];
/**
 * mapResponsive와 달리 ReactNode를 반응형으로 변환할 때 사용됩니다.
 * 일반적인 자료구조를 반응형으로 변환하는 경우는 mapResponsive를 사용해주세요.
 * ReactNode를 반응형으로 변환하는 경우는 mapResponsiveElement를 사용해주세요.
 */
declare function mapResponsiveElement<T extends Record<string, any> | any, K extends keyof T, R extends Record<string, any>>(breakpoints: Record<string, number>, targetObject: T, callback: (breakpoint: number, value: T extends Record<string, any> ? T[K] : T) => R): R[];
/**
 * Responsive 타입의 값을 다른 Responsive 타입으로 매핑하는 함수
 * @param source 원본 Responsive 값
 * @param valueMap 원본 값을 대상 값으로 변환하는 매핑 객체
 * @returns 매핑된 Responsive 값
 *
 * @example
 * ```ts
 * const valueMap = {
 *   sm: "captionSb",
 *   md: "bodyB",
 *   lg: "subTitle2",
 * };
 * const responsiveValue = mapResponsiveValue("sm", valueMap); // "captionSb"
 * const responsiveValue2 = mapResponsiveValue({ mobile: "sm", desktop: "lg" }, valueMap); // { mobile: "captionSb", desktop: "subTitle2" }
 * ```
 */
declare function mapResponsiveValue<T extends string | number, R extends string | number>(source: Responsive<T>, valueMap: Record<T, R>): Responsive<R>;

export { breakpointMapper, mapResponsive, mapResponsiveElement, mapResponsiveValue };