{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/AspectRatio/index.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport { polymorphicForwardRef } from '../../utils/polymorphicForwardRef';\nimport { Slot } from '../../components/Slot';\n\ninterface AspectRatioProps {\n  children: React.JSX.Element;\n  ratio: number;\n  asChild?: boolean;\n  style?: CSSProperties;\n  className?: string;\n}\n\n/**\n * @description 주어진 aspect-ratio 비율을 맞춰주기 위해 선언적으로 사용하는 유틸 컴포넌트입니다.\n *\n * 미리 영역을 확보하여 `Layout Shift`를 방지하는데 효과적입니다.\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio\n *\n * `as` 속성을 통해 `다형성(polymorphism)`을 지원합니다:\n * - 기본적으로 `div` 태그로 자식 요소를 감싸서 렌더링하며, `as` 속성을 통해 감싸는 Wrapper 요소의 태그를 변경해 렌더링할 수 있습니다. (ex. div -> article)\n * - 이때, 해당 Wrapper 요소에 `aspect-ratio` 속성을 적용해 영역을 확보합니다.\n *\n * `asChild` 속성을 통해 `합성(Composition)`, `렌더링 위임(Rendering Delegation)` 패턴을 지원합니다:\n * - `asChild` 속성이 `true`라면 `Slot`을 통해 자식 요소를 렌더링합니다.\n * - 이때, 자식 요소에 `aspect-ratio` 속성을 적용해 영역을 확보합니다.\n * - `asChild` 속성을 사용 할 경우 아래 링크들을 참고하세요.\n *\n * @see https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot\n *\n * @param {AspectRatioProps} props - 컴포넌트에 전달되는 속성들입니다.\n * @param {number} props.ratio - 자식 요소의 가로 세로 비율을 지정합니다.\n * @param {JSX.Element} props.children - 렌더링 할 자식요소 입니다.\n * @param {CSSProperties} props.style - 추가적인 스타일을 지정합니다.\n * @param {string} props.className - 추가적인 클래스를 지정합니다.\n * @param {string} props.as - 감싸는 요소를 지정합니다. 기본 값은 `div`입니다. 해당 요소에 `aspect-ratio` 속성을 적용해 영역을 확보합니다.\n * @param {boolean} props.asChild - `true`일 경우 `Slot`을 통해 자식 요소를 그대로 렌더링하고, 자식 요소에 `aspect-ratio` 속성을 적용해 영역을 확보합니다.\n * @returns {JSX.Element} 주어진 aspect-ratio 비율에 맞춰 스타일이 적용된 자식 요소를 반환합니다.\n *\n * @example\n * ```tsx\n * // Default\n * <AspectRatio ratio={16 / 9}>\n *  <img src={imgUrl} alt=\"image\" />\n * </AspectRatio>\n * ```\n *\n * @example\n * ```tsx\n * // as article\n * <AspectRatio ratio={16 / 9} as=\"article\">\n *  <img src={imgUrl} alt=\"image\" />\n * </AspectRatio>\n * ```\n *\n * @example\n * ```tsx\n * // asChild\n * <AspectRatio ratio={16 / 9} asChild>\n *  <img src={imgUrl} alt=\"image\" />\n * </AspectRatio>\n * ```\n */\nexport const AspectRatio = polymorphicForwardRef<'div', AspectRatioProps>(\n  ({ ratio, style, as = 'div', asChild = false, ...props }, ref) => {\n    const AspectRatioWrapper = asChild ? Slot : as;\n\n    const slotStyle: CSSProperties = {\n      display: 'block',\n      width: '100%',\n      aspectRatio: ratio,\n      ...style,\n    };\n\n    return <AspectRatioWrapper ref={ref} style={slotStyle} {...props} />;\n  }\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,MAAa,cAAc,uBACxB,EAAE,OAAO,OAAO,KAAK,OAAO,UAAU,OAAO,GAAG,SAAS,QAAQ;CAUhE,OAAO,oBAToB,UAAU,OAAO,IASrC;EAAyB;EAAK,OAAO;GAN1C,SAAS;GACT,OAAO;GACP,aAAa;GACb,GAAG;GAGgD;EAAE,GAAI;EAAS,CAAA;EAEvE"}