react-electronix 1.0.10 → 2.0.0

package/README.md

@@ -1,67 +1,131 @@
 # React ElectroniX
 
-`react-electronix` is a library that provides components to simulate the appearance of devices like iPhones and Macbooks in a React application.
+`react-electronix` is a library that provides premium, realistic 3D React components to simulate the appearance of modern devices like iPhones, MacBooks, IMacs, and Galaxy phones.
 
 ## Installation
 
 You can install `react-electronix` using npm:
 
-```
+```bash
 npm install react-electronix
 ```
 
 ## Usage
 
-### Mac component
-
-The `Mac` component simulates the appearance of a Macbook. It accepts the following props:
+### MacbookPro component
 
-| Prop         | Type              | Default | Description                                                                                                                 |
-| ------------ | ----------------- | ------- | --------------------------------------------------------------------------------------------------------------------------- |
-| `open`       | boolean           | `true`  | Whether the Macbook is open or closed                                                                                       |
-| `width`      | number            | `600`   | The width of the Macbook in pixels                                                                                          |
-| `startup`    | boolean           | `false` | Whether to show a startup animation                                                                                         |
-| `animateOpen`| boolean           | `false` | Whether to animate the opening/closing of the Macbook                                                                       |
-| `openAngle`  | number (degrees)  | `0`     | The angle at which the Macbook opens (0 for fully flat, 90 for fully open)                                                   |
-| `children`   | React.ReactNode  |         | The content to display on the Macbook screen                                                                                |
+The `MacbookPro` component simulates the appearance of a modern 14-inch MacBook Pro, including the iconic notch and a 3D perspective fold.
 
-Here's an example usage of the `Mac` component:
+| Prop         | Type              | Default    | Description                                                                                                                 |
+| ------------ | ----------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------- |
+| `width`      | number            | `600`      | The width of the Macbook in pixels                                                                                          |
+| `open`       | boolean           | `true`     | Whether the Macbook is open or closed                                                                                       |
+| `startup`    | boolean           | `false`    | Whether to show a startup animation                                                                                         |
+| `animateOpen`| boolean           | `false`    | Whether to animate the opening/closing of the Macbook                                                                       |
+| `openAngle`  | number (degrees)  | `0`        | The angle at which the Macbook opens (0 for fully flat, 90 for fully open)                                                   |
+| `perspective`| number            | `2500`     | The CSS perspective value for the 3D effect                                                                                 |
+| `color`      | `MacbookProColor` | `'silver'` | Available: `'silver'`, `'space-black'`                                                                                      |
+| `old`        | boolean           | `false`    | Set to `true` to display the "Classic" MacBook Pro design (legacy style)                                                    |
+| `children`   | React.ReactNode   |            | The content to display on the screen                                                                                        |
 
 ```jsx
