import { AccessibilityProps } from '../shared/index.js';

type DeviceType = 'iphone' | 'ipad' | 'android-phone' | 'android-tablet';
type DeviceOrientation = 'portrait' | 'landscape';
interface DeviceFrameProps {
    /** The type of device to display */
    device: DeviceType;
    /** The orientation of the device */
    orientation?: DeviceOrientation;
}
interface DeviceDimensions {
    /** Width in pixels */
    width: number;
    /** Height in pixels */
    height: number;
    /** Border radius in pixels */
    radius: number;
    /** Whether the device has a notch */
    notch: boolean;
    /** Whether the device has a home indicator bar */
    homeIndicator: boolean;
}
interface DeviceFrameAPI {
    /** Computed dimensions for the device */
    dimensions: DeviceDimensions;
    /** ARIA attributes for the device frame */
    ariaProps: Partial<AccessibilityProps> & Record<string, unknown>;
    /** Data attributes for styling hooks */
    dataAttributes: Record<string, string>;
}
declare function createDeviceFrame(props: DeviceFrameProps): DeviceFrameAPI;

declare const deviceFrameVariants: (props?: ({
    device?: "iphone" | "ipad" | "android-phone" | "android-tablet" | undefined;
    orientation?: "portrait" | "landscape" | undefined;
} & {
    className?: string;
}) | undefined) => string;

export { type DeviceDimensions, type DeviceFrameAPI, type DeviceFrameProps, type DeviceOrientation, type DeviceType, createDeviceFrame, deviceFrameVariants };
