react-electronix 1.0.11 → 2.1.0

package/dist/esm/components/Galaxy/Galaxy.style.d.ts

@@ -0,0 +1,90 @@
+import { GalaxyColor } from './Galaxy.props';
+export declare const useStyles: ({ width, color }: StyleProps) => {
+    galaxy: {
+        width: number;
+        height: number;
+        position: string;
+        borderRadius: string;
+        zIndex: string;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+    };
+    frame: {
+        position: string;
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+        borderRadius: string;
+        border: string;
+        boxShadow: string;
+        background: string;
+        zIndex: string;
+    };
+    display: {
+        width: string;
+        height: string;
+        background: string;
+        borderRadius: string;
+        overflow: string;
+        position: string;
+        display: string;
+        flexDirection: string;
+        boxShadow: string;
+        padding: string;
+    };
+    children: {
+        width: string;
+        height: string;
+        overflow: string;
+        borderRadius: string;
+        background: string;
+        position: string;
+        '&::-webkit-scrollbar': {
+            display: string;
+        };
+        msOverflowStyle: string;
+        scrollbarWidth: string;
+    };
+    punchHole: {
+        width: string;
+        height: string;
+        background: string;
+        borderRadius: string;
+        position: string;
+        top: string;
+        left: string;
+        transform: string;
+        zIndex: string;
+        border: string;
+    };
+    buttons: {
+        position: string;
+        right: string;
+        top: string;
+        display: string;
+        flexDirection: string;
+        gap: string;
+        zIndex: string;
+    };
+    volumeRocker: {
+        width: string;
+        height: string;
+        background: string;
+        borderRadius: string;
+        boxShadow: string;
+    };
+    powerButton: {
+        width: string;
+        height: string;
+        background: string;
+        borderRadius: string;
+        boxShadow: string;
+    };
+};
+interface StyleProps {
+    width: number;
+    color?: GalaxyColor;
+}
+export {};

package/dist/esm/components/Galaxy/Galaxy.style.js

