@xyo-network/react-os 2.68.0-rc.1

package/dist/node/components/TestComponent.d.mts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+export interface TestComponentProps extends PropsWithChildren {
+}
+export declare const TestComponent: React.FC<TestComponentProps>;
+//# sourceMappingURL=TestComponent.d.ts.map

package/dist/node/components/TestComponent.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TestComponent.d.ts","sourceRoot":"","sources":["../../../src/components/TestComponent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAEzC,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;CAAG;AAEhE,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAEtD,CAAA"}

package/dist/node/components/TestComponent.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+export interface TestComponentProps extends PropsWithChildren {
+}
+export declare const TestComponent: React.FC<TestComponentProps>;
+//# sourceMappingURL=TestComponent.d.ts.map

package/dist/node/components/TestComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TestComponent.d.ts","sourceRoot":"","sources":["../../../src/components/TestComponent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAEzC,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;CAAG;AAEhE,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAEtD,CAAA"}

package/dist/node/components/XyOsClock/XyOsClock.d.cts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { BoxProps } from '@mui/material';
+interface ClockProps extends BoxProps {
+    date: number;
+}
+export interface XyOsClockProps {
+    clockSize: 'small' | 'medium' | 'large';
+    clockType: 'appbar' | 'widget';
+}
+export declare const XyOsClock: React.FC<XyOsClockProps>;
+export declare const SmallAppBarClock: React.FC<ClockProps>;
+export declare const MediumAppBarClock: React.FC<ClockProps>;
+export declare const LargeAppBarClock: React.FC<ClockProps>;
+export declare const SmallWidgetClock: React.FC<ClockProps>;
+export declare const MediumWidgetClock: React.FC<ClockProps>;
+export declare const LargeWidgetClock: React.FC<ClockProps>;
+export {};
+//# sourceMappingURL=XyOsClock.d.ts.map

package/dist/node/components/XyOsClock/XyOsClock.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"XyOsClock.d.ts","sourceRoot":"","sources":["../../../../src/components/XyOsClock/XyOsClock.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAqB,MAAM,eAAe,CAAA;AAK3D,UAAU,UAAW,SAAQ,QAAQ;IACnC,IAAI,EAAE,MAAM,CAAA;CACb;AAaD,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACvC,SAAS,EAAE,QAAQ,GAAG,QAAQ,CAAA;CAC/B;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA2B9C,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAOjD,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAOlD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAOjD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CASjD,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CASlD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAUjD,CAAA"}

package/dist/node/components/XyOsClock/XyOsClock.d.mts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { BoxProps } from '@mui/material';
+interface ClockProps extends BoxProps {
+    date: number;
+}
+export interface XyOsClockProps {
+    clockSize: 'small' | 'medium' | 'large';
+    clockType: 'appbar' | 'widget';
+}
+export declare const XyOsClock: React.FC<XyOsClockProps>;
+export declare const SmallAppBarClock: React.FC<ClockProps>;
+export declare const MediumAppBarClock: React.FC<ClockProps>;
+export declare const LargeAppBarClock: React.FC<ClockProps>;
+export declare const SmallWidgetClock: React.FC<ClockProps>;
+export declare const MediumWidgetClock: React.FC<ClockProps>;
+export declare const LargeWidgetClock: React.FC<ClockProps>;
+export {};
+//# sourceMappingURL=XyOsClock.d.ts.map

package/dist/node/components/XyOsClock/XyOsClock.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"XyOsClock.d.ts","sourceRoot":"","sources":["../../../../src/components/XyOsClock/XyOsClock.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAqB,MAAM,eAAe,CAAA;AAK3D,UAAU,UAAW,SAAQ,QAAQ;IACnC,IAAI,EAAE,MAAM,CAAA;CACb;AAaD,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACvC,SAAS,EAAE,QAAQ,GAAG,QAAQ,CAAA;CAC/B;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA2B9C,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAOjD,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAOlD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAOjD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CASjD,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CASlD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAUjD,CAAA"}

package/dist/node/components/XyOsClock/XyOsClock.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { BoxProps } from '@mui/material';
+interface ClockProps extends BoxProps {
+    date: number;
+}
+export interface XyOsClockProps {
+    clockSize: 'small' | 'medium' | 'large';
+    clockType: 'appbar' | 'widget';
+}
+export declare const XyOsClock: React.FC<XyOsClockProps>;
+export declare const SmallAppBarClock: React.FC<ClockProps>;
+export declare const MediumAppBarClock: React.FC<ClockProps>;
+export declare const LargeAppBarClock: React.FC<ClockProps>;
+export declare const SmallWidgetClock: React.FC<ClockProps>;
+export declare const MediumWidgetClock: React.FC<ClockProps>;
+export declare const LargeWidgetClock: React.FC<ClockProps>;
+export {};
+//# sourceMappingURL=XyOsClock.d.ts.map

