@kirill.konshin/mui 0.0.1 → 0.0.2

package/.ctirc

@@ -1,11 +1,20 @@
 {
-  "addNewline": true,
-  "fileExcludePatterns": [
-    "*.stories.*",
-    "*.test.*",
-    "*.fixture.*"
-  ],
-  "verbose": false,
-  "withoutBackupFile": true,
-  "withoutComment": true
-}
+  "options": [
+    {
+      "mode": "create",
+      "project": "tsconfig.json",
+      "include": "src/**/*.{ts,tsx}",
+      "exclude": [
+        "**/*.stories.*",
+        "**/*.test.*",
+        "**/*.fixture.*"
+      ],
+      "startFrom": "src",
+      "backup": false,
+      "overwrite": true,
+      "generationStyle": "default-alias-named-star",
+      "output": "src",
+      "verbose": true
+    }
+  ]
+}

package/.turbo/turbo-build.log

@@ -1,16 +1,24 @@
 vite v7.0.6 building SSR bundle for production...
-create succeeded: /home/runner/work/utils/utils/packages/mui/src
+- ctix 'create' mode start, ...
+✔ /home/runner/work/utils/utils/packages/mui/tsconfig.json loading complete!
+✔ analysis export statements completed!
+- build "index.ts" file start
+- output file exists check, ...
+
+
+✔ ctix 'create' mode complete!
 transforming...
-✓ 5 modules transformed.
+✓ 6 modules transformed.
 rendering chunks...
 
 [vite:dts] Start generate declaration files...
-dist/readOnly.js             0.31 kB │ map: 0.54 kB
-dist/index.js                0.33 kB │ map: 0.09 kB
-dist/formLabelLegend.js      0.38 kB │ map: 0.66 kB
-dist/genericControl.js       0.50 kB │ map: 1.01 kB
-dist/formControlFieldset.js  0.64 kB │ map: 1.22 kB
-[vite:dts] Declaration files built in 2888ms.
+dist/appBarOffset.js         0.37 kB │ map: 0.68 kB
+dist/readOnly.js             0.37 kB │ map: 0.68 kB
+dist/index.js                0.40 kB │ map: 0.09 kB
+dist/formLabelLegend.js      0.44 kB │ map: 0.79 kB
+dist/genericControl.js       0.59 kB │ map: 1.16 kB
+dist/formControlFieldset.js  0.68 kB │ map: 1.24 kB
+[vite:dts] Declaration files built in 3345ms.
 
-✓ built in 3.55s
+✓ built in 7.04s
 Updated package.json with exports

package/AGENTS.md

@@ -0,0 +1,19 @@
+# MUI Classes In Selectors
+
+Always use following notation because it's the only one that works with minification:
+
+```tsx
+import Input, { inputClasses } from '@mui/material/Input';
+
+const cmp = (
+    <Box
+        sx={{
+            [`& .${inputClasses.root}`]: {
+                // styles
+            },
+        }}
+    >
+        <Input />
+    </Box>
+);
+```

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# @kirill.konshin/mui
+
+## 0.0.2
+
+### Patch Changes
+
+- 63fdba8: Agent-assisted refactoring
+- 63fdba8: Divided core to browser/node/worker-specific packages, CTIX upgrade, etc.

package/dist/appBarOffset.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { BoxProps } from '@mui/material/Box';
+export type AppBarOffsetProps = BoxProps;
+export declare const AppBarOffset: FC<AppBarOffsetProps>;
+//# sourceMappingURL=appBarOffset.d.ts.map

package/dist/appBarOffset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"appBarOffset.d.ts","sourceRoot":"","sources":["../src/appBarOffset.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;AACxC,OAAO,EAAkB,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7D,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC;AAEzC,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAE7C,CAAC"}

package/dist/appBarOffset.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import Box from "@mui/material/Box";
+const AppBarOffset = memo(function AppBarOffset2({ sx, ...props }) {
+  return /* @__PURE__ */ jsx(Box, { ...props, sx: [({ mixins }) => mixins.toolbar, ...Array.isArray(sx) ? sx : [sx]] });
+});
+export {
+  AppBarOffset
+};
+//# sourceMappingURL=appBarOffset.js.map