@@ -0,0 +1,161 @@
+var GALAXY_COLORS = {
+    'titanium-silverblue': {
+        primary: '#aeb8c8',
+        secondary: '#ced6e3',
+        highlight: '#dfe6ef',
+    },
+    'titanium-black': {
+        primary: '#3b3c3e',
+        secondary: '#5a5b5e',
+        highlight: '#7a7b7e',
+    },
+    'titanium-gray': {
+        primary: '#b3ada5',
+        secondary: '#cfc9c1',
+        highlight: '#e3dfd9',
+    },
+    'titanium-whitesilver': {
+        primary: '#dcdcdc',
+        secondary: '#f5f5f5',
+        highlight: '#ffffff',
+    },
+    'titanium-jetblack': {
+        primary: '#141414',
+        secondary: '#2a2a2a',
+        highlight: '#3a3a3a',
+    },
+    'titanium-jadegreen': {
+        primary: '#8da18e',
+        secondary: '#adbdae',
+        highlight: '#cbd9cb',
+    },
+    'titanium-pinkgold': {
+        primary: '#dfc2b1',
+        secondary: '#efd2c1',
+        highlight: '#f7e2d1',
+    },
+    'navy': {
+        primary: '#1a3c6c',
+        secondary: '#3a5c8c',
+        highlight: '#5a7cac',
+    },
+    'icyblue': {
+        primary: '#cbd9ea',
+        secondary: '#ebf9fa',
+        highlight: '#ffffff',
+    },
+    'silver-shadow': {
+        primary: '#7d8184',
+        secondary: '#9da1a4',
+        highlight: '#bdc1c4',
+    },
+    'mint': {
+        primary: '#bee1d0',
+        secondary: '#def1f0',
+        highlight: '#f0f9f5',
+    },
+    'blueblack': {
+        primary: '#2b3340',
+        secondary: '#4b5360',
+        highlight: '#6b7380',
+    },
+    'coralred': {
+        primary: '#f06e6a',
+        secondary: '#ff8e8a',
+        highlight: '#ffaeaa',
+    },
+    'pinkgold': {
+        primary: '#f1e0d0',
+        secondary: '#fff0ea',
+        highlight: '#ffffff',
+    },
+};
+export var useStyles = function (_a) {
+    var width = _a.width, _b = _a.color, color = _b === void 0 ? 'titanium-gray' : _b;
+    var theme = GALAXY_COLORS[color];
+    return {
+        galaxy: {
+            width: width,
+            height: width * 2.15,
+            position: 'relative',
+            borderRadius: "".concat(width * 0.05238095238, "px"),
+            zIndex: '1',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        frame: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            borderRadius: "".concat(width * 0.05238095238, "px"),
+            border: "".concat(width * 0.004, "px solid ").concat(theme.primary),
+            boxShadow: "\n            0 0 0 ".concat(width * 0.005, "px ").concat(theme.secondary, ",\n            0 10px 30px rgba(0,0,0,0.5)\n        "),
+            background: "linear-gradient(to right, ".concat(theme.secondary, " 0%, ").concat(theme.highlight, " 50%, ").concat(theme.secondary, " 100%)"),
+            zIndex: '-1',
+        },
+        display: {
+            width: '96.5%',
+            height: '98.5%',
+            background: '#000',
+            borderRadius: "".concat(width * 0.0496, "px"),
+            overflow: 'hidden',
+            position: 'relative',
+            display: 'flex',
+            flexDirection: 'column',
+            boxShadow: 'inset 0 0 10px rgba(0,0,0,0.8)',
+            padding: "".concat(width * 0.0142, "px"), // Increased inner bezel
+        },
+        children: {
+            width: '100%',
+            height: '99.8%',
+            overflow: 'auto',
+            borderRadius: "".concat(width * 0.0333, "px"), // More noticeable rounding
+            background: '#000',
+            position: 'relative',
+            '&::-webkit-scrollbar': {
+                display: 'none'
+            },
+            msOverflowStyle: 'none',
+            scrollbarWidth: 'none'
+        },
+        punchHole: {
+            width: "".concat(width * 0.025, "px"),
+            height: "".concat(width * 0.025, "px"),
+            background: '#050505',
+            borderRadius: '50%',
+            position: 'absolute',
+            top: "".concat(width * 0.04, "px"),
+            left: '50%',
+            transform: 'translateX(-50%)',
+            zIndex: '10',
+            border: '1px solid rgba(255,255,255,0.05)',
+        },
+        buttons: {
+            position: 'absolute',
+            right: "-".concat(width * 0.01, "px"),
+            top: "".concat(width * 0.4095238095, "px"),
+            display: 'flex',
+            flexDirection: 'column',
+            gap: "".concat(width * 0.1142857143, "px"),
+            zIndex: '2',
+        },
+        volumeRocker: {
+            width: "".concat(width * 0.01, "px"),
+            height: "".concat(width * 0.2714285714, "px"),
+            background: theme.primary,
+            borderRadius: "0 ".concat(width * 0.005, "px ").concat(width * 0.005, "px 0"),
+            boxShadow: '1px 0 2px rgba(0,0,0,0.3)',
+        },
+        powerButton: {
+            width: "".concat(width * 0.01, "px"),
+            height: "".concat(width * 0.1476190476, "px"),
+            background: theme.primary,
+            borderRadius: "0 ".concat(width * 0.005, "px ").concat(width * 0.005, "px 0"),
+            boxShadow: '1px 0 2px rgba(0,0,0,0.3)',
+        }
+    };
+};
+//# sourceMappingURL=Galaxy.style.js.map

package/dist/esm/components/Galaxy/Galaxy.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Galaxy.style.js","sourceRoot":"","sources":["../../../../src/components/Galaxy/Galaxy.style.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/Galaxy/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Galaxy';
+export * from './Galaxy.props';

package/dist/esm/components/Galaxy/index.js

@@ -0,0 +1,3 @@
+export * from './Galaxy';
+export * from './Galaxy.props';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Galaxy/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Galaxy/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}

package/dist/esm/components/IMac/IMac.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IMacProps } from './IMac.props';
+export declare const IMac: ({ width, children, color }: IMacProps) => React.JSX.Element;