package/dist/node/components/XyOsClock/XyOsClock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"XyOsClock.d.ts","sourceRoot":"","sources":["../../../../src/components/XyOsClock/XyOsClock.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAqB,MAAM,eAAe,CAAA;AAK3D,UAAU,UAAW,SAAQ,QAAQ;IACnC,IAAI,EAAE,MAAM,CAAA;CACb;AAaD,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACvC,SAAS,EAAE,QAAQ,GAAG,QAAQ,CAAA;CAC/B;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA2B9C,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAOjD,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAOlD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAOjD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CASjD,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CASlD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAUjD,CAAA"}

package/dist/node/components/XyOsClock/index.d.cts

@@ -0,0 +1,2 @@
+export * from './XyOsClock';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/components/XyOsClock/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/XyOsClock/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}

package/dist/node/components/XyOsClock/index.d.mts

@@ -0,0 +1,2 @@
+export * from './XyOsClock';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/components/XyOsClock/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/XyOsClock/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}

package/dist/node/components/XyOsClock/index.d.ts

@@ -0,0 +1,2 @@
+export * from './XyOsClock';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/components/XyOsClock/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/XyOsClock/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}

package/dist/node/components/index.d.cts

@@ -0,0 +1,2 @@
+export * from './TestComponent';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/components/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}

package/dist/node/components/index.d.mts

@@ -0,0 +1,2 @@
+export * from './TestComponent';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/components/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}

package/dist/node/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TestComponent';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}

package/dist/node/index.cjs

@@ -0,0 +1,37 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  TestComponent: () => TestComponent
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/TestComponent.tsx
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_jsx_runtime = require("react/jsx-runtime");
+var TestComponent = ({ children, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexRow, { ...props, children });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TestComponent
+});
+//# sourceMappingURL=index.cjs.map

package/dist/node/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/index.ts","../../src/components/TestComponent.tsx"],"sourcesContent":["export * from './components'\n","import { FlexRow } from '@xylabs/react-flexbox'\nimport { PropsWithChildren } from 'react'\n\nexport interface TestComponentProps extends PropsWithChildren {}\n\nexport const TestComponent: React.FC<TestComponentProps> = ({ children, ...props }) => {\n  return <FlexRow {...props}>{children}</FlexRow>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,2BAAwB;AAMf;AADF,IAAM,gBAA8C,CAAC,EAAE,UAAU,GAAG,MAAM,MAAM;AACrF,SAAO,4CAAC,gCAAS,GAAG,OAAQ,UAAS;AACvC;","names":[]}

package/dist/node/index.d.cts

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/dist/node/index.d.mts

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/dist/node/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/dist/node/index.js

@@ -0,0 +1,10 @@
+// src/components/TestComponent.tsx
+import { FlexRow } from "@xylabs/react-flexbox";
+import { jsx } from "react/jsx-runtime";
+var TestComponent = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(FlexRow, { ...props, children });
+};
+export {
+  TestComponent
+};
+//# sourceMappingURL=index.js.map

