@kirill.konshin/mui 0.0.1

package/.ctirc

@@ -0,0 +1,11 @@
+{
+  "addNewline": true,
+  "fileExcludePatterns": [
+    "*.stories.*",
+    "*.test.*",
+    "*.fixture.*"
+  ],
+  "verbose": false,
+  "withoutBackupFile": true,
+  "withoutComment": true
+}

package/.storybook/main.ts

@@ -0,0 +1,2 @@
+import config from '../../utils-private/.storybook/main';
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,2 @@
+import preview from '../../utils-private/.storybook/preview';
+export default preview;

package/.turbo/turbo-build.log

@@ -0,0 +1,16 @@
+vite v7.0.6 building SSR bundle for production...
+create succeeded: /home/runner/work/utils/utils/packages/mui/src
+transforming...
+✓ 5 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.
+
+✓ built in 3.55s
+Updated package.json with exports

package/dist/formControlFieldset.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { GenericControlProps } from './genericControl';
+export type FormControlFieldsetProps = GenericControlProps;
+export declare const FormControlFieldset: FC<FormControlFieldsetProps>;
+//# sourceMappingURL=formControlFieldset.d.ts.map

package/dist/formControlFieldset.d.ts.map

@@ -0,0 +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"}

package/dist/formControlFieldset.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { GenericControl } from "./genericControl.js";
+import { inputClasses } from "@mui/material/Input";
+const FormControlFieldset = function FormControlFieldset2({
+  children,
+  sx,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    GenericControl,
+    {
+      ...props,
+      component: "fieldset",
+      sx: {
+        ...sx,
+        [`legend + .${inputClasses.root}`]: {
+          marginTop: 2
+          //FIXME 16px, hardcoded from @mui/material/Input/Input.js @ 59
+        }
+      },
+      children
+    }
+  );
+};
+export {
+  FormControlFieldset
+};
+//# sourceMappingURL=formControlFieldset.js.map

package/dist/formControlFieldset.js.map

@@ -0,0 +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;"}

package/dist/formControlFieldset.stories.d.ts

@@ -0,0 +1,7 @@
+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;
+//# sourceMappingURL=formControlFieldset.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"formControlFieldset.stories.d.ts","sourceRoot":"","sources":["../src/formControlFieldset.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAMlD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CA6CC,CAAC;AAExC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAQnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC"}

package/dist/formLabelLegend.d.ts

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

package/dist/formLabelLegend.d.ts.map

@@ -0,0 +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"}

package/dist/formLabelLegend.js

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

package/dist/formLabelLegend.js.map

@@ -0,0 +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;"}

package/dist/genericControl.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { FormControlProps } from '@mui/material/FormControl';
+export type GenericControlProps = FormControlProps & {
+    children: any;
+};
+export declare const GenericControl: FC<GenericControlProps>;
+//# sourceMappingURL=genericControl.d.ts.map

package/dist/genericControl.d.ts.map

@@ -0,0 +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"}

package/dist/genericControl.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+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
+  }
+);
+export {
+  GenericControl
+};
+//# sourceMappingURL=genericControl.js.map

package/dist/genericControl.js.map

@@ -0,0 +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;"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './formControlFieldset';
+export * from './formLabelLegend';
+export * from './genericControl';
+export * from './readOnly';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +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"}

package/dist/index.js

@@ -0,0 +1,11 @@
+import { FormControlFieldset } from "./formControlFieldset.js";
+import { FormLabelLegend } from "./formLabelLegend.js";
+import { GenericControl } from "./genericControl.js";
+import { ReadOnly } from "./readOnly.js";
+export {
+  FormControlFieldset,
+  FormLabelLegend,
+  GenericControl,
+  ReadOnly
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/dist/readOnly.d.ts

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

package/dist/readOnly.d.ts.map

@@ -0,0 +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"}

package/dist/readOnly.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+import Input from "@mui/material/Input";
+const ReadOnly = ({ children, inputProps, ...props }) => /* @__PURE__ */ jsx(Input, { ...props, inputComponent: "div", inputProps: { ...inputProps, children } });
+export {
+  ReadOnly
+};
+//# sourceMappingURL=readOnly.js.map

package/dist/readOnly.js.map

@@ -0,0 +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;"}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@kirill.konshin/mui",
+  "description": "Utilities",
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "----- BUILD -----": "",
+    "clean": "rm -rf dist .tscache tsconfig.tsbuildinfo",
+    "build": "vite build",
+    "build:index": "cti create ./src",
+    "build:check-types": "attw --pack .",
+    "start": "yarn build --watch",
+    "wait": "wait-on ./dist/index.js",
+    "----- TEST -----": "",
+    "test:disabled": "vitest run --coverage",
+    "test:watch": "vitest watch --coverage",
+    "----- STORYBOOK -----": "",
+    "storybook:start": "storybook dev -p 6006",
+    "storybook:build": "storybook build"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@kirill.konshin/utils-private": "*",
+    "@mui/material": "^7.3.0",
+    "react": "^19.1.1"
+  },
+  "peerDependencies": {
+    "@mui/material": "^7",
+    "react": "^19"
+  },
+  "peerDependenciesMeta": {
+    "@mui/material": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Kirill Konshin <kirill@konshin.org> (https://konshin.org)",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "import": {
+        "import": "./dist/index.js",
+        "types": "./dist/index.d.ts"
+      }
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts"
+}

