@neo-design/mui 1.0.0-rc.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Neo Design System contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,25 @@
+# `@neo-design/mui`
+
+**Who it is for:** dev. **Ships**: yes — it is the package installed to build with Neo on top of
+Material UI.
+
+Neo's Material UI theme and the React `Neo*` components. It depends on `@neo-design/foundations`, which
+ships the tokens, the icons and the plain CSS layer: both are installed, and each is imported through its
+entry point.
+
+| import | what it ships |
+|---|---|
+| `@neo-design/mui` | the theme and the `Neo*` components — [`ui/index.mjs`](ui/index.mjs), with its types in [`ui/index.d.ts`](ui/index.d.ts) |
+| `@neo-design/mui/theme` | the theme only — [`theme/index.mjs`](theme/index.mjs), with its types in [`theme/index.d.ts`](theme/index.d.ts) |
+
+```js
+import { ThemeProvider } from '@mui/material/styles';
+import { theme, NeoButton } from '@neo-design/mui';
+import '@neo-design/foundations/tokens.css';
+import '@neo-design/foundations/foundations.css';
+```
+
+The React, Material UI and Emotion versions it works with are in
+[`package.json`](package.json), as `peerDependencies`.
+
+**The `Neo*` wrappers are optional**: an app that already uses MUI is dressed just by mounting the theme.

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@neo-design/mui",
+  "version": "1.0.0-rc.4",
+  "description": "Neo — the Material UI theme and the Neo* React components, on top of @neo-design/foundations.",
+  "type": "module",
+  "types": "./ui/index.d.ts",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./ui/index.d.ts",
+      "default": "./ui/index.mjs"
+    },
+    "./theme": {
+      "types": "./theme/index.d.ts",
+      "default": "./theme/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "ui",
+    "theme"
+  ],
+  "dependencies": {
+    "@neo-design/foundations": "1.0.0-rc.4"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "@mui/material": ">=5.18.0 <7",
+    "react": "^18 || ^19"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT"
+}

package/theme/alert-icons.mjs

@@ -0,0 +1,16 @@
+// packages/mui/theme/alert-icons.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+const h = React.createElement;
+
+const ICONS = {
+  info: ['M12 22C17.5229 22 22 17.5229 22 12C22 6.47715 17.5229 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5229 6.47715 22 12 22Z', 'M11.9999 10.4805C12.414 10.4805 12.7498 10.8164 12.7499 11.2305V15.8652H14.3075C14.7217 15.8652 15.0575 16.2011 15.0575 16.6152C15.0575 17.0294 14.7218 17.3652 14.3075 17.3652H9.69231C9.2781 17.3652 8.94231 17.0294 8.94231 16.6152C8.9424 16.2011 9.27815 15.8652 9.69231 15.8652H11.2499V11.9805H10.4618C10.0476 11.9805 9.71185 11.6447 9.71185 11.2305C9.71201 10.8164 10.0477 10.4805 10.4618 10.4805H11.9999ZM13.1347 7.38476C13.1346 8.01128 12.6265 8.51952 11.9999 8.51952C11.4126 8.51949 10.9293 8.07292 10.871 7.50097L10.8652 7.38476L10.871 7.26855C10.9291 6.69645 11.4125 6.25003 11.9999 6.24999C12.6265 6.24999 13.1347 6.75812 13.1347 7.38476Z'],
+  success: ['M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z', 'M16.2362 7.51343C16.495 7.19034 16.9666 7.13773 17.2899 7.39624C17.6134 7.655 17.6659 8.12748 17.4071 8.45093L10.9784 16.4861C10.7254 16.8023 10.2673 16.8608 9.94324 16.6179L6.7284 14.2068C6.3973 13.9582 6.33054 13.4882 6.57899 13.157C6.82758 12.8259 7.29752 12.7591 7.62879 13.0076L10.2606 14.9812L16.2362 7.51343Z'],
+  warning: ['M13.3699 2.83737C13.2407 2.58525 13.0445 2.37367 12.8028 2.22592C12.5611 2.07818 12.2833 2 12 2C11.7167 2 11.439 2.07818 11.1973 2.22592C10.9556 2.37367 10.7593 2.58525 10.6302 2.83737L2.16474 19.7682C2.04667 20.0025 1.99046 20.263 2.00144 20.5253C2.01242 20.7874 2.09023 21.0423 2.22748 21.266C2.36473 21.4896 2.55687 21.6745 2.78565 21.8028C3.01442 21.9314 3.27223 21.9992 3.53461 22H20.4654C20.7278 21.9992 20.9856 21.9314 21.2144 21.8028C21.4432 21.6745 21.6353 21.4896 21.7726 21.266C21.9098 21.0423 21.9876 20.7874 21.9986 20.5253C22.0096 20.263 21.9533 20.0025 21.8353 19.7682L13.3699 2.83737Z', 'M11.25 13.9192V8.91722C11.25 8.50302 11.5858 8.16724 12 8.16722C12.4142 8.16722 12.75 8.50301 12.75 8.91722V13.9192C12.75 14.3334 12.4142 14.6692 12 14.6692C11.5858 14.6692 11.25 14.3334 11.25 13.9192ZM13.1347 17.7678C13.1345 18.3945 12.6265 18.9026 12 18.9026C11.4123 18.9026 10.929 18.4555 10.871 17.883L10.8652 17.7678L10.871 17.6516C10.9291 17.0792 11.4124 16.6331 12 16.633L12.1162 16.6389C12.6883 16.6971 13.1347 17.1803 13.1347 17.7678Z'],
+  error: ['M12 22C17.5229 22 22 17.5229 22 12C22 6.47715 17.5229 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5229 6.47715 22 12 22Z', 'M14.7335 8.20613C15.0264 7.91334 15.5012 7.91328 15.794 8.20613C16.0868 8.499 16.0868 8.97381 15.794 9.26668L13.0606 12.0001L15.794 14.7335C16.0867 15.0264 16.0869 15.5012 15.794 15.794C15.5012 16.0868 15.0264 16.0867 14.7335 15.794L12.0001 13.0606L9.26669 15.794C8.97383 16.0868 8.49901 16.0868 8.20615 15.794C7.91329 15.5012 7.91336 15.0264 8.20615 14.7335L10.9395 12.0001L8.20615 9.26668C7.91327 8.97379 7.91327 8.49902 8.20615 8.20613C8.49904 7.91325 8.9738 7.91325 9.26669 8.20613L12.0001 10.9395L14.7335 8.20613Z'],
+};
+
+const make = (key) => h('svg', { viewBox: '0 0 24 24', width: '1em', height: '1em', 'aria-hidden': true, focusable: false },
+  h('path', { d: ICONS[key][0], fill: 'currentColor' }),
+  h('path', { d: ICONS[key][1], fill: 'var(--icon--base--contrast)' }));
+
+export const alertIconMapping = { info: make('info'), success: make('success'), warning: make('warning'), error: make('error') };