package/dist/node/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/TestComponent.tsx"],"sourcesContent":["import { FlexRow } from '@xylabs/react-flexbox'\nimport { PropsWithChildren } from 'react'\n\nexport interface TestComponentProps extends PropsWithChildren {}\n\nexport const TestComponent: React.FC<TestComponentProps> = ({ children, ...props }) => {\n  return <FlexRow {...props}>{children}</FlexRow>\n}\n"],"mappings":";AAAA,SAAS,eAAe;AAMf;AADF,IAAM,gBAA8C,CAAC,EAAE,UAAU,GAAG,MAAM,MAAM;AACrF,SAAO,oBAAC,WAAS,GAAG,OAAQ,UAAS;AACvC;","names":[]}

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@xyo-network/react-os",
+  "author": {
+    "email": "support@xyo.network",
+    "name": "XYO Development Team",
+    "url": "https://xyo.network"
+  },
+  "bugs": {
+    "email": "support@xyo.network",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
+  },
+  "dependencies": {
+    "@xylabs/react-flexbox": "^3.0.39",
+    "date-fns": "^3.3.1"
+  },
+  "peerDependencies": {
+    "@mui/material": "^5",
+    "@mui/styles": "^5",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@storybook/react": "^7.6.13",
+    "@xylabs/ts-scripts-yarn3": "^3.2.42",
+    "@xylabs/tsconfig-react": "^3.2.42",
+    "typescript": "^5.3.3"
+  },
+  "description": "Common React library for all XYO projects that use React",
+  "docs": "dist/docs.json",
+  "exports": {
+    ".": {
+      "node": {
+        "import": {
+          "types": "./dist/node/index.d.mts",
+          "default": "./dist/node/index.js"
+        },
+        "require": {
+          "types": "./dist/node/index.d.cts",
+          "default": "./dist/node/index.cjs"
+        }
+      },
+      "browser": {
+        "import": {
+          "types": "./dist/browser/index.d.mts",
+          "default": "./dist/browser/index.js"
+        },
+        "require": {
+          "types": "./dist/browser/index.d.cts",
+          "default": "./dist/browser/index.cjs"
+        }
+      },
+      "default": "./dist/browser/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/browser/index.cjs",
+  "module": "dist/browser/index.js",
+  "homepage": "https://xyo.network",
+  "keywords": [
+    "xyo",
+    "utility",
+    "typescript",
+    "react"
+  ],
+  "license": "LGPL-3.0-only",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
+  },
+  "scripts": {
+    "lint-pkg": "npmPkgJsonLint .",
+    "license": "yarn license-checker --exclude \"MIT, ISC, Apache-2.0, BSD, BSD-2-Clause, CC-BY-4.0, Unlicense, CC-BY-3.0, CC0-1.0\""
+  },
+  "sideEffects": false,
+  "types": "dist/browser/index.d.ts",
+  "version": "2.68.0-rc.1",
+  "type": "module",
+  "stableVersion": "2.67.18"
+}

package/src/components/Profile/Profile.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta, StoryFn } from '@storybook/react'
+import { BrowserRouter } from 'react-router-dom'
+
+import { FlexGrowCol } from '@xylabs/react-flexbox'
+import { XyOsProfile } from './Profile'
+const StorybookEntry = {
+  argTypes: {},
+  component: XyOsProfile,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'shared/XyOsProfile',
+} as Meta<typeof XyOsProfile>
+
+const Template: StoryFn<typeof XyOsProfile> = (args) => (
+  <BrowserRouter>
+    <XyOsProfile  {...args}></XyOsProfile>
+  </BrowserRouter>
+)
+
+const Default = Template.bind({})
+Default.args = {
+  xns:'@arietrouw'
+}
+
+
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/Profile/Profile.tsx

