import * as React from 'react';
import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
/**
 * AspectRatio — 固定長寬比容器(Radix AspectRatio primitive 薄包裝)
 *
 * 世界級對照:shadcn `AspectRatio` / Ant 無獨立元件(CSS 方案)/ Material 無
 *
 * ── 為什麼需要 ──
 * CSS `aspect-ratio` 屬性雖然現代瀏覽器都支援,但 Radix primitive 提供 SSR-safe
 * padding-bottom 方案 + consistent API,避免邊緣 bug(image 未載入時容器坍塌 /
 * content-fit 差異)。保 safe + 一致視覺。
 *
 * ── 標準 ratio(DS 慣例) ──
 * 16/9  — 寬螢幕影片、onboarding feature tour 截圖(Coachmark media 預設)
 * 4/3   — 老電視 / 照片基本 ratio、產品 thumbnail
 * 1/1   — Avatar / 方形貼文預覽 / icon preview
 * 3/4   — 直式照片(人物 portrait)
 * 21/9  — Ultra-wide banner(hero section)
 *
 * Consumer 傳 `ratio={n/m}` 數字計算(如 16/9 = 1.7777)。
 *
 * ── 常見消費者 ──
 * Coachmark media / Carousel item image / Card thumbnail(未來)/ Chart preview
 */
export type AspectRatioProps = React.ComponentPropsWithoutRef<typeof AspectRatioPrimitive.Root>;
declare const AspectRatio: React.ForwardRefExoticComponent<Omit<AspectRatioPrimitive.AspectRatioProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
export declare const aspectRatioMeta: {
    readonly component: "AspectRatio";
    readonly family: null;
    readonly variants: {};
    readonly sizes: {};
    readonly states: readonly ["default"];
    readonly tokens: {
        readonly bg: readonly [];
        readonly fg: readonly [];
        readonly ring: readonly [];
    };
};
export { AspectRatio };
//# sourceMappingURL=aspect-ratio.d.ts.map