package/dist/appBarOffset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"appBarOffset.js","sources":["../src/appBarOffset.tsx"],"sourcesContent":["import React, { FC, memo } from 'react';\nimport { default as Box, BoxProps } from '@mui/material/Box';\n\nexport type AppBarOffsetProps = BoxProps;\n\nexport const AppBarOffset: FC<AppBarOffsetProps> = memo(function AppBarOffset({ sx, ...props }) {\n    return <Box {...props} sx={[({ mixins }) => mixins.toolbar, ...(Array.isArray(sx) ? sx : [sx])]} />;\n});\n"],"names":["AppBarOffset"],"mappings":";;;AAKO,MAAM,eAAsC,KAAK,SAASA,cAAa,EAAE,IAAI,GAAG,SAAS;AAC5F,SAAO,oBAAC,OAAK,GAAG,OAAO,IAAI,CAAC,CAAC,EAAE,aAAa,OAAO,SAAS,GAAI,MAAM,QAAQ,EAAE,IAAI,KAAK,CAAC,EAAE,CAAE,GAAG;AACrG,CAAC;"}

package/dist/formControlFieldset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formControlFieldset.d.ts","sourceRoot":"","sources":["../src/formControlFieldset.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAGvE,MAAM,MAAM,wBAAwB,GAAG,mBAAmB,CAAC;AAE3D,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAmB5D,CAAC"}
+{"version":3,"file":"formControlFieldset.d.ts","sourceRoot":"","sources":["../src/formControlFieldset.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;AACxC,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAGvE,MAAM,MAAM,wBAAwB,GAAG,mBAAmB,CAAC;AAE3D,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAmB3D,CAAC"}

package/dist/formControlFieldset.js

@@ -1,7 +1,8 @@
 import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
 import { GenericControl } from "./genericControl.js";
 import { inputClasses } from "@mui/material/Input";
-const FormControlFieldset = function FormControlFieldset2({
+const FormControlFieldset = memo(function FormControlFieldset2({
   children,
   sx,
   ...props
@@ -21,7 +22,7 @@ const FormControlFieldset = function FormControlFieldset2({
       children
     }
   );
-};
+});
 export {
   FormControlFieldset
 };

package/dist/formControlFieldset.js.map

@@ -1 +1 @@
-{"version":3,"file":"formControlFieldset.js","sources":["../src/formControlFieldset.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { GenericControl, GenericControlProps } from './genericControl';\nimport { inputClasses } from '@mui/material/Input';\n\nexport type FormControlFieldsetProps = GenericControlProps;\n\nexport const FormControlFieldset: FC<FormControlFieldsetProps> = function FormControlFieldset({\n    children,\n    sx,\n    ...props\n}) {\n    return (\n        <GenericControl\n            {...props}\n            component=\"fieldset\"\n            sx={{\n                ...sx,\n                [`legend + .${inputClasses.root}`]: {\n                    marginTop: 2, //FIXME 16px, hardcoded from @mui/material/Input/Input.js @ 59\n                },\n            }}\n        >\n            {children}\n        </GenericControl>\n    );\n};\n"],"names":["FormControlFieldset"],"mappings":";;;AAMO,MAAM,sBAAoD,SAASA,qBAAoB;AAAA,EAC1F;AAAA,EACA;AAAA,EACA,GAAG;AACP,GAAG;AACC,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,WAAU;AAAA,MACV,IAAI;AAAA,QACA,GAAG;AAAA,QACH,CAAC,aAAa,aAAa,IAAI,EAAE,GAAG;AAAA,UAChC,WAAW;AAAA;AAAA,QAAA;AAAA,MACf;AAAA,MAGH;AAAA,IAAA;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"formControlFieldset.js","sources":["../src/formControlFieldset.tsx"],"sourcesContent":["import React, { FC, memo } from 'react';\nimport { GenericControl, GenericControlProps } from './genericControl';\nimport { inputClasses } from '@mui/material/Input';\n\nexport type FormControlFieldsetProps = GenericControlProps;\n\nexport const FormControlFieldset: FC<FormControlFieldsetProps> = memo(function FormControlFieldset({\n    children,\n    sx,\n    ...props\n}) {\n    return (\n        <GenericControl\n            {...props}\n            component=\"fieldset\"\n            sx={{\n                ...sx,\n                [`legend + .${inputClasses.root}`]: {\n                    marginTop: 2, //FIXME 16px, hardcoded from @mui/material/Input/Input.js @ 59\n                },\n            }}\n        >\n            {children}\n        </GenericControl>\n    );\n});\n"],"names":["FormControlFieldset"],"mappings":";;;;AAMO,MAAM,sBAAoD,KAAK,SAASA,qBAAoB;AAAA,EAC/F;AAAA,EACA;AAAA,EACA,GAAG;AACP,GAAG;AACC,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,WAAU;AAAA,MACV,IAAI;AAAA,QACA,GAAG;AAAA,QACH,CAAC,aAAa,aAAa,IAAI,EAAE,GAAG;AAAA,UAChC,WAAW;AAAA;AAAA,QAAA;AAAA,MACf;AAAA,MAGH;AAAA,IAAA;AAAA,EAAA;AAGb,CAAC;"}

package/dist/formLabelLegend.d.ts

@@ -1,4 +1,5 @@
 import { FC } from 'react';
 import { InputLabelProps } from '@mui/material/InputLabel';
-export declare const FormLabelLegend: FC<InputLabelProps>;
+export type FormLabelLegendProps = InputLabelProps;
+export declare const FormLabelLegend: FC<FormLabelLegendProps>;
 //# sourceMappingURL=formLabelLegend.d.ts.map

package/dist/formLabelLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formLabelLegend.d.ts","sourceRoot":"","sources":["../src/formLabelLegend.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAyB,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAElF,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,eAAe,CAO/C,CAAC"}
+{"version":3,"file":"formLabelLegend.d.ts","sourceRoot":"","sources":["../src/formLabelLegend.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;AACxC,OAAO,EAAyB,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAElF,MAAM,MAAM,oBAAoB,GAAG,eAAe,CAAC;AAEnD,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAOnD,CAAC"}

package/dist/formLabelLegend.js

@@ -1,11 +1,12 @@
 import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
 import InputLabel from "@mui/material/InputLabel";
-const FormLabelLegend = ({ children, ...props }) => {
+const FormLabelLegend = memo(function FormLabelLegend2({ children, ...props }) {
   return (
     // sx={(theme) => theme.typography.caption}
     /* @__PURE__ */ jsx(InputLabel, { ...props, shrink: true, component: "legend", children })
   );
-};
+});
 export {
   FormLabelLegend
 };

package/dist/formLabelLegend.js.map

@@ -1 +1 @@
-{"version":3,"file":"formLabelLegend.js","sources":["../src/formLabelLegend.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { default as InputLabel, InputLabelProps } from '@mui/material/InputLabel';\n\nexport const FormLabelLegend: FC<InputLabelProps> = ({ children, ...props }) => {\n    return (\n        // sx={(theme) => theme.typography.caption}\n        <InputLabel {...props} shrink={true} component={'legend' as any}>\n            {children}\n        </InputLabel>\n    );\n};\n"],"names":[],"mappings":";;AAGO,MAAM,kBAAuC,CAAC,EAAE,UAAU,GAAG,YAAY;AAC5E;AAAA;AAAA,IAEI,oBAAC,cAAY,GAAG,OAAO,QAAQ,MAAM,WAAW,UAC3C,SAAA,CACL;AAAA;AAER;"}
+{"version":3,"file":"formLabelLegend.js","sources":["../src/formLabelLegend.tsx"],"sourcesContent":["import React, { FC, memo } from 'react';\nimport { default as InputLabel, InputLabelProps } from '@mui/material/InputLabel';\n\nexport type FormLabelLegendProps = InputLabelProps;\n\nexport const FormLabelLegend: FC<FormLabelLegendProps> = memo(function FormLabelLegend({ children, ...props }) {\n    return (\n        // sx={(theme) => theme.typography.caption}\n        <InputLabel {...props} shrink={true} component={'legend' as any}>\n            {children}\n        </InputLabel>\n    );\n});\n"],"names":["FormLabelLegend"],"mappings":";;;AAKO,MAAM,kBAA4C,KAAK,SAASA,iBAAgB,EAAE,UAAU,GAAG,SAAS;AAC3G;AAAA;AAAA,IAEI,oBAAC,cAAY,GAAG,OAAO,QAAQ,MAAM,WAAW,UAC3C,SAAA,CACL;AAAA;AAER,CAAC;"}

package/dist/formLabelLegend.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { FormLabelLegend } from './formLabelLegend';
+declare const meta: Meta<typeof FormLabelLegend>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithRadioGroup: Story;
+export declare const Required: Story;
+export declare const WithError: Story;
+export declare const Disabled: Story;
+export declare const ComparisonWithInputLabel: Story;
+export declare const MultipleFieldsets: Story;
+//# sourceMappingURL=formLabelLegend.stories.d.ts.map

package/dist/formLabelLegend.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formLabelLegend.stories.d.ts","sourceRoot":"","sources":["../src/formLabelLegend.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAKpD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,eAAe,CAatC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAa5B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAWvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAqBtC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAoB/B,CAAC"}

package/dist/genericControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"genericControl.d.ts","sourceRoot":"","sources":["../src/genericControl.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAA0B,MAAM,2BAA2B,CAAC;AAGrF,MAAM,MAAM,mBAAmB,GAAG,gBAAgB,GAAG;IAAE,QAAQ,EAAE,GAAG,CAAA;CAAE,CAAC;AAEvE,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAalD,CAAC"}
+{"version":3,"file":"genericControl.d.ts","sourceRoot":"","sources":["../src/genericControl.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAA0B,MAAM,2BAA2B,CAAC;AAGrF,MAAM,MAAM,mBAAmB,GAAG,gBAAgB,GAAG;IAAE,QAAQ,EAAE,GAAG,CAAA;CAAE,CAAC;AAEvE,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAejD,CAAC"}

package/dist/genericControl.js

@@ -1,20 +1,23 @@
 import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
 import FormControl from "@mui/material/FormControl";
 import { inputClasses } from "@mui/material/Input";
-const GenericControl = ({ children, sx, ...props }) => /* @__PURE__ */ jsx(
-  FormControl,
-  {
-    variant: "standard",
-    sx: {
-      ...sx,
-      [`& .${inputClasses.root}`]: {
-        "&:before, &:after": { display: "none" }
-      }
-    },
-    ...props,
-    children
-  }
-);
+const GenericControl = memo(function GenericControl2({ children, sx, ...props }) {
+  return /* @__PURE__ */ jsx(
+    FormControl,
+    {
+      variant: "standard",
+      sx: {
+        ...sx,
+        [`& .${inputClasses.root}`]: {
+          "&:before, &:after": { display: "none" }
+        }
+      },
+      ...props,
+      children
+    }
+  );
+});
 export {
   GenericControl
 };

package/dist/genericControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"genericControl.js","sources":["../src/genericControl.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { FormControlProps, default as FormControl } from '@mui/material/FormControl';\nimport { inputClasses } from '@mui/material/Input';\n\nexport type GenericControlProps = FormControlProps & { children: any };\n\nexport const GenericControl: FC<GenericControlProps> = ({ children, sx, ...props }) => (\n    <FormControl\n        variant=\"standard\"\n        sx={{\n            ...sx,\n            [`& .${inputClasses.root}`]: {\n                '&:before, &:after': { display: 'none' },\n            },\n        }}\n        {...props}\n    >\n        {children}\n    </FormControl>\n);\n"],"names":[],"mappings":";;;AAMO,MAAM,iBAA0C,CAAC,EAAE,UAAU,IAAI,GAAG,YACvE;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,SAAQ;AAAA,IACR,IAAI;AAAA,MACA,GAAG;AAAA,MACH,CAAC,MAAM,aAAa,IAAI,EAAE,GAAG;AAAA,QACzB,qBAAqB,EAAE,SAAS,OAAA;AAAA,MAAO;AAAA,IAC3C;AAAA,IAEH,GAAG;AAAA,IAEH;AAAA,EAAA;AACL;"}
+{"version":3,"file":"genericControl.js","sources":["../src/genericControl.tsx"],"sourcesContent":["import React, { FC, memo } from 'react';\nimport { FormControlProps, default as FormControl } from '@mui/material/FormControl';\nimport { inputClasses } from '@mui/material/Input';\n\nexport type GenericControlProps = FormControlProps & { children: any };\n\nexport const GenericControl: FC<GenericControlProps> = memo(function GenericControl({ children, sx, ...props }) {\n    return (\n        <FormControl\n            variant=\"standard\"\n            sx={{\n                ...sx,\n                [`& .${inputClasses.root}`]: {\n                    '&:before, &:after': { display: 'none' },\n                },\n            }}\n            {...props}\n        >\n            {children}\n        </FormControl>\n    );\n});\n"],"names":["GenericControl"],"mappings":";;;;AAMO,MAAM,iBAA0C,KAAK,SAASA,gBAAe,EAAE,UAAU,IAAI,GAAG,SAAS;AAC5G,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,SAAQ;AAAA,MACR,IAAI;AAAA,QACA,GAAG;AAAA,QACH,CAAC,MAAM,aAAa,IAAI,EAAE,GAAG;AAAA,UACzB,qBAAqB,EAAE,SAAS,OAAA;AAAA,QAAO;AAAA,MAC3C;AAAA,MAEH,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGb,CAAC;"}

package/dist/genericControl.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { GenericControl } from './genericControl';
+declare const meta: Meta<typeof GenericControl>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithCustomContent: Story;
+export declare const Disabled: Story;
+export declare const WithError: Story;
+export declare const FullWidth: Story;
+export declare const ComparisonWithTextField: Story;
+//# sourceMappingURL=genericControl.stories.d.ts.map

package/dist/genericControl.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"genericControl.stories.d.ts","sourceRoot":"","sources":["../src/genericControl.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGlD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAarC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAS/B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAiBvB,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAkBrC,CAAC"}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from './appBarOffset';
 export * from './formControlFieldset';
 export * from './formLabelLegend';
 export * from './genericControl';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC"}

package/dist/index.js

@@ -1,8 +1,10 @@
+import { AppBarOffset } from "./appBarOffset.js";
 import { FormControlFieldset } from "./formControlFieldset.js";
 import { FormLabelLegend } from "./formLabelLegend.js";
 import { GenericControl } from "./genericControl.js";
 import { ReadOnly } from "./readOnly.js";
 export {
+  AppBarOffset,
   FormControlFieldset,
   FormLabelLegend,
   GenericControl,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/readOnly.d.ts

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { InputProps } from '@mui/material/Input';
-export declare const ReadOnly: FC<InputProps & {
+export type ReadOnlyProps = InputProps & {
     children: any;
-}>;
+};
+export declare const ReadOnly: FC<ReadOnlyProps>;
 //# sourceMappingURL=readOnly.d.ts.map

package/dist/readOnly.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"readOnly.d.ts","sourceRoot":"","sources":["../src/readOnly.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAoB,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEnE,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,UAAU,GAAG;IAAE,QAAQ,EAAE,GAAG,CAAA;CAAE,CAEvD,CAAC"}
+{"version":3,"file":"readOnly.d.ts","sourceRoot":"","sources":["../src/readOnly.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;AACxC,OAAO,EAAoB,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEnE,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG;IAAE,QAAQ,EAAE,GAAG,CAAA;CAAE,CAAC;AAE3D,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAErC,CAAC"}

package/dist/readOnly.js

@@ -1,6 +1,9 @@
 import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
 import Input from "@mui/material/Input";
-const ReadOnly = ({ children, inputProps, ...props }) => /* @__PURE__ */ jsx(Input, { ...props, inputComponent: "div", inputProps: { ...inputProps, children } });
+const ReadOnly = memo(function ReadOnly2({ children, inputProps, ...props }) {
+  return /* @__PURE__ */ jsx(Input, { ...props, inputComponent: "div", inputProps: { ...inputProps, children } });
+});
 export {
   ReadOnly
 };

package/dist/readOnly.js.map

@@ -1 +1 @@
-{"version":3,"file":"readOnly.js","sources":["../src/readOnly.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { default as Input, InputProps } from '@mui/material/Input';\n\nexport const ReadOnly: FC<InputProps & { children: any }> = ({ children, inputProps, ...props }) => (\n    <Input {...props} inputComponent={'div' as any} inputProps={{ ...inputProps, children }}></Input>\n);\n"],"names":[],"mappings":";;AAGO,MAAM,WAA+C,CAAC,EAAE,UAAU,YAAY,GAAG,YACpF,oBAAC,SAAO,GAAG,OAAO,gBAAgB,OAAc,YAAY,EAAE,GAAG,YAAY,WAAS,CAAG;"}
+{"version":3,"file":"readOnly.js","sources":["../src/readOnly.tsx"],"sourcesContent":["import React, { FC, memo } from 'react';\nimport { default as Input, InputProps } from '@mui/material/Input';\n\nexport type ReadOnlyProps = InputProps & { children: any };\n\nexport const ReadOnly: FC<ReadOnlyProps> = memo(function ReadOnly({ children, inputProps, ...props }) {\n    return <Input {...props} inputComponent={'div' as any} inputProps={{ ...inputProps, children }}></Input>;\n});\n"],"names":["ReadOnly"],"mappings":";;;AAKO,MAAM,WAA8B,KAAK,SAASA,UAAS,EAAE,UAAU,YAAY,GAAG,SAAS;AAClG,SAAO,oBAAC,OAAA,EAAO,GAAG,OAAO,gBAAgB,OAAc,YAAY,EAAE,GAAG,YAAY,SAAA,EAAS,CAAG;AACpG,CAAC;"}

package/dist/readOnly.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ReadOnly } from './readOnly';
+declare const meta: Meta<typeof ReadOnly>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const WithHTMLContent: Story;
+export declare const MultipleFields: Story;
+export declare const ComparisonWithTextField: Story;
+export declare const FullWidth: Story;
+//# sourceMappingURL=readOnly.stories.d.ts.map

package/dist/readOnly.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"readOnly.stories.d.ts","sourceRoot":"","sources":["../src/readOnly.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAY/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAS7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAqB5B,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAyBrC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAevB,CAAC"}

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@kirill.konshin/mui",
   "description": "Utilities",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "scripts": {
     "----- BUILD -----": "",
     "clean": "rm -rf dist .tscache tsconfig.tsbuildinfo",
     "build": "vite build",
-    "build:index": "cti create ./src",
+    "build:index": "ctix build",
     "build:check-types": "attw --pack .",
     "start": "yarn build --watch",
     "wait": "wait-on ./dist/index.js",

package/src/appBarOffset.tsx

@@ -0,0 +1,8 @@
+import React, { FC, memo } from 'react';
+import { default as Box, BoxProps } from '@mui/material/Box';
+
+export type AppBarOffsetProps = BoxProps;
+
+export const AppBarOffset: FC<AppBarOffsetProps> = memo(function AppBarOffset({ sx, ...props }) {
+    return <Box {...props} sx={[({ mixins }) => mixins.toolbar, ...(Array.isArray(sx) ? sx : [sx])]} />;
+});

package/src/formControlFieldset.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from 'react';
+import React, { FC, memo } from 'react';
 import { GenericControl, GenericControlProps } from './genericControl';
 import { inputClasses } from '@mui/material/Input';
 
 export type FormControlFieldsetProps = GenericControlProps;
 
-export const FormControlFieldset: FC<FormControlFieldsetProps> = function FormControlFieldset({
+export const FormControlFieldset: FC<FormControlFieldsetProps> = memo(function FormControlFieldset({
     children,
     sx,
     ...props
@@ -23,4 +23,4 @@ export const FormControlFieldset: FC<FormControlFieldsetProps> = function FormCo
             {children}
         </GenericControl>
     );
-};
+});

package/src/formLabelLegend.stories.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { InputLabel, RadioGroup, Radio, FormControlLabel, Stack, Box } from '@mui/material';
+
+import { FormLabelLegend } from './formLabelLegend';
+import { FormControlFieldset } from './formControlFieldset';
+import { GenericControl } from './genericControl';
+import { ReadOnly } from './readOnly';
+
+const meta: Meta<typeof FormLabelLegend> = {
+    title: 'MUI / FormLabelLegend',
+    component: FormLabelLegend,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        children: { control: 'text' },
+        disabled: { control: 'boolean' },
+        error: { control: 'boolean' },
+        required: { control: 'boolean' },
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        children: 'Form Label Legend',
+    },
+    render: (args) => (
+        <FormControlFieldset>
+            <FormLabelLegend {...args} />
+            <ReadOnly>Content goes here</ReadOnly>
+        </FormControlFieldset>
+    ),
+};
+
+export const WithRadioGroup: Story = {
+    render: () => (
+        <FormControlFieldset>
+            <FormLabelLegend>Select Option</FormLabelLegend>
+            <ReadOnly>
+                <RadioGroup row defaultValue="option1">
+                    <FormControlLabel value="option1" label="Option 1" control={<Radio size="small" />} />
+                    <FormControlLabel value="option2" label="Option 2" control={<Radio size="small" />} />
+                    <FormControlLabel value="option3" label="Option 3" control={<Radio size="small" />} />
+                </RadioGroup>
+            </ReadOnly>
+        </FormControlFieldset>
+    ),
+};
+
+export const Required: Story = {
+    args: {
+        children: 'Required Field',
+        required: true,
+    },
+    render: (args) => (
+        <FormControlFieldset required>
+            <FormLabelLegend {...args} />
+            <ReadOnly>This field is required</ReadOnly>
+        </FormControlFieldset>
+    ),
+};
+
+export const WithError: Story = {
+    args: {
+        children: 'Error State',
+        error: true,
+    },
+    render: (args) => (
+        <FormControlFieldset error>
+            <FormLabelLegend {...args} />
+            <ReadOnly>This field has an error</ReadOnly>
+        </FormControlFieldset>
+    ),
+};
+
+export const Disabled: Story = {
+    args: {
+        children: 'Disabled Field',
+        disabled: true,
+    },
+    render: (args) => (
+        <FormControlFieldset disabled>
+            <FormLabelLegend {...args} />
+            <ReadOnly>This field is disabled</ReadOnly>
+        </FormControlFieldset>
+    ),
+};
+
+export const ComparisonWithInputLabel: Story = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'FormLabelLegend renders as a `<legend>` element, which is semantically correct for fieldsets. InputLabel renders as a `<label>` element.',
+            },
+        },
+    },
+    render: () => (
+        <Stack direction="row" spacing={3}>
+            <FormControlFieldset>
+                <FormLabelLegend>FormLabelLegend</FormLabelLegend>
+                <ReadOnly>Uses legend element</ReadOnly>
+            </FormControlFieldset>
+
+            <GenericControl>
+                <InputLabel shrink>InputLabel</InputLabel>
+                <ReadOnly>Uses label element</ReadOnly>
+            </GenericControl>
+        </Stack>
+    ),
+};
+
+export const MultipleFieldsets: Story = {
+    render: () => (
+        <Stack spacing={3}>
+            <FormControlFieldset>
+                <FormLabelLegend>Personal Information</FormLabelLegend>
+                <ReadOnly>John Doe, john@example.com</ReadOnly>
+            </FormControlFieldset>
+
+            <FormControlFieldset>
+                <FormLabelLegend>Preferences</FormLabelLegend>
+                <ReadOnly>
+                    <RadioGroup row defaultValue="email">
+                        <FormControlLabel value="email" label="Email" control={<Radio size="small" />} />
+                        <FormControlLabel value="sms" label="SMS" control={<Radio size="small" />} />
+                        <FormControlLabel value="none" label="None" control={<Radio size="small" />} />
+                    </RadioGroup>
+                </ReadOnly>
+            </FormControlFieldset>
+        </Stack>
+    ),
+};

package/src/formLabelLegend.tsx

@@ -1,11 +1,13 @@
-import React, { FC } from 'react';
+import React, { FC, memo } from 'react';
 import { default as InputLabel, InputLabelProps } from '@mui/material/InputLabel';
 
-export const FormLabelLegend: FC<InputLabelProps> = ({ children, ...props }) => {
+export type FormLabelLegendProps = InputLabelProps;
+
+export const FormLabelLegend: FC<FormLabelLegendProps> = memo(function FormLabelLegend({ children, ...props }) {
     return (
         // sx={(theme) => theme.typography.caption}
         <InputLabel {...props} shrink={true} component={'legend' as any}>
             {children}
         </InputLabel>
     );
-};
+});

package/src/genericControl.stories.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { InputLabel, Input, TextField, Stack, Box } from '@mui/material';
+
+import { GenericControl } from './genericControl';
+import { ReadOnly } from './readOnly';
+
+const meta: Meta<typeof GenericControl> = {
+    title: 'MUI / GenericControl',
+    component: GenericControl,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        disabled: { control: 'boolean' },
+        error: { control: 'boolean' },
+        fullWidth: { control: 'boolean' },
+        required: { control: 'boolean' },
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        children: (
+            <>
+                <InputLabel shrink>Label</InputLabel>
+                <Input defaultValue="Some value" />
+            </>
+        ),
+    },
+};
+
+export const WithCustomContent: Story = {
+    args: {
+        children: (
+            <>
+                <InputLabel shrink>Custom Content</InputLabel>
+                <ReadOnly>This is custom content inside GenericControl</ReadOnly>
+            </>
+        ),
+    },
+};
+
+export const Disabled: Story = {
+    args: {
+        disabled: true,
+        children: (
+            <>
+                <InputLabel shrink>Disabled Control</InputLabel>
+                <Input defaultValue="Disabled value" />
+            </>
+        ),
+    },
+};
+
+export const WithError: Story = {
+    args: {
+        error: true,
+        children: (
+            <>
+                <InputLabel shrink>Error State</InputLabel>
+                <Input defaultValue="Invalid value" />
+            </>
+        ),
+    },
+};
+
+export const FullWidth: Story = {
+    args: {
+        fullWidth: true,
+        children: (
+            <>
+                <InputLabel shrink>Full Width</InputLabel>
+                <Input defaultValue="Full width input" />
+            </>
+        ),
+    },
+    decorators: [
+        (Story) => (
+            <Box sx={{ width: 400 }}>
+                <Story />
+            </Box>
+        ),
+    ],
+};
+
+export const ComparisonWithTextField: Story = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'GenericControl removes the underline from inputs, making it suitable for read-only or custom content displays.',
+            },
+        },
+    },
+    render: () => (
+        <Stack direction="row" spacing={3}>
+            <GenericControl>
+                <InputLabel shrink>GenericControl</InputLabel>
+                <Input defaultValue="No underline" />
+            </GenericControl>
+
+            <TextField label="TextField" defaultValue="With underline" variant="standard" />
+        </Stack>
+    ),
+};