package/dist/esm/components/IMac/IMac.js

@@ -0,0 +1,17 @@
+import { Box } from '@mui/material';
+import React from 'react';
+import { useStyles } from './IMac.styles';
+export var IMac = function (_a) {
+    var _b = _a.width, width = _b === void 0 ? 600 : _b, children = _a.children, _c = _a.color, color = _c === void 0 ? 'silver' : _c;
+    var style = useStyles({ width: width, color: color });
+    return (React.createElement(Box, { className: 'imac', sx: style.imac },
+        React.createElement(Box, { className: 'main-body', sx: style.mainBody },
+            React.createElement(Box, { className: 'enclosure', sx: style.enclosure },
+                React.createElement(Box, { className: 'camera', sx: style.camera }),
+                React.createElement(Box, { className: 'display-area', sx: style.displayArea },
+                    React.createElement(Box, { className: 'screen-content', sx: style.screenContent }, children))),
+            React.createElement(Box, { className: 'chin', sx: style.chin })),
+        React.createElement(Box, { className: 'stand', sx: style.stand }),
+        React.createElement(Box, { className: 'base', sx: style.base })));
+};
+//# sourceMappingURL=IMac.js.map

package/dist/esm/components/IMac/IMac.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IMac.js","sourceRoot":"","sources":["../../../../src/components/IMac/IMac.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,MAAM,CAAC,IAAM,IAAI,GAAG,UAAC,EAIT;QAHR,aAAW,EAAX,KAAK,mBAAG,GAAG,KAAA,EACX,QAAQ,cAAA,EACR,aAAgB,EAAhB,KAAK,mBAAG,QAAQ,KAAA;IAEhB,IAAM,KAAK,GAAG,SAAS,CAAC,EAAE,KAAK,OAAA,EAAE,KAAK,OAAA,EAAE,CAAC,CAAC;IAE1C,OAAO,CACH,oBAAC,GAAG,IAAC,SAAS,EAAC,MAAM,EAAC,EAAE,EAAE,KAAK,CAAC,IAAI;QAChC,oBAAC,GAAG,IAAC,SAAS,EAAC,WAAW,EAAC,EAAE,EAAE,KAAK,CAAC,QAAQ;YACzC,oBAAC,GAAG,IAAC,SAAS,EAAC,WAAW,EAAC,EAAE,EAAE,KAAK,CAAC,SAAS;gBAC1C,oBAAC,GAAG,IAAC,SAAS,EAAC,QAAQ,EAAC,EAAE,EAAE,KAAK,CAAC,MAAM,GAAI;gBAC5C,oBAAC,GAAG,IAAC,SAAS,EAAC,cAAc,EAAC,EAAE,EAAE,KAAK,CAAC,WAAW;oBAC/C,oBAAC,GAAG,IAAC,SAAS,EAAC,gBAAgB,EAAC,EAAE,EAAE,KAAK,CAAC,aAAa,IAClD,QAAQ,CACP,CACJ,CACJ;YACN,oBAAC,GAAG,IAAC,SAAS,EAAC,MAAM,EAAC,EAAE,EAAE,KAAK,CAAC,IAAI,GAAI,CACtC;QACN,oBAAC,GAAG,IAAC,SAAS,EAAC,OAAO,EAAC,EAAE,EAAE,KAAK,CAAC,KAAK,GAAI;QAC1C,oBAAC,GAAG,IAAC,SAAS,EAAC,MAAM,EAAC,EAAE,EAAE,KAAK,CAAC,IAAI,GAAI,CACtC,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/esm/components/IMac/IMac.props.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+export type IMacColor = 'blue' | 'purple' | 'pink' | 'orange' | 'yellow' | 'green' | 'silver';
+export interface IMacProps {
+    width?: number;
+    children?: ReactNode;
+    color?: IMacColor;
+}

package/dist/esm/components/IMac/IMac.props.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=IMac.props.js.map

package/dist/esm/components/IMac/IMac.props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IMac.props.js","sourceRoot":"","sources":["../../../../src/components/IMac/IMac.props.ts"],"names":[],"mappings":""}