package/src/README.md

@@ -0,0 +1,3 @@
+## Prior Art
+
+https://codesandbox.io/p/sandbox/l7vykxl57q MUI v4

package/src/formControlFieldset.stories.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TextField, Stack, InputLabel, RadioGroup, Radio, FormControlLabel, Box } from '@mui/material';
+
+import { GenericControl } from './genericControl';
+import { ReadOnly } from './readOnly';
+import { FormControlFieldset } from './formControlFieldset';
+import { FormLabelLegend } from './formLabelLegend';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof GenericControl> = {
+    title: 'MUI / FormControlFieldset',
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {},
+    render: function Render() {
+        return (
+            <Box sx={{ position: 'relative' }}>
+                <Rule top={12} />
+                <Rule top={37} />
+                <Rule top={48} />
+                <Stack direction="row" gap={3} sx={{ alignItems: 'flex-start' }}>
+                    <FormControlFieldset>
+                        <FormLabelLegend>Radios</FormLabelLegend>
+                        <ReadOnly>
+                            {/* TODO The size of the component. small is equivalent to the dense radio styling. */}
+                            <RadioGroup row defaultValue="female" name="radio-buttons-group" sx={{ mt: -1 }}>
+                                <FormControlLabel value="female" label="Female" control={<Radio size="small" />} />
+                                <FormControlLabel value="male" label="Male" control={<Radio size="small" />} />
+                                <FormControlLabel value="other" label="Other" control={<Radio size="small" />} />
+                            </RadioGroup>
+                        </ReadOnly>
+                    </FormControlFieldset>
+
+                    <GenericControl>
+                        <InputLabel shrink>GenericControl</InputLabel>
+                        <ReadOnly>
+                            This is a <code>div</code>, not an input with <code>readOnly</code>
+                        </ReadOnly>
+                    </GenericControl>
+
+                    <FormControlFieldset>
+                        <FormLabelLegend>FormLabelLegend</FormLabelLegend>
+                        <ReadOnly>
+                            This is a <code>div</code>, not an input with <code>readOnly</code>
+                        </ReadOnly>
+                    </FormControlFieldset>
+
+                    <TextField label="TextField" defaultValue="Bar" variant="standard" />
+                </Stack>
+            </Box>
+        );
+    },
+} satisfies Meta<typeof GenericControl>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+function Rule({ top }) {
+    return (
+        <Box sx={{ background: 'red', position: 'absolute', left: 0, top: `${top}px`, width: '100%', height: '1px' }} />
+    );
+}
+
+export const Default: Story = {
+    args: {},
+};

package/src/formControlFieldset.tsx

@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+import { GenericControl, GenericControlProps } from './genericControl';
+import { inputClasses } from '@mui/material/Input';
+
+export type FormControlFieldsetProps = GenericControlProps;
+
+export const FormControlFieldset: FC<FormControlFieldsetProps> = function FormControlFieldset({
+    children,
+    sx,
+    ...props
+}) {
+    return (
+        <GenericControl
+            {...props}
+            component="fieldset"
+            sx={{
+                ...sx,
+                [`legend + .${inputClasses.root}`]: {
+                    marginTop: 2, //FIXME 16px, hardcoded from @mui/material/Input/Input.js @ 59
+                },
+            }}
+        >
+            {children}
+        </GenericControl>
+    );
+};

package/src/formLabelLegend.tsx

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

package/src/genericControl.tsx

@@ -0,0 +1,20 @@
+import React, { FC } 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>
+);

package/src/index.ts

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

package/src/readOnly.tsx

@@ -0,0 +1,6 @@
+import React, { FC } 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>
+);

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../utils-private/tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "declarationDir": "dist"
+  },
+  "include": ["src"],
+  "exclude": []
+}

package/turbo.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "extends": ["//"],
+  "tasks": {
+    "build": {
+      "dependsOn": ["^build"],
+      "outputs": ["src/**/*/index.ts", "package.json", "dist/**/*"]
+    }
+  }
+}

package/vite.config.ts

@@ -0,0 +1,2 @@
+import config from '../utils-private/vite.config';
+export default config;