aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
102 lines • 3.02 kB
TypeScript
/**
* AuraGlass Foldable Screen Support
* Adaptive glass layouts for foldable and dual-screen devices
*/
import React from "react";
interface FoldableInfo {
isFoldable: boolean;
foldState: "folded" | "unfolded" | "partial" | "unknown";
foldAngle?: number;
segments: ScreenSegment[];
hinge?: {
position: "horizontal" | "vertical";
offset: number;
width: number;
};
}
interface ScreenSegment {
left: number;
top: number;
width: number;
height: number;
devicePixelRatio: number;
}
interface GlassFoldableSupportProps {
children: React.ReactNode;
className?: string;
adaptiveLayout?: boolean;
bridgeHinge?: boolean;
independentSegments?: boolean;
continuousGlass?: boolean;
foldAnimation?: boolean;
onFoldStateChange?: (state: FoldableInfo) => void;
}
export declare function GlassFoldableSupport({ children, className, adaptiveLayout, bridgeHinge, independentSegments, continuousGlass, foldAnimation, onFoldStateChange, }: GlassFoldableSupportProps): import("react/jsx-runtime").JSX.Element;
export declare function useFoldableDevice(): {
setFoldableInfo: React.Dispatch<React.SetStateAction<FoldableInfo>>;
isUnfolded: boolean;
isFolded: boolean;
isDualScreen: boolean;
isFoldable: boolean;
foldState: "folded" | "unfolded" | "partial" | "unknown";
foldAngle?: number;
segments: ScreenSegment[];
hinge?: {
position: "horizontal" | "vertical";
offset: number;
width: number;
};
};
export declare function useFoldableLayout(): {
isFoldable: boolean;
foldState: "unknown" | "folded" | "unfolded" | "partial";
segments: ScreenSegment[];
hinge: {
position: "horizontal" | "vertical";
offset: number;
width: number;
} | undefined;
getOptimalLayout: (content: React.ReactNode[]) => {
layout: string;
items: React.ReactNode[][];
};
};
export declare const foldablePresets: {
seamless: {
adaptiveLayout: boolean;
bridgeHinge: boolean;
independentSegments: boolean;
continuousGlass: boolean;
foldAnimation: boolean;
};
independent: {
adaptiveLayout: boolean;
bridgeHinge: boolean;
independentSegments: boolean;
continuousGlass: boolean;
foldAnimation: boolean;
};
minimal: {
adaptiveLayout: boolean;
bridgeHinge: boolean;
independentSegments: boolean;
continuousGlass: boolean;
foldAnimation: boolean;
};
gaming: {
adaptiveLayout: boolean;
bridgeHinge: boolean;
independentSegments: boolean;
continuousGlass: boolean;
foldAnimation: boolean;
};
productivity: {
adaptiveLayout: boolean;
bridgeHinge: boolean;
independentSegments: boolean;
continuousGlass: boolean;
foldAnimation: boolean;
};
};
export {};
//# sourceMappingURL=GlassFoldableSupport.d.ts.map