package/theme/baseline.mjs

@@ -0,0 +1,17 @@
+// packages/mui/theme/baseline.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import { cssVars as breakpoints } from '@neo-design/foundations/tokens/breakpoints.mjs';
+import { cssVars as container } from '@neo-design/foundations/tokens/container.mjs';
+import { cssVars as spacing } from '@neo-design/foundations/tokens/spacing.mjs';
+import { cssVars as radius } from '@neo-design/foundations/tokens/radius.mjs';
+import { cssVars as stroke } from '@neo-design/foundations/tokens/stroke.mjs';
+import { cssVars as iconSize } from '@neo-design/foundations/tokens/iconSize.mjs';
+import { cssVars as elevation } from '@neo-design/foundations/tokens/shadows.mjs';
+import { cssVars as type } from '@neo-design/foundations/tokens/typography.mjs';
+import { cssVars as color } from '@neo-design/foundations/tokens/color-semantic.mjs';
+import { cssVars as component } from '@neo-design/foundations/tokens/component-tokens.mjs';
+
+export const rootVars = { ...breakpoints, ...container, ...spacing, ...radius, ...stroke, ...iconSize, ...elevation, ...type, ...color, ...component };
+
+export const themeSlice = {
+  components: { MuiCssBaseline: { styleOverrides: { ':root': rootVars } } },
+};

package/theme/checkbox-icons.mjs

@@ -0,0 +1,12 @@
+// packages/mui/theme/checkbox-icons.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+const h = React.createElement;
+
+const CHECK = 'M 7 14 L 2 9 L 3.41 7.59 L 7 11.17 L 14.59 3.58 L 16 5 L 7 14 Z';
+const DASH = 'M 3 8 L 15 8 C 15.55 8 16 8.45 16 9 C 16 9.55 15.55 10 15 10 L 3 10 C 2.45 10 2 9.55 2 9 C 2 8.45 2.45 8 3 8 Z';
+
+const glyph = (d) => ({ className = '', ...p }) => h('svg', { className: `MuiSvgIcon-root ${className}`.trim(), viewBox: '0 0 24 24', focusable: 'false', 'aria-hidden': true, ...p },
+  h('g', { transform: 'translate(3,3)' }, h('path', { d, fill: 'currentColor' })));
+
+export const CheckboxCheckedIcon = glyph(CHECK);
+export const CheckboxIndeterminateIcon = glyph(DASH);

package/theme/chip-icon.mjs

@@ -0,0 +1,8 @@
+// packages/mui/theme/chip-icon.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+const h = React.createElement;
+
+const CLOSE = 'M4.92893 18.0844L11.0538 11.9595L4.9694 5.87511C4.69696 5.60267 4.69701 5.16091 4.9694 4.88845C5.24186 4.61599 5.6836 4.61599 5.95606 4.88845L12.0405 10.9729L18.0844 4.92892C18.3569 4.65646 18.7986 4.65646 19.0711 4.92892C19.3435 5.20138 19.3435 5.64312 19.0711 5.91558L13.0271 11.9595L19.1115 18.0439C19.384 18.3164 19.384 18.7581 19.1115 19.0306C18.8391 19.303 18.3973 19.303 18.1249 19.0306L12.0405 12.9462L5.91559 19.0711C5.64314 19.3435 5.20139 19.3435 4.92893 19.0711C4.65647 18.7986 4.65647 18.3569 4.92893 18.0844Z';
+
+export const ChipCloseIcon = ({ className = '', ...p }) => h('svg', { className: `MuiSvgIcon-root ${className}`.trim(), viewBox: '0 0 24 24', focusable: 'false', 'aria-hidden': true, ...p },
+  h('path', { d: CLOSE, fill: 'currentColor' }));