package/dist/esm/components/IMac/IMac.styles.d.ts

@@ -0,0 +1,7 @@
+import { IMacColor } from './IMac.props';
+export declare const useStyles: ({ width, color }: StylesProps) => any;
+interface StylesProps {
+    width?: number;
+    color?: IMacColor;
+}
+export {};

package/dist/esm/components/IMac/IMac.styles.js

@@ -0,0 +1,135 @@
+var IMAC_COLORS = {
+    blue: {
+        chin: '#a1c2d9',
+        stand: 'linear-gradient(180deg, #e1eef6 0%, #a1c2d9 50%, #89acca 100%)',
+        enclosure: '#f3f3f3',
+        base: '#89acca'
+    },
+    purple: {
+        chin: '#b9bad9',
+        stand: 'linear-gradient(180deg, #e8e8f3 0%, #b9bad9 50%, #a1a2c0 100%)',
+        enclosure: '#f3f3f3',
+        base: '#a1a2c0'
+    },
+    pink: {
+        chin: '#e7b9bc',
+        stand: 'linear-gradient(180deg, #f9e8e9 0%, #e7b9bc 50%, #cf9fa3 100%)',
+        enclosure: '#f3f3f3',
+        base: '#cf9fa3'
+    },
+    orange: {
+        chin: '#f1c2b0',
+        stand: 'linear-gradient(180deg, #fbeaea 0%, #f1c2b0 50%, #d9aa98 100%)',
+        enclosure: '#f3f3f3',
+        base: '#d9aa98'
+    },
+    yellow: {
+        chin: '#e8d9a1',
+        stand: 'linear-gradient(180deg, #f7f1d9 0%, #e8d9a1 50%, #d0c189 100%)',
+        enclosure: '#f3f3f3',
+        base: '#d0c189'
+    },
+    green: {
+        chin: '#acc1b4',
+        stand: 'linear-gradient(180deg, #e4ede8 0%, #acc1b4 50%, #94a99b 100%)',
+        enclosure: '#f3f3f3',
+        base: '#94a99b'
+    },
+    silver: {
+        chin: '#d4d7d8',
+        stand: 'linear-gradient(180deg, #e5e7eb 0%, #d1d5db 50%, #cacdce 100%)',
+        enclosure: '#e7e9ea',
+        base: '#9ca3af'
+    },
+};
+export var useStyles = function (_a) {
+    var _b = _a.width, width = _b === void 0 ? 600 : _b, _c = _a.color, color = _c === void 0 ? 'silver' : _c;
+    var height = width * 0.6879377432; // Total height including chin
+    var screenWidth = width * 0.96;
+    var screenHeight = width * 0.54; // 16:9 aspect ratio for display area
+    var borderRadius = width * 0.02;
+    var standWidth = width * 0.2373540856;
+    var standHeight = width * 0.1556420233;
+    var theme = IMAC_COLORS[color];
+    return {
+        imac: {
+            width: width,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            position: 'relative',
+        },
+        mainBody: {
+            width: width,
+            height: height,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            position: 'relative',
+        },
+        enclosure: {
+            width: width,
+            height: width * 0.5875486381,
+            backgroundColor: theme.enclosure, // Front bezel color
+            borderRadius: "".concat(borderRadius, "px ").concat(borderRadius, "px 0 0"),
+            padding: "".concat(width * 0.02, "px"),
+            boxSizing: 'border-box',
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'relative',
+            boxShadow: "0 ".concat(width * 0.02, "px ").concat(width * 0.04, "px rgba(0,0,0,0.1)"),
+            border: '1px solid rgba(0,0,0,0.05)',
+        },
+        displayArea: {
+            width: '100%',
+            height: screenHeight + (width * 0.03), // include top bezel area
+            backgroundColor: '#000',
+            position: 'relative',
+            overflow: 'hidden',
+        },
+        camera: {
+            width: width * 0.01,
+            height: width * 0.01,
+            backgroundColor: '#1a1a1a',
+            borderRadius: '50%',
+            position: 'absolute',
+            top: width * 0.005,
+            left: '50%',
+            transform: 'translateX(-50%)',
+            zIndex: 10,
+        },
+        screenContent: {
+            width: screenWidth,
+            height: screenHeight,
+            backgroundColor: '#000',
+            position: 'relative',
+            overflow: 'hidden',
+            padding: 0
+        },
+        chin: {
+            width: '100%',
+            height: width * 0.1011673152,
+            flex: 1,
+            backgroundColor: theme.chin,
+            borderRadius: "0 0 ".concat(borderRadius * 0.8, "px ").concat(borderRadius * 0.8, "px"),
+        },
+        stand: {
+            width: standWidth,
+            height: standHeight,
+            background: theme.stand,
+            position: 'relative',
+            marginTop: "-".concat(width * 0.01, "px"), // Slight overlap with enclosure
+            zIndex: -1,
+            boxShadow: "0 ".concat(width * 0.01, "px ").concat(width * 0.02, "px rgba(0,0,0,0.1)"),
+        },
+        base: {
+            width: standWidth * 1.2,
+            height: width * 0.015,
+            backgroundColor: theme.base,
+            borderRadius: "".concat(width * 0.005, "px"),
+            marginTop: "-".concat(width * 0.005, "px"),
+            boxShadow: "0 ".concat(width * 0.01, "px ").concat(width * 0.02, "px rgba(0,0,0,0.2)"),
+        }
+    };
+};
+//# sourceMappingURL=IMac.styles.js.map