package/src/genericControl.tsx

@@ -1,20 +1,22 @@
-import React, { FC } from 'react';
+import React, { FC, memo } from 'react';
 import { FormControlProps, default as FormControl } from '@mui/material/FormControl';
 import { inputClasses } from '@mui/material/Input';
 
 export type GenericControlProps = FormControlProps & { children: any };
 
-export const GenericControl: FC<GenericControlProps> = ({ children, sx, ...props }) => (
-    <FormControl
-        variant="standard"
-        sx={{
-            ...sx,
-            [`& .${inputClasses.root}`]: {
-                '&:before, &:after': { display: 'none' },
-            },
-        }}
-        {...props}
-    >
-        {children}
-    </FormControl>
-);
+export const GenericControl: FC<GenericControlProps> = memo(function GenericControl({ children, sx, ...props }) {
+    return (
+        <FormControl
+            variant="standard"
+            sx={{
+                ...sx,
+                [`& .${inputClasses.root}`]: {
+                    '&:before, &:after': { display: 'none' },
+                },
+            }}
+            {...props}
+        >
+            {children}
+        </FormControl>
+    );
+});

package/src/index.ts

@@ -1,3 +1,4 @@
+export * from './appBarOffset';
 export * from './formControlFieldset';
 export * from './formLabelLegend';
 export * from './genericControl';

