{"version":3,"file":"AspectRatio.cjs","names":[],"sources":["../../../src/components/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./AspectRatio.module.css\";\n\nexport interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {\n    /**\n     * Width-to-height ratio. Pass `16/9` for widescreen, `1` for square,\n     * `4/3` for SD video, `3/4` for portrait, etc. Default `16/9`.\n     */\n    ratio?: number;\n    children?: ReactNode;\n}\n\n/**\n * Preserve a constant aspect ratio for media (images, video, embeds). The\n * inner child stretches to fill the box. Uses the native `aspect-ratio`\n * CSS property — works on all modern browsers (Safari 15+, Chrome 88+).\n *\n * @example\n * <AspectRatio ratio={16 / 9}>\n *     <img src=\"/cover.jpg\" alt=\"\" style={{ width: \"100%\", height: \"100%\", objectFit: \"cover\" }} />\n * </AspectRatio>\n */\nexport function AspectRatio({\n    ratio = 16 / 9,\n    className,\n    style,\n    children,\n    ...props\n}: AspectRatioProps) {\n    const finalStyle: CSSProperties = { aspectRatio: String(ratio), ...style };\n    return (\n        <div className={cn(styles.aspect, className)} style={finalStyle} {...props}>\n            {children}\n        </div>\n    );\n}\n"],"mappings":"+GAuBA,SAAgB,EAAY,CACxB,QAAQ,GAAK,EACb,YACA,QACA,WACA,GAAG,GACc,CACjB,IAAM,EAA4B,CAAE,YAAa,OAAO,CAAK,EAAG,GAAG,CAAM,EACzE,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,OAAQ,CAAS,EAAG,MAAO,EAAY,GAAI,EAChE,UACA,CAAA,CAEb"}