package/dist/esm/components/IMac/IMac.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IMac.styles.js","sourceRoot":"","sources":["../../../../src/components/IMac/IMac.styles.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/IMac/index.d.ts

@@ -0,0 +1,2 @@
+export * from './IMac';
+export * from './IMac.props';

package/dist/esm/components/IMac/index.js

@@ -0,0 +1,3 @@
+export * from './IMac';
+export * from './IMac.props';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/IMac/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/IMac/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC"}

package/dist/esm/components/IPad/IPad.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IPadProps } from './IPad.props';
+export declare const IPad: ({ width, children, color, scrollable, orientation }: IPadProps) => React.JSX.Element;

package/dist/esm/components/IPad/IPad.js

@@ -0,0 +1,16 @@
+import { Box } from '@mui/material';
+import React from 'react';
+import { useStyles } from './IPad.style';
+export var IPad = function (_a) {
+    var width = _a.width, children = _a.children, _b = _a.color, color = _b === void 0 ? 'space-gray' : _b, _c = _a.scrollable, scrollable = _c === void 0 ? true : _c, _d = _a.orientation, orientation = _d === void 0 ? 'landscape' : _d;
+    var style = useStyles({ width: width, color: color, scrollable: scrollable, orientation: orientation });
+    return (React.createElement(Box, { sx: style.ipad },
+        React.createElement(Box, { sx: style.buttons },
+            React.createElement(Box, { sx: style.volumeButton }),
+            React.createElement(Box, { sx: style.volumeButton })),
+        React.createElement(Box, { sx: style.powerButton }),
+        React.createElement(Box, { sx: style.display },
+            React.createElement(Box, { sx: style.camera }),
+            React.createElement(Box, { sx: style.children }, children))));
+};
+//# sourceMappingURL=IPad.js.map