package/src/readOnly.stories.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { InputLabel, Stack, TextField, Box } from '@mui/material';
+
+import { ReadOnly } from './readOnly';
+import { GenericControl } from './genericControl';
+
+const meta: Meta<typeof ReadOnly> = {
+    title: 'MUI / ReadOnly',
+    component: ReadOnly,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        children: { control: 'text' },
+        disabled: { control: 'boolean' },
+        fullWidth: { control: 'boolean' },
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        children: 'This is read-only content',
+    },
+};
+
+export const WithLabel: Story = {
+    render: () => (
+        <GenericControl>
+            <InputLabel shrink>Read Only Field</InputLabel>
+            <ReadOnly>This content cannot be edited</ReadOnly>
+        </GenericControl>
+    ),
+};
+
+export const WithHTMLContent: Story = {
+    render: () => (
+        <GenericControl>
+            <InputLabel shrink>HTML Content</InputLabel>
+            <ReadOnly>
+                This is a <code>div</code>, not an input with <code>readOnly</code> attribute
+            </ReadOnly>
+        </GenericControl>
+    ),
+};
+
+export const MultipleFields: Story = {
+    render: () => (
+        <Stack spacing={2}>
+            <GenericControl>
+                <InputLabel shrink>Name</InputLabel>
+                <ReadOnly>John Doe</ReadOnly>
+            </GenericControl>
+
+            <GenericControl>
+                <InputLabel shrink>Email</InputLabel>
+                <ReadOnly>john.doe@example.com</ReadOnly>
+            </GenericControl>
+
+            <GenericControl>
+                <InputLabel shrink>Status</InputLabel>
+                <ReadOnly>
+                    <span style={{ color: 'green' }}>● Active</span>
+                </ReadOnly>
+            </GenericControl>
+        </Stack>
+    ),
+};
+
+export const ComparisonWithTextField: Story = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'ReadOnly renders content as a div instead of an input, which is useful for displaying non-editable data that may contain HTML.',
+            },
+        },
+    },
+    render: () => (
+        <Stack direction="row" spacing={3} alignItems="flex-start">
+            <GenericControl>
+                <InputLabel shrink>ReadOnly Component</InputLabel>
+                <ReadOnly>
+                    Content with <strong>HTML</strong>
+                </ReadOnly>
+            </GenericControl>
+
+            <TextField
+                label="TextField (readOnly)"
+                defaultValue="Plain text only"
+                variant="standard"
+                slotProps={{ input: { readOnly: true } }}
+            />
+        </Stack>
+    ),
+};
+
+export const FullWidth: Story = {
+    args: {
+        fullWidth: true,
+        children: 'Full width read-only content',
+    },
+    decorators: [
+        (Story) => (
+            <Box sx={{ width: 400 }}>
+                <GenericControl fullWidth>
+                    <InputLabel shrink>Full Width</InputLabel>
+                    <Story />
+                </GenericControl>
+            </Box>
+        ),
+    ],
+};

package/src/readOnly.tsx

@@ -1,6 +1,8 @@
-import React, { FC } from 'react';
+import React, { FC, memo } from 'react';
 import { default as Input, InputProps } from '@mui/material/Input';
 
-export const ReadOnly: FC<InputProps & { children: any }> = ({ children, inputProps, ...props }) => (
-    <Input {...props} inputComponent={'div' as any} inputProps={{ ...inputProps, children }}></Input>
-);
+export type ReadOnlyProps = InputProps & { children: any };
+
+export const ReadOnly: FC<ReadOnlyProps> = memo(function ReadOnly({ children, inputProps, ...props }) {
+    return <Input {...props} inputComponent={'div' as any} inputProps={{ ...inputProps, children }}></Input>;
+});