-import { Mac } from 'react-electronix';
+import { MacbookPro } from 'react-electronix';
 
 function App() {
   return (
-    <Mac open={true} width={800} animateOpen={true} startup={true}>
-      <h1>Hello, World!</h1>
-    </Mac>
+    <MacbookPro open={true} width={800} color="space-black" startup={true}>
+      <div style={{ padding: '20px', color: 'white' }}>
+        <h1>MacBook Pro 14"</h1>
+        <p>Featuring Liquid Retina XDR display with ProMotion.</p>
+      </div>
+    </MacbookPro>
   );
 }
 ```
 
 ### Iphone component
 
-The `Iphone` component simulates the appearance of an iPhone. It accepts the following props:
+The `Iphone` component simulates a modern iPhone with high-fidelity titanium finishes.
 
-| Prop        | Type             | Default | Description                                                         |
-| ----------- | ---------------- | ------- | ------------------------------------------------------------------- |
-| `width`     | number           | `400`   | The width of the iPhone in pixels                                   |
-| `children`  | React.ReactNode |         | The content to display on the iPhone screen (e.g. a mobile website) |
-
-Here's an example usage of the `Iphone` component:
+| Prop      | Type          | Default     | Description                                                                                                                                                                 |
+| --------- | ------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `width`   | number        | `400`       | The width of the iPhone in pixels                                                                                                                                           |
+| `color`   | `IphoneColor` | `'black'`   | Available: `'black'`, `'silver'`, `'sage'`, `'mist-blue'`, `'lavender'`, `'cosmic-orange'`, `'deep-blue'`                                                                   |
+| `children`| React.ReactNode|             | The content to display on the screen                                                                                                                                        |
 
 ```jsx
 import { Iphone } from 'react-electronix';
 
 function App() {
   return (
-    <Iphone width={400}>
-      <h1>Hello, World!</h1>
+    <Iphone width={400} color="mist-blue">
+      <div style={{ backgroundColor: '#f0f0f0', height: '100%' }}>
+        <h1>iPhone Content</h1>
+      </div>
     </Iphone>
   );
 }
 ```
 
+### Galaxy component
+
+The `Galaxy` component simulates a modern Samsung Galaxy device with a punch-hole camera and an expansive color palette.
+
+| Prop      | Type          | Default           | Description                                                                                                                                                                                                                                                                      |
+| --------- | ------------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `width`   | number        | `400`             | The width of the device in pixels                                                                                                                                                                                                                                                |
+| `color`   | `GalaxyColor` | `'titanium-gray'` | **Titanium**: `'titanium-silverblue'`, `'titanium-black'`, `'titanium-gray'`, `'titanium-whitesilver'`, `'titanium-jetblack'`, `'titanium-jadegreen'`, `'titanium-pinkgold'`. <br/> **Standard**: `'navy'`, `'icyblue'`, `'silver-shadow'`, `'mint'`, `'blueblack'`, `'coralred'`, `'pinkgold'`. |
+| `children`| React.ReactNode|                   | The content to display on the screen                                                                                                                                                                                                                                             |
+
+```jsx
+import { Galaxy } from 'react-electronix';
+
+function App() {
+  return (
+    <Galaxy width={400} color="titanium-silverblue">
+      <div style={{ backgroundColor: '#000', color: '#fff', height: '100%' }}>
+        <h1>Galaxy Display</h1>
+      </div>
+    </Galaxy>
+  );
+}
+```
+
+### IMac component
+
+The `IMac` component simulates a modern 24-inch IMac with its signature front-facing "chin" and slim profile.
+
+| Prop      | Type        | Default    | Description                                                                                                          |
+| --------- | ----------- | ---------- | -------------------------------------------------------------------------------------------------------------------- |
+| `width`   | number      | `600`      | The width of the IMac in pixels                                                                                      |
+| `color`   | `IMacColor` | `'silver'` | Available: `'blue'`, `'purple'`, `'pink'`, `'orange'`, `'yellow'`, `'green'`, `'silver'`                             |
+| `children`| React.ReactNode|            | The content to display on the screen                                                                                 |
+
+```jsx
+import { IMac } from 'react-electronix';
+
+function App() {
+  return (
+    <IMac width={600} color="pink">
+      <div style={{ background: '#fff', height: '100%' }}>
+        <h1>iMac Pro</h1>
+      </div>
+    </IMac>
+  );
+}
+```
+
+### Mac component (Legacy)
+
+The original `Mac` component for general MacBook simulation.
+
+| Prop      | Type            | Default | Description                                                                |
+| --------- | --------------- | ------- | -------------------------------------------------------------------------- |
+| `width`   | number          | `600`   | The width of the Macbook in pixels                                         |
+| `open`    | boolean         | `true`  | Whether the Macbook is open or closed                                      |
+| `startup` | boolean         | `false` | Whether to show a startup animation                                        |
+| `children`| React.ReactNode |         | The content to display on the screen                                       |
+
 ## License
 
 This library is licensed under the MIT License.

package/dist/cjs/components/Galaxy/Galaxy.d.ts

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

package/dist/cjs/components/Galaxy/Galaxy.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Galaxy = void 0;
+var tslib_1 = require("tslib");
+var material_1 = require("@mui/material");
+var react_1 = tslib_1.__importDefault(require("react"));
+var Galaxy_style_1 = require("./Galaxy.style");
+var Galaxy = function (_a) {
+    var width = _a.width, children = _a.children, _b = _a.color, color = _b === void 0 ? 'titanium-gray' : _b;
+    var style = (0, Galaxy_style_1.useStyles)({ width: width, color: color });
+    return (react_1.default.createElement(material_1.Box, { sx: style.galaxy },
+        react_1.default.createElement(material_1.Box, { sx: style.frame }),
+        react_1.default.createElement(material_1.Box, { sx: style.buttons },
+            react_1.default.createElement(material_1.Box, { sx: style.volumeRocker }),
+            react_1.default.createElement(material_1.Box, { sx: style.powerButton })),
+        react_1.default.createElement(material_1.Box, { sx: style.display },
+            react_1.default.createElement(material_1.Box, { sx: style.punchHole }),
+            react_1.default.createElement(material_1.Box, { sx: style.children }, children))));
+};
+exports.Galaxy = Galaxy;
+//# sourceMappingURL=Galaxy.js.map

package/dist/cjs/components/Galaxy/Galaxy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Galaxy.js","sourceRoot":"","sources":["../../../../src/components/Galaxy/Galaxy.tsx"],"names":[],"mappings":";;;;AAAA,0CAAoC;AACpC,wDAA0B;AAE1B,+CAA2C;AAEpC,IAAM,MAAM,GAAG,UAAC,EAIT;QAHV,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,aAAuB,EAAvB,KAAK,mBAAG,eAAe,KAAA;IAEvB,IAAM,KAAK,GAAG,IAAA,wBAAS,EAAC,EAAE,KAAK,OAAA,EAAE,KAAK,OAAA,EAAE,CAAC,CAAC;IAE1C,OAAO,CACH,8BAAC,cAAG,IAAC,EAAE,EAAE,KAAK,CAAC,MAAM;QACjB,8BAAC,cAAG,IAAC,EAAE,EAAE,KAAK,CAAC,KAAK,GAAI;QACxB,8BAAC,cAAG,IAAC,EAAE,EAAE,KAAK,CAAC,OAAO;YAClB,8BAAC,cAAG,IAAC,EAAE,EAAE,KAAK,CAAC,YAAY,GAAI;YAC/B,8BAAC,cAAG,IAAC,EAAE,EAAE,KAAK,CAAC,WAAW,GAAI,CAC5B;QACN,8BAAC,cAAG,IAAC,EAAE,EAAE,KAAK,CAAC,OAAO;YAClB,8BAAC,cAAG,IAAC,EAAE,EAAE,KAAK,CAAC,SAAS,GAAI;YAC5B,8BAAC,cAAG,IAAC,EAAE,EAAE,KAAK,CAAC,QAAQ,IAClB,QAAQ,CACP,CACJ,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAtBW,QAAA,MAAM,UAsBjB"}

package/dist/cjs/components/Galaxy/Galaxy.props.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+export type GalaxyColor = 'titanium-silverblue' | 'titanium-black' | 'titanium-gray' | 'titanium-whitesilver' | 'titanium-jetblack' | 'titanium-jadegreen' | 'titanium-pinkgold' | 'navy' | 'icyblue' | 'silver-shadow' | 'mint' | 'blueblack' | 'coralred' | 'pinkgold';
+export interface GalaxyProps {
+    width: number;
+    children?: ReactNode;
+    color?: GalaxyColor;
+}

package/dist/cjs/components/Galaxy/Galaxy.props.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=Galaxy.props.js.map

package/dist/cjs/components/Galaxy/Galaxy.props.js.map

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

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

@@ -0,0 +1,85 @@
+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;
+    };
+    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/cjs/components/Galaxy/Galaxy.style.js

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+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',
+    },
+};
+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',
+        },
+        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)',
+        }
+    };
+};
+exports.useStyles = useStyles;
+//# sourceMappingURL=Galaxy.style.js.map

package/dist/cjs/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/cjs/components/Galaxy/index.d.ts

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

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Galaxy"), exports);
+tslib_1.__exportStar(require("./Galaxy.props"), exports);
+//# sourceMappingURL=index.js.map

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

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

package/dist/cjs/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/cjs/components/IMac/IMac.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IMac = void 0;
+var tslib_1 = require("tslib");
+var material_1 = require("@mui/material");
+var react_1 = tslib_1.__importDefault(require("react"));
+var IMac_styles_1 = require("./IMac.styles");
+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 = (0, IMac_styles_1.useStyles)({ width: width, color: color });
+    return (react_1.default.createElement(material_1.Box, { className: 'imac', sx: style.imac },
+        react_1.default.createElement(material_1.Box, { className: 'main-body', sx: style.mainBody },
+            react_1.default.createElement(material_1.Box, { className: 'enclosure', sx: style.enclosure },
+                react_1.default.createElement(material_1.Box, { className: 'camera', sx: style.camera }),
+                react_1.default.createElement(material_1.Box, { className: 'display-area', sx: style.displayArea },
+                    react_1.default.createElement(material_1.Box, { className: 'screen-content', sx: style.screenContent }, children))),
+            react_1.default.createElement(material_1.Box, { className: 'chin', sx: style.chin })),
+        react_1.default.createElement(material_1.Box, { className: 'stand', sx: style.stand }),
+        react_1.default.createElement(material_1.Box, { className: 'base', sx: style.base })));
+};
+exports.IMac = IMac;
+//# sourceMappingURL=IMac.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IMac.js","sourceRoot":"","sources":["../../../../src/components/IMac/IMac.tsx"],"names":[],"mappings":";;;;AAAA,0CAAoC;AACpC,wDAA0B;AAE1B,6CAA0C;AAEnC,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,IAAA,uBAAS,EAAC,EAAE,KAAK,OAAA,EAAE,KAAK,OAAA,EAAE,CAAC,CAAC;IAE1C,OAAO,CACH,8BAAC,cAAG,IAAC,SAAS,EAAC,MAAM,EAAC,EAAE,EAAE,KAAK,CAAC,IAAI;QAChC,8BAAC,cAAG,IAAC,SAAS,EAAC,WAAW,EAAC,EAAE,EAAE,KAAK,CAAC,QAAQ;YACzC,8BAAC,cAAG,IAAC,SAAS,EAAC,WAAW,EAAC,EAAE,EAAE,KAAK,CAAC,SAAS;gBAC1C,8BAAC,cAAG,IAAC,SAAS,EAAC,QAAQ,EAAC,EAAE,EAAE,KAAK,CAAC,MAAM,GAAI;gBAC5C,8BAAC,cAAG,IAAC,SAAS,EAAC,cAAc,EAAC,EAAE,EAAE,KAAK,CAAC,WAAW;oBAC/C,8BAAC,cAAG,IAAC,SAAS,EAAC,gBAAgB,EAAC,EAAE,EAAE,KAAK,CAAC,aAAa,IAClD,QAAQ,CACP,CACJ,CACJ;YACN,8BAAC,cAAG,IAAC,SAAS,EAAC,MAAM,EAAC,EAAE,EAAE,KAAK,CAAC,IAAI,GAAI,CACtC;QACN,8BAAC,cAAG,IAAC,SAAS,EAAC,OAAO,EAAC,EAAE,EAAE,KAAK,CAAC,KAAK,GAAI;QAC1C,8BAAC,cAAG,IAAC,SAAS,EAAC,MAAM,EAAC,EAAE,EAAE,KAAK,CAAC,IAAI,GAAI,CACtC,CACT,CAAC;AACN,CAAC,CAAC;AAxBW,QAAA,IAAI,QAwBf"}

package/dist/cjs/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/cjs/components/IMac/IMac.props.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=IMac.props.js.map

package/dist/cjs/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/cjs/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 {};