package/dist/esm/components/IPad/IPad.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IPad.js","sourceRoot":"","sources":["../../../../src/components/IPad/IPad.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,MAAM,CAAC,IAAM,IAAI,GAAG,UAAC,EAMT;QALR,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,aAAoB,EAApB,KAAK,mBAAG,YAAY,KAAA,EACpB,kBAAiB,EAAjB,UAAU,mBAAG,IAAI,KAAA,EACjB,mBAAyB,EAAzB,WAAW,mBAAG,WAAW,KAAA;IAEzB,IAAM,KAAK,GAAG,SAAS,CAAC,EAAE,KAAK,OAAA,EAAE,KAAK,OAAA,EAAE,UAAU,YAAA,EAAE,WAAW,aAAA,EAAE,CAAC,CAAA;IAElE,OAAO,CACH,oBAAC,GAAG,IAAC,EAAE,EAAE,KAAK,CAAC,IAAI;QACf,oBAAC,GAAG,IAAC,EAAE,EAAE,KAAK,CAAC,OAAO;YAClB,oBAAC,GAAG,IAAC,EAAE,EAAE,KAAK,CAAC,YAAY,GAAQ;YACnC,oBAAC,GAAG,IAAC,EAAE,EAAE,KAAK,CAAC,YAAY,GAAQ,CACjC;QACN,oBAAC,GAAG,IAAC,EAAE,EAAE,KAAK,CAAC,WAAW,GAAQ;QAClC,oBAAC,GAAG,IAAC,EAAE,EAAE,KAAK,CAAC,OAAO;YAClB,oBAAC,GAAG,IAAC,EAAE,EAAE,KAAK,CAAC,MAAM,GAAQ;YAC7B,oBAAC,GAAG,IAAC,EAAE,EAAE,KAAK,CAAC,QAAQ,IAClB,QAAQ,CACP,CACJ,CACJ,CACT,CAAA;AACL,CAAC,CAAA"}

package/dist/esm/components/IPad/IPad.props.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+export type IPadColor = 'space-gray' | 'silver' | 'yellow' | 'pink' | 'blue';
+export interface IPadProps {
+    width: number;
+    children?: ReactNode;
+    color?: IPadColor;
+    scrollable?: boolean;
+    orientation?: 'landscape' | 'portrait';
+}

package/dist/esm/components/IPad/IPad.props.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=IPad.props.js.map

package/dist/esm/components/IPad/IPad.props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IPad.props.js","sourceRoot":"","sources":["../../../../src/components/IPad/IPad.props.ts"],"names":[],"mappings":""}

package/dist/esm/components/IPad/IPad.style.d.ts

@@ -0,0 +1,105 @@
+import { IPadColor } from "./IPad.props";
+export declare const useStyles: ({ width, color, scrollable, orientation }: StyleProps) => {
+    ipad: {
+        width: number;
+        height: number;
+        position: string;
+        borderRadius: string;
+        zIndex: string;
+        transition: string;
+    };
+    display: {
+        borderRadius: string;
+        boxShadow: string;
+        width: string;
+        height: string;
+        background: string;
+        zIndex: string;
+        overflow: string;
+        position: string;
+    };
+    children: {
+        width: string;
+        height: string;
+        overflow: string;
+        borderRadius: string;
+        margin: string;
+        position: string;
+        top: string;
+        left: string;
+        transform: string;
+        background: string;
+        '&::-webkit-scrollbar': {
+            display: string;
+        };
+        msOverflowStyle: string;
+        scrollbarWidth: string;
+    };
+    camera: {
+        width: string;
+        height: string;
+        background: string;
+        borderRadius: string;
+        position: string;
+        zIndex: string;
+        top: string;
+        left: string;
+        transform: string;
+        boxShadow: string;
+    };
+    buttons: {
+        top: string;
+        left: string;
+        flexDirection: string;
+        gap: string;
+        position: string;
+        zIndex: string;
+        display: string;
+    } | {
+        top: string;
+        right: string;
+        flexDirection: string;
+        gap: string;
+        position: string;
+        zIndex: string;
+        display: string;
+    };
+    volumeButton: {
+        width: string;
+        height: string;
+        background: string;
+        borderRadius: string;
+        border: string;
+        backgroundImage: string;
+    };
+    powerButton: {
+        width: string;
+        height: string;
+        top: string;
+        left: string;
+        backgroundImage: string;
+        position: string;
+        background: string;
+        borderRadius: string;
+        border: string;
+        zIndex: string;
+    } | {
+        width: string;
+        height: string;
+        top: string;
+        right: string;
+        backgroundImage: string;
+        position: string;
+        background: string;
+        borderRadius: string;
+        border: string;
+        zIndex: string;
+    };
+};
+interface StyleProps {
+    width: number;
+    color?: IPadColor;
+    scrollable?: boolean;
+    orientation?: 'landscape' | 'portrait';
+}
+export {};