@@ -0,0 +1,59 @@
+import { Avatar, Button, Divider, Icon, IconButton, Paper, PaperProps, Typography, useTheme } from '@mui/material'
+import { green, purple } from '@mui/material/colors'
+import { FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'
+import { format, subHours } from 'date-fns'
+
+import { StatsModal } from './StatsModal'
+interface XyOsProfileProps extends PaperProps {
+  pfp: string
+  xns: string
+}
+
+export const XyOsProfile: React.FC<XyOsProfileProps> = ({ xns, pfp, ...props }) => {
+  const theme = useTheme()
+  return (
+    <FlexGrowCol gap={1} alignItems="flex-start">
+      <FlexGrowRow gap={1}>
+        <Avatar alt={xns} src={'https://arietrouw.com/assets/img/arie.jpg'} sx={{ height: 100, width: 100 }} />
+        <FlexGrowCol width="100%" alignItems={'flex-start'}>
+          <Typography variant="h5">{xns}</Typography>
+          <Typography variant="subtitle2">Last Active: {format(subHours(Date.now(), 4), 'pp')}</Typography>
+        </FlexGrowCol>
+      </FlexGrowRow>
+      <Paper sx={{ padding: 1 }}>
+        <FlexGrowRow paddingBottom={1} width="100%" alignItems="center" justifyContent="space-between">
+          <Typography variant="body1" fontWeight={'medium'}>
+            2024 Stats
+          </Typography>
+          <StatsModal />
+        </FlexGrowRow>
+        <FlexGrowRow justifyContent="flex-start" width="100%" gap={1}>
+          <FlexGrowCol alignItems={'flex-start'}>
+            <Typography variant="h5">3,921</Typography>
+            <Typography variant="body2">Bound Witnesses</Typography>
+          </FlexGrowCol>
+          <Divider flexItem orientation="vertical"></Divider>
+          <FlexGrowCol alignItems={'flex-start'}>
+            <Typography variant="h5">30</Typography>
+            <Typography variant="body2">Connected Bridges</Typography>
+          </FlexGrowCol>
+          <Divider flexItem orientation="vertical"></Divider>
+          <FlexGrowCol alignItems={'flex-start'}>
+            <Typography variant="h5">3,921</Typography>
+            <Typography variant="body2">Bound Witnesses</Typography>
+          </FlexGrowCol>
+        </FlexGrowRow>
+      </Paper>
+      <Paper sx={{ padding: 1 }}>
+        <Typography paddingBottom={1} variant="h6">
+          Badges
+        </Typography>
+        <FlexGrowRow justifyContent="flex-start" width="100%" gap={1}>
+          <Avatar sx={{ color: theme.palette.primary.main, height: 50, width: 50 }}></Avatar>
+          <Avatar sx={{ color: theme.palette.primary.main, height: 50, width: 50 }}></Avatar>
+          <Avatar sx={{ color: theme.palette.primary.main, height: 50, width: 50 }}></Avatar>
+        </FlexGrowRow>
+      </Paper>
+    </FlexGrowCol>
+  )
+}

package/src/components/Profile/StatsModal.tsx

@@ -0,0 +1,49 @@
+import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded'
+import { Avatar, Backdrop, Box, Fade, IconButton, Modal, Typography } from '@mui/material'
+import { FlexGrowCol } from '@xylabs/react-flexbox'
+import * as React from 'react'
+
+const style = {
+  bgcolor: 'background.paper',
+  boxShadow: 24,
+  p: 4,
+  width: 400,
+}
+
+export const StatsModal: React.FC = () => {
+  const [open, setOpen] = React.useState(false)
+  const handleOpen = () => setOpen(true)
+  const handleClose = () => setOpen(false)
+
+  return (
+    <div>
+      <IconButton size="small" color="primary" onClick={handleOpen}>
+        <ArrowForwardRoundedIcon />
+      </IconButton>
+      <Modal
+        aria-labelledby="transition-modal-title"
+        aria-describedby="transition-modal-description"
+        open={open}
+        onClose={handleClose}
+        closeAfterTransition
+        slots={{ backdrop: Backdrop }}
+        slotProps={{
+          backdrop: {
+            timeout: 500,
+          },
+        }}
+      >
+        <Fade in={open}>
+          <Box sx={style}>
+            <FlexGrowCol alignItems={'center'}>
+              <Avatar sx={{ height: '200px', width: '200px' }}></Avatar>
+              <Typography id="transition-modal-description" align="center" sx={{ mt: 2 }}>
+                Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+              </Typography>
+            </FlexGrowCol>
+          </Box>
+        </Fade>
+      </Modal>
+    </div>
+  )
+}

package/src/components/Profile/index.ts

@@ -0,0 +1 @@
+export * from './Profile'

package/src/components/TestComponent.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta, StoryFn } from '@storybook/react'
+import { TestComponent, TestComponentProps } from './TestComponent'
+
+// eslint-disable-next-line import/no-default-export
+export default {
+  title: 'modules/os/TestComponent',
+} as Meta
+
+const Template: StoryFn<React.FC<TestComponentProps>> = (props) => {
+  return <TestComponent {...props} />
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+export { Default }

package/src/components/TestComponent.tsx

@@ -0,0 +1,8 @@
+import { FlexRow } from '@xylabs/react-flexbox'
+import { PropsWithChildren } from 'react'
+
+export interface TestComponentProps extends PropsWithChildren {}
+
+export const TestComponent: React.FC<TestComponentProps> = ({ children, ...props }) => {
+  return <FlexRow {...props}>{children}</FlexRow>
+}

package/src/components/XyOsClock/XyOsClock.stories.tsx

@@ -0,0 +1,41 @@
+import { Meta, StoryFn } from '@storybook/react'
+import { BrowserRouter } from 'react-router-dom'
+
+import { FlexGrowCol } from '@xylabs/react-flexbox'
+import { XyOsClock } from './XyOsClock'
+import { Box, Typography } from '@mui/material'
+const StorybookEntry = {
+  argTypes: {},
+  component: XyOsClock,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'shared/XyOsClock',
+} as Meta<typeof XyOsClock>
+
+const Template: StoryFn<typeof XyOsClock> = (args) => (
+  <BrowserRouter>
+    <FlexGrowCol gap={2}  alignItems={'center'} justifyContent={'center'}>
+      <FlexGrowCol alignItems={'center'} justifyContent={'center'}>
+        <XyOsClock  {...args}></XyOsClock>
+      </FlexGrowCol>
+    </FlexGrowCol>
+  </BrowserRouter>
+)
+
+const Default = Template.bind({})
+Default.args = {
+  clockType:'appbar'
+}
+
+
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/XyOsClock/XyOsClock.tsx

@@ -0,0 +1,114 @@
+import { BoxProps, Paper, Typography } from '@mui/material'
+import { FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'
+import { format } from 'date-fns'
+import { ReactElement, useEffect, useState } from 'react'
+
+interface ClockProps extends BoxProps {
+  date: number
+}
+
+interface ComponentSizeProps {
+  large: ReactElement<XyOsClockProps>
+  medium: ReactElement<XyOsClockProps>
+  small: ReactElement<XyOsClockProps>
+}
+
+interface ClockComponentsProps {
+  components: ComponentSizeProps
+  type: 'appbar' | 'widget'
+}
+
+export interface XyOsClockProps {
+  clockSize: 'small' | 'medium' | 'large'
+  clockType: 'appbar' | 'widget'
+}
+
+export const XyOsClock: React.FC<XyOsClockProps> = ({ clockType, clockSize, ...props }) => {
+  const [date, setDate] = useState(Date.now())
+  useEffect(() => {
+    const timer = setInterval(() => setDate(Date.now()), 500)
+    return function cleanup() {
+      clearInterval(timer)
+    }
+  }, [])
+  const ClockComponents: ClockComponentsProps[] = [
+    {
+      components: {
+        large: <LargeAppBarClock date={date} {...props} />,
+        medium: <MediumAppBarClock date={date} {...props} />,
+        small: <SmallAppBarClock date={date} {...props} />,
+      },
+      type: 'appbar',
+    },
+    {
+      components: {
+        large: <LargeWidgetClock date={date} {...props} />,
+        medium: <MediumWidgetClock date={date} {...props} />,
+        small: <SmallWidgetClock date={date} {...props} />,
+      },
+      type: 'widget',
+    },
+  ]
+  return ClockComponents.find((component) => component.type === clockType)?.components[`${clockSize}`]
+}
+
+export const SmallAppBarClock: React.FC<ClockProps> = ({ date }) => {
+  return (
+    <FlexGrowRow gap={1}>
+      <Typography variant="body1">{format(date, 'E MMM dd')}</Typography>
+      <Typography variant="body1">{format(date, 'p')}</Typography>
+    </FlexGrowRow>
+  )
+}
+
+export const MediumAppBarClock: React.FC<ClockProps> = ({ date }) => {
+  return (
+    <FlexGrowRow gap={1}>
+      <Typography variant="body1">{format(date, 'E MMM dd')}</Typography>
+      <Typography variant="body1">{format(date, 'pp')}</Typography>
+    </FlexGrowRow>
+  )
+}
+
+export const LargeAppBarClock: React.FC<ClockProps> = ({ date }) => {
+  return (
+    <FlexGrowRow gap={1}>
+      <Typography variant="body1">{format(date, 'EEEE MMM dd, yyy')}</Typography>
+      <Typography variant="body1">{format(date, 'ppp')}</Typography>
+    </FlexGrowRow>
+  )
+}
+
+export const SmallWidgetClock: React.FC<ClockProps> = ({ date }) => {
+  return (
+    <Paper sx={{ padding: 1 }}>
+      <FlexGrowCol>
+        <Typography variant="h6">{format(date, 'p')}</Typography>
+        <Typography variant="body2">{format(date, 'E MMM dd')}</Typography>
+      </FlexGrowCol>
+    </Paper>
+  )
+}
+
+export const MediumWidgetClock: React.FC<ClockProps> = ({ date }) => {
+  return (
+    <Paper sx={{ padding: 1 }}>
+      <FlexGrowCol>
+        <Typography variant="h6">{format(date, 'pp')}</Typography>
+        <Typography variant="body2">{format(date, 'E MMM dd, yyyy')}</Typography>
+      </FlexGrowCol>
+    </Paper>
+  )
+}
+
+export const LargeWidgetClock: React.FC<ClockProps> = ({ date }) => {
+  return (
+    <Paper sx={{ padding: 1 }}>
+      <FlexGrowCol>
+        <Typography variant="body2">{format(date, 'EEEE')}</Typography>
+        <Typography variant="h5">{format(date, 'pp')}</Typography>
+        <Typography variant="body1">{format(date, 'MMM dd, yyyy')}</Typography>
+      </FlexGrowCol>
+    </Paper>
+  )
+}

package/src/components/XyOsClock/index.ts

@@ -0,0 +1 @@
+export * from './XyOsClock'

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from './TestComponent'

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components'