material-plus-ui 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 CDGet <jooy2.contact@gmail.com> (https://cdget.com).
+
+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,133 @@
+# Material Plus
+
+[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/jooy2/material-plus/blob/main/LICENSE) ![Programming Language Usage](https://img.shields.io/github/languages/top/jooy2/material-plus) [![npm downloads](https://img.shields.io/npm/dm/material-plus-ui.svg)](https://www.npmjs.com/package/material-plus-ui) [![npm latest package](https://img.shields.io/npm/v/material-plus-ui/latest.svg)](https://www.npmjs.com/package/material-plus-ui) ![npm bundle size](https://img.shields.io/bundlephobia/min/material-plus-ui)
+
+### 📘 [**material-plus.cdget.com**](https://material-plus.cdget.com)
+
+Live previews and full props for every component. This README is just the quick start.
+
+---
+
+**Material Plus is a React component library that extends Material UI.** It is the pile of components you end up writing in every MUI project — the field that handles IME composition properly, the icon wrapper that agrees with your set — extracted, documented and tested.
+
+It is not a replacement for `@mui/material` and does not try to be one. Every component is built out of MUI, reads your `ThemeProvider`, and sits at the same height as the MUI control next to it in the same form.
+
+- **MUI is a peer, not a copy.** `@mui/material` and Emotion stay your dependencies, so there is never a second MUI in the bundle or a second theme in the tree.
+- **IME-safe by construction.** Korean, Japanese and Chinese composition survives whatever your `onChange` does with the value.
+- **Bring your own icons.** `MPIcon` takes a component or an element from any set. `lucide-react` ships with the package, gathered in one readable constants file.
+- **ESM only**, TypeScript declarations included, tree-shakeable — every component compiles to its own module.
+- **One runtime dependency.** React 18 or 19, Node.js 18 or later.
+
+## Documentation
+
+Everything is documented at **[material-plus.cdget.com](https://material-plus.cdget.com)**, where the previews are not screenshots — they are the components, running in the page.
+
+| Page | What you will find |
+| --- | --- |
+| [**Getting started**](https://material-plus.cdget.com/guide/getting-started) | Install and setup, end to end. |
+| [**All components**](https://material-plus.cdget.com/components/) | Every component, one page each: live previews and the full props table. |
+| [**Changelog**](https://material-plus.cdget.com/changelog) | What changed in each release. |
+
+Also available in Korean / 한국어 문서: **[material-plus.cdget.com/ko/](https://material-plus.cdget.com/ko/)**
+
+## Installation
+
+```bash
+npm install material-plus-ui
+```
+
+```bash
+pnpm add material-plus-ui
+```
+
+### Peer dependencies
+
+You already have all of these in an MUI project:
+
+| Package                             | Versions     |
+| ----------------------------------- | ------------ |
+| `@mui/material`                     | 6, 7, 8 or 9 |
+| `@emotion/react`, `@emotion/styled` | 11           |
+| `react`, `react-dom`                | 18 or 19     |
+
+Only MUI 9 is exercised in CI, though the components use APIs stable since MUI 5.
+
+### Setup
+
+Add one line to your app's CSS entry point:
+
+```css
+@import 'material-plus-ui/styles.css';
+```
+
+This is finished CSS — no PostCSS plugin, no `@source`, no build-side configuration. It deliberately contains **no reset**: `CssBaseline` from `@mui/material` is already one, and Tailwind's Preflight would restyle every MUI component on your page rather than only the ones from here.
+
+If Tailwind v4 is already in your project, import the token sheet instead:
+
+```css
+@import 'tailwindcss';
+@import 'material-plus-ui/tailwind.css';
+```
+
+## Usage
+
+Material Plus components go anywhere an MUI component goes, inside the same provider.
+
+```tsx
+import { useState } from 'react';
+import CssBaseline from '@mui/material/CssBaseline';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { MPTextField, MPIcon, ICONS } from 'material-plus-ui';
+
+const theme = createTheme({ palette: { mode: 'light' } });
+
+export default function App() {
+  const [email, setEmail] = useState('');
+
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <MPTextField
+        label="Email"
+        type="email"
+        value={email}
+        onChange={setEmail}
+        startIcon={<MPIcon icon={ICONS.search} size={18} />}
+      />
+    </ThemeProvider>
+  );
+}
+```
+
+## Components
+
+| Component | What it is |
+| --- | --- |
+| [`MPTextField`](https://material-plus.cdget.com/components/inputs/text-field) | A text field that survives an IME, with the label, helper text, adornments and password toggle already assembled. |
+| [`MPIcon`](https://material-plus.cdget.com/components/display/icon) | A glyph at a known size in a known colour, from whichever icon set you use. |
+
+### Why `MPTextField` exists
+
+A controlled `<input>` renders from its `value`. While an input method is composing, the browser holds a **provisional** string in the element that has not been committed — and writing `value` back over it in that moment throws away the syllable in progress and jumps the caret. Trimming, upper-casing or validating in your `onChange` is enough to trigger it.
+
+`MPTextField` stops rendering `value` for the duration of a composition and shows what the element actually contains, while `onChange` keeps firing for every keystroke. When the composition ends, the field is controlled again.
+
+```tsx
+// Upper-cases everything — and a Korean syllable still composes correctly.
+<MPTextField value={name} onChange={(next) => setName(next.toUpperCase())} />
+```
+
+## Contributing
+
+Issues and pull requests are welcome. See [CONTRIBUTING.md](CONTRIBUTING.md).
+
+```bash
+npm install        # also builds, via `prepare`
+npm run test       # vitest, in a real browser
+npm run typecheck  # src, test and docs
+npm run docs:dev   # the documentation site
+```
+
+## License
+
+[MIT](LICENSE) © [CDGet](https://cdget.com)

package/dist/components/icon/MPIcon.d.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import type { MPIconGlyph } from '../../types';
+export interface MPIconProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
+    /**
+     * The glyph to draw: a component from an icon set, or an element of your own.
+     *
+     * It is a prop rather than `children` because the two things you always want
+     * to decide about an icon — how big it is and what colour it is — are the two
+     * things you cannot reach once it is a child. As a prop it is content this
+     * component *sizes*, not content it merely wraps.
+     *
+     * ```tsx
+     * <MPIcon icon={ICONS.search} />          // a component from an icon set
+     * <MPIcon icon={<MySvgLogo />} />         // an element of your own
+     * ```
+     */
+    icon: MPIconGlyph;
+    /**
+     * The box the glyph is drawn in. A number is CSS pixels; a string is any CSS
+     * length, so `'1em'` tracks the surrounding text.
+     *
+     * Left unset the glyph draws at its own natural size — 24px for a lucide
+     * icon, whatever the artwork says for an element. That default is deliberate:
+     * an icon set already agrees with itself about size, and a wrapper that
+     * overrode it would be a second opinion nobody asked for.
+     */
+    size?: number | string;
+    /**
+     * The glyph's colour, as any CSS colour. Left unset the icon inherits the
+     * colour of whatever it sits in — a button's label, a muted caption, an
+     * error message — which is right far more often than a colour of its own.
+     */
+    color?: string;
+    /**
+     * Stroke width, forwarded to glyphs given as a component. Ignored by an
+     * element, which is already drawn.
+     */
+    strokeWidth?: number | string;
+    /**
+     * Centres the icon in its grid or flex track. Carried over from the pattern
+     * this component replaces, where an icon in a table cell or a form row is
+     * laid out by its parent and has no other way to say where it sits.
+     */
+    center?: boolean;
+    /**
+     * What the icon says, for a reader who cannot see it.
+     *
+     * Without it the icon is hidden from the accessibility tree, which is the
+     * right default: most icons sit beside a word that already says the same
+     * thing, and reading both aloud is worse than reading one. Pass this only
+     * when the glyph carries the meaning on its own.
+     */
+    label?: string;
+}
+/**
+ * An icon at a known size, in a known colour.
+ *
+ * Material Plus draws no icons of its own. Which set an application uses is its
+ * decision, and one it has usually already made — so this component takes
+ * whatever that set hands back and gives it the size and colour axes the rest
+ * of the library has.
+ *
+ * The glyph goes in a box, and the box is what does the work: it is
+ * `inline-flex`, so an icon lines up with text rather than sitting on the
+ * baseline like an image; it carries the `font-size` as well as the width and
+ * height, so an `<svg>` sized in `em` comes out the same as one sized in `px`;
+ * and it owns the accessibility, so a decorative glyph leaves the tree entirely
+ * instead of being announced as "graphic".
+ *
+ * A component glyph is *also* handed the size and colour directly, because a
+ * set like lucide draws to its `size` prop and would otherwise render at its
+ * own 24px inside a 16px box.
+ */
+export declare const MPIcon: React.ForwardRefExoticComponent<MPIconProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/icon/MPIcon.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import*as i from"react";function o(e){return!i.isValidElement(e)}export const MPIcon=i.forwardRef(function({icon:r,size:t,color:l,strokeWidth:n,center:s=!1,label:c,className:a,style:d,...f},m){const u=["mp-icon inline-flex shrink-0 items-center justify-center align-middle",void 0===t?"":"[&>svg]:block [&>svg]:size-full [&>img]:block [&>img]:size-full",s?"justify-self-center":"",a??""].filter(Boolean).join(" ");return e("span",{ref:m,className:u,style:{...void 0===t?{}:{width:t,height:t,fontSize:t},...void 0===l?{}:{color:l},...d},role:c?"img":void 0,"aria-label":c,"aria-hidden":!c||void 0,...f,children:o(r)?i.createElement(r,{size:t,color:void 0===l?"currentColor":l,strokeWidth:n}):r})});

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

@@ -0,0 +1,2 @@
+export { MPIcon } from './MPIcon';
+export type { MPIconProps } from './MPIcon';

package/dist/components/icon/index.js

@@ -0,0 +1 @@
+export{MPIcon}from"./MPIcon";

package/dist/components/text-field/MPTextField.d.ts

@@ -0,0 +1,130 @@
+import * as React from 'react';
+/** The input modes this field is built for. */
+export type MPTextFieldType = 'email' | 'password' | 'text';
+export interface MPTextFieldProps {
+    /**
+     * The field's text. This is a controlled component: what is shown is what is
+     * passed, except during composition — see `onChange`.
+     */
+    value: string;
+    /** Name of the form control, as on a native `<input>`. */
+    name?: string;
+    /**
+     * Which control to draw. `password` is the one that changes behaviour rather
+     * than only appearance: it grows a reveal toggle in the trailing adornment.
+     * @default 'text'
+     */
+    type?: MPTextFieldType;
+    /** Placeholder shown while the field is empty. */
+    placeholder?: string;
+    /** Native `autocomplete` token — `'email'`, `'current-password'`, `'off'`. */
+    autoComplete?: string;
+    /**
+     * Label above the field. Always drawn shrunk and notched rather than floating
+     * over the placeholder, so a field with a label and a field without one sit
+     * at the same height in a form.
+     */
+    label?: string;
+    /** Marks the field required, both to assistive technology and to the label. */
+    required?: boolean;
+    /** Greys the field out and stops it taking input. */
+    disabled?: boolean;
+    /**
+     * Draws the field at MUI's `medium` size instead of `small`.
+     * @default false
+     */
+    large?: boolean;
+    /**
+     * Focuses the field on mount — except on a small screen, where it would
+     * summon the on-screen keyboard over the page the reader has just arrived at.
+     * @default false
+     */
+    autoFocus?: boolean;
+    /** Stretches the field to the width of its container. */
+    fullWidth?: boolean;
+    /**
+     * Shows the value without allowing edits. Unlike `disabled` the text stays
+     * selectable and the field stays in the tab order, which is what you want for
+     * a value the reader may need to copy.
+     */
+    readOnly?: boolean;
+    /**
+     * Swallows the Enter key instead of letting it insert a newline. Only
+     * meaningful with `rows`, since a single-line field has no newline to insert
+     * — there, Enter is already prevented so it cannot submit a surrounding form
+     * twice.
+     */
+    disableEnterKey?: boolean;
+    /**
+     * The message under the field. Its presence is also what puts the field into
+     * its error state, so there is no way to show an error with no explanation.
+     * @default ''
+     */
+    errorMessage?: string;
+    /** Renders a `<textarea>` of this many rows instead of an `<input>`. */
+    rows?: number;
+    /** Caps the number of characters the field will accept. */
+    maxLength?: number;
+    /** Content placed before the text — an `MPIcon`, usually. */
+    startIcon?: React.ReactNode;
+    /**
+     * Lets the reader drag a multiline field taller. Ignored without `rows`.
+     * @default false
+     */
+    resizable?: boolean;
+    /**
+     * The id put on the control and pointed at by the label. Derived from `name`
+     * when omitted, which is enough as long as no two fields on a page share a
+     * name.
+     */
+    id?: string;
+    /**
+     * Called with the field's text on every change, including each keystroke of
+     * an in-progress composition. The field shows what was actually typed until
+     * the composition ends, so a parent is free to normalise, truncate or reject
+     * the value it is handed without the caret jumping mid-syllable.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Called when Enter is pressed. On a single-line field Enter is then
+     * swallowed, so a form is submitted once rather than also natively.
+     */
+    onSubmit?: () => void;
+    /**
+     * Called before every change, ahead of `onChange`. For clearing a
+     * form-level error that a further edit has made stale.
+     */
+    onFormReset?: () => void;
+}
+/**
+ * A Material UI text field that survives an IME.
+ *
+ * The field is `@mui/material`'s `OutlinedInput`, and everything MUI decides
+ * about how a field looks — the notched outline, the sizes, the palette, the
+ * error colour — it still decides here. What this component adds is the
+ * handling around a controlled input that a language with an input method
+ * exposes, plus the parts of a field that are always assembled by hand
+ * anyway: the label, the helper text, the adornments and the password toggle.
+ *
+ * ## The composition problem
+ *
+ * A controlled `<input>` is rendered from its `value` prop. While an IME is
+ * composing — Korean, Japanese, Chinese, and dead-key sequences in several
+ * European layouts — the browser is holding a *provisional* string in the
+ * element that has not been committed yet. Writing a `value` back over it in
+ * that moment destroys the composition: the syllable in progress is thrown
+ * away, and the caret jumps. Anything the parent does to the value in its
+ * `onChange` — trimming, upper-casing, validating, or simply re-rendering
+ * slowly — is enough to trigger it.
+ *
+ * So while a composition is running the field shows its own copy of what the
+ * element contains and stops rendering `value`. `onChange` still fires for
+ * every keystroke, so a parent sees the text as it is typed. When the
+ * composition ends the copy is dropped and the field is controlled again.
+ *
+ * This is the whole reason the component exists. It is also why `value` and
+ * `onChange` are a plain string rather than an event: an event's `target` is
+ * the element mid-composition, which is precisely the value that must not be
+ * trusted.
+ */
+export declare const MPTextField: React.ForwardRefExoticComponent<MPTextFieldProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;

package/dist/components/text-field/MPTextField.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import r from"@mui/material/FormControl";import n from"@mui/material/FormHelperText";import i from"@mui/material/IconButton";import a from"@mui/material/InputAdornment";import l from"@mui/material/InputLabel";import s from"@mui/material/OutlinedInput";import m from"@mui/material/useMediaQuery";import{useTheme as u}from"@mui/material/styles";import{MPIcon as d}from"../icon/MPIcon";import{VisibilityIcon as p,VisibilityOffIcon as c}from"../../constants/icons";export const MPTextField=o.forwardRef(function({value:f,name:h,type:x="text",placeholder:y,autoComplete:b,label:g,onChange:v,onFormReset:C,onSubmit:w,errorMessage:I="",required:F=!1,fullWidth:M=!1,readOnly:k=!1,autoFocus:z=!1,large:E=!1,disabled:S=!1,disableEnterKey:D=!1,rows:R,maxLength:j,startIcon:A,resizable:L=!1,id:O},P){const q=o.useRef(null),K=u(),T=m(K.breakpoints.down("sm")),[U,W]=o.useState(!1),[B,H]=o.useState(!1),[Q,$]=o.useState(f),G=o.useId(),J=O??`mp-text-field-${h??G}`,N=!!R,V=o.useCallback(e=>{q.current=e,"function"==typeof P?P(e):P&&(P.current=e)},[P]),X=e=>{e.preventDefault()};return o.useEffect(()=>{B||$(f)},[f,B]),o.useEffect(()=>{z&&!T&&q.current?.focus()},[]),t(r,{required:F,fullWidth:M,error:I.length>0,children:[g&&e(l,{size:"small",color:"secondary",shrink:!0,htmlFor:J,children:g}),e(s,{id:J,autoComplete:b,inputRef:V,type:U?"text":x,label:g,notched:!!g,rows:R,multiline:N,color:k?"secondary":void 0,readOnly:k,placeholder:y,startAdornment:A?e(a,{position:"start",children:A}):null,inputProps:j?{maxLength:j}:void 0,endAdornment:"password"===x?e(a,{position:"end",children:e(i,{"aria-label":U?"hide the password":"display the password",onClick:()=>W(e=>!e),onMouseDown:X,onMouseUp:X,edge:"end",disabled:S,children:e(d,{icon:U?p:c,size:E?22:20})})}):null,size:E?"medium":"small",sx:L&&N?{"& textarea":{resize:"vertical"}}:void 0,name:h,disabled:S,value:B?Q:f,onChange:e=>{C?.();const t=e.target.value;B&&$(t),v?.(t)},onCompositionStart:()=>{H(!0),$(f)},onCompositionUpdate:e=>{$(e.target.value)},onCompositionEnd:e=>{H(!1);const t=e.target.value;v?.(t),$(t)},onKeyDown:e=>{"Enter"===e.key&&(w?.(),N&&!D||e.preventDefault())}}),I.length>0&&e(n,{error:!0,children:I})]})});

package/dist/components/text-field/index.d.ts

@@ -0,0 +1,2 @@
+export { MPTextField } from './MPTextField';
+export type { MPTextFieldProps, MPTextFieldType } from './MPTextField';

package/dist/components/text-field/index.js

@@ -0,0 +1 @@
+export{MPTextField}from"./MPTextField";

package/dist/constants/icons.d.ts

@@ -0,0 +1,55 @@
+/** The glyph a password field shows while the password is legible. */
+export declare const VisibilityIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** The glyph a password field shows while the password is masked. */
+export declare const VisibilityOffIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Dismiss: a chip, a dialog, an alert. */
+export declare const CloseIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** A ticked option, a completed step. */
+export declare const CheckIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Disclosure, pointing down. */
+export declare const ChevronDownIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Disclosure, pointing up. */
+export declare const ChevronUpIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Previous, in a pager or a carousel. */
+export declare const ChevronLeftIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Next, in a pager or a carousel. */
+export declare const ChevronRightIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Search, for a field's leading adornment. */
+export declare const SearchIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Copy to clipboard. */
+export declare const CopyIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Severity: something worth knowing. */
+export declare const InfoIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Severity: it worked. */
+export declare const SuccessIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Severity: proceed carefully. */
+export declare const WarningIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Severity: it did not work. */
+export declare const ErrorIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/**
+ * The same glyphs, keyed by role.
+ *
+ * Kebab-case keys so a name can be carried in a prop, a config file or a
+ * database column without a second spelling to translate.
+ *
+ * Importing this pulls in every glyph above — see the note at the top of the
+ * file. Reach for the named exports when only one or two are needed.
+ */
+export declare const ICONS: {
+    readonly visibility: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly 'visibility-off': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly close: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly check: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly 'chevron-down': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly 'chevron-up': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly 'chevron-left': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly 'chevron-right': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly search: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly copy: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly info: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly success: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly warning: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly error: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+};
+/** Every role name `ICONS` answers to. */
+export type MPIconName = keyof typeof ICONS;

package/dist/constants/icons.js

@@ -0,0 +1 @@
+import{Check as o,ChevronDown as n,ChevronLeft as c,ChevronRight as r,ChevronUp as e,CircleAlert as t,CircleCheck as i,Copy as s,Eye as I,EyeOff as p,Info as h,Search as x,TriangleAlert as C,X as v}from"lucide-react";export const VisibilityIcon=I;export const VisibilityOffIcon=p;export const CloseIcon=v;export const CheckIcon=o;export const ChevronDownIcon=n;export const ChevronUpIcon=e;export const ChevronLeftIcon=c;export const ChevronRightIcon=r;export const SearchIcon=x;export const CopyIcon=s;export const InfoIcon=h;export const SuccessIcon=i;export const WarningIcon=C;export const ErrorIcon=t;export const ICONS={visibility:VisibilityIcon,"visibility-off":VisibilityOffIcon,close:CloseIcon,check:CheckIcon,"chevron-down":ChevronDownIcon,"chevron-up":ChevronUpIcon,"chevron-left":ChevronLeftIcon,"chevron-right":ChevronRightIcon,search:SearchIcon,copy:CopyIcon,info:InfoIcon,success:SuccessIcon,warning:WarningIcon,error:ErrorIcon};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './constants/icons';
+export * from './components/icon';
+export * from './components/text-field';

package/dist/index.js

@@ -0,0 +1 @@
+export*from"./types";export*from"./constants/icons";export*from"./components/icon";export*from"./components/text-field";

package/dist/styles.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+.fixed{position:fixed}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.table{display:table}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.resize{resize:both}.items-center{align-items:center}.justify-center{justify-content:center}.justify-self-center{justify-self:center}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.align-middle{vertical-align:middle}.\[\&\>img\]\:block>img{display:block}.\[\&\>img\]\:size-full>img{width:100%;height:100%}.\[\&\>svg\]\:block>svg{display:block}.\[\&\>svg\]\:size-full>svg{width:100%;height:100%}:root{--mp-duration:.25s}

package/dist/tailwind.css

@@ -0,0 +1,63 @@
+/**
+ * Material Plus design tokens, and the source declaration the components need.
+ *
+ * This file ships as `material-plus-ui/tailwind.css`, for a project that runs
+ * Tailwind itself and wants the components' utilities generated in the same
+ * pass as its own:
+ *
+ *   @import 'tailwindcss';
+ *   @import 'material-plus-ui/tailwind.css';
+ *
+ * A project with no Tailwind imports `material-plus-ui/styles.css` instead, which
+ * is this file plus the compiled utilities, built by `scripts/build-styles.mjs`
+ * from `src/standalone.css`. The tokens below are the same in both.
+ *
+ * ## What is deliberately not here
+ *
+ * **Colour, typography and dark mode.** Material UI owns all three. A component
+ * in this library takes its palette from the surrounding `ThemeProvider`, the
+ * same as the `@mui/material` component beside it, so a token family here would
+ * be a second theme that could disagree with the first. Anything a component
+ * needs from the theme it reads through MUI, not from a custom property.
+ *
+ * **A reset.** MUI's `CssBaseline` is one, and every application using this
+ * library already has it. See `src/standalone.css`.
+ *
+ * What Tailwind is for here is layout and the handful of structural utilities a
+ * component needs that `sx` would express less clearly — so the tokens below
+ * stay to that job, and the file is short on purpose.
+ */
+
+/*
+ * The components' classes are Tailwind utilities, so Tailwind has to see the
+ * files that spell them out — otherwise a component renders with none of them.
+ *
+ * `@source` resolves relative to the file it is written in, not to whatever
+ * imported it. In a consumer's install that is `node_modules/material-plus-ui/dist/`,
+ * next to the compiled components; in this repository it is `src/`, next to the
+ * `.tsx`. One line covers both, and an explicitly registered source is scanned
+ * even inside `node_modules`, which automatic detection skips.
+ *
+ * This is why consumers do not write an `@source '../node_modules/material-plus-ui'`
+ * of their own — a path that would depend on where their CSS file happens to sit.
+ *
+ * The same line is what the standalone build scans: `src/standalone.css` pulls
+ * this file in from `src/`, so `.` means the components' `.tsx` there. One
+ * declaration, three contexts.
+ */
+@source '.';
+
+/* ---------------------------------------------------------------------------
+ * Tokens
+ *
+ * Only what a component actually reads. A token nobody uses is a promise to
+ * keep supporting a name, so they are added here as components need them
+ * rather than in anticipation.
+ * ------------------------------------------------------------------------- */
+
+:root {
+  /* How long a Material Plus transition runs. Matches MUI's own `short`
+     duration so a control from this library and one from `@mui/material`
+     settle together rather than a frame apart. */
+  --mp-duration: 250ms;
+}

package/dist/types.d.ts

@@ -0,0 +1,57 @@
+/**
+ * The prop vocabulary shared across Material Plus components.
+ *
+ * This library sits on top of Material UI rather than beside it, so the rule
+ * here is the opposite of the usual one for a component library: **where MUI
+ * already has a word, use MUI's word.** A `size` of `'small'`, a `color` of
+ * `'primary'` and an `error` boolean mean on an `MP*` component exactly what
+ * they mean on the `@mui/material` component next to it in the same form. A
+ * second vocabulary would make a consumer translate between two libraries on
+ * every line, which is the thing this package exists to avoid.
+ *
+ * What lives here is only what MUI has no word for.
+ */
+import type * as React from 'react';
+/**
+ * The size ladder for controls, spelled the way MUI spells it.
+ *
+ * Re-declared rather than imported from `@mui/material` on purpose: it is two
+ * string literals, and importing it would put a type-only dependency on a
+ * peer's internal module path in every component's declaration file.
+ */
+export type MPSize = 'small' | 'medium';
+/** A palette role. The same six names `@mui/material` uses. */
+export type MPColor = 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+/**
+ * The props a glyph component is handed when Material Plus renders one.
+ *
+ * Deliberately the shape `lucide-react` icons already take, which is also the
+ * shape most icon sets settle on — a size, a colour and a stroke. Any component
+ * accepting these can be passed as an `icon`, so an application is not tied to
+ * the set this library happens to depend on.
+ */
+export interface MPIconGlyphProps {
+    size?: number | string;
+    color?: string;
+    strokeWidth?: number | string;
+    className?: string;
+    [key: string]: unknown;
+}
+/**
+ * Something that can be drawn as an icon.
+ *
+ * Two forms, because icon sets hand back two different things:
+ *
+ * - **A component** — `<MPIcon icon={ICONS.close} />`. This is what
+ *   `lucide-react`, `react-icons` and most sets export, and it is the form that
+ *   lets `MPIcon` pass a size and a colour *into* the glyph rather than trying
+ *   to style an element from the outside.
+ * - **An element** — `<MPIcon icon={<svg>…</svg>} />`. A drawing of your own, a
+ *   `@mui/icons-material` glyph already constructed, an `<img>`. It is sized by
+ *   the box it is laid into.
+ *
+ * Note that this is *not* `React.ReactNode`. A component and an element are
+ * rendered differently, and the distinction has to survive into the type or a
+ * caller passing `ICONS.close` would be told to pass `<ICONS.close />` instead.
+ */
+export type MPIconGlyph = React.ComponentType<MPIconGlyphProps> | React.ReactElement;

package/package.json

@@ -0,0 +1,154 @@
+{
+  "name": "material-plus-ui",
+  "version": "0.0.1",
+  "description": "A React component library that extends Material UI — the components MUI does not ship, and wider versions of the ones it does. Built on @mui/material, Base UI and Tailwind CSS v4. ESM only, types included.",
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "author": "CDGet <jooy2.contact@gmail.com>",
+  "license": "MIT",
+  "homepage": "https://material-plus.cdget.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jooy2/material-plus.git"
+  },
+  "bugs": {
+    "url": "https://github.com/jooy2/material-plus/issues"
+  },
+  "scripts": {
+    "build": "npm run format:fix && tsc --project tsconfig.prod.json && npm run minify && node scripts/build-styles.mjs",
+    "lint": "eslint . --ext .js,.ts .",
+    "lint:fix": "eslint . --ext .js,.ts --fix .",
+    "minify": "terser-glob 'dist/**/*.js' --config-file terser.config.json",
+    "prepare": "npm run build",
+    "format": "prettier .",
+    "format:fix": "prettier . --write",
+    "docs:changelog": "node scripts/copy-changelog.mjs",
+    "docs:dev": "npm run build && npm run docs:changelog && vitepress dev docs",
+    "docs:build": "npm run build && npm run docs:changelog && vitepress build docs",
+    "docs:serve": "npm run build && npm run docs:build && vitepress serve docs",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --project tsconfig.prod.json --noEmit && tsc --project test/tsconfig.json && tsc --project docs/tsconfig.json"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "module": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "module": "./dist/types.js",
+      "default": "./dist/types.js"
+    },
+    "./constants/icons": {
+      "types": "./dist/constants/icons.d.ts",
+      "module": "./dist/constants/icons.js",
+      "default": "./dist/constants/icons.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./tailwind.css": "./dist/tailwind.css"
+  },
+  "typesVersions": {
+    "*": {
+      "index.d.ts": [
+        "dist/index.d.ts"
+      ]
+    }
+  },
+  "keywords": [
+    "material-plus-ui",
+    "material-plus",
+    "material-ui",
+    "mui",
+    "mui-extensions",
+    "react",
+    "reactjs",
+    "react-components",
+    "react-ui",
+    "ui",
+    "ui-kit",
+    "ui-library",
+    "ui-components",
+    "component-library",
+    "components",
+    "design-system",
+    "frontend",
+    "web",
+    "typescript",
+    "tsx",
+    "esm",
+    "accessible",
+    "accessibility",
+    "a11y",
+    "aria",
+    "dark-mode",
+    "theming",
+    "tailwindcss",
+    "base-ui",
+    "lucide",
+    "icon",
+    "textfield",
+    "input",
+    "form",
+    "ime",
+    "composition"
+  ],
+  "devDependencies": {
+    "@base-ui/react": "^1.7.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@eslint/js": "^9.39.1",
+    "@mui/material": "^9.3.0",
+    "@tailwindcss/postcss": "^4.3.3",
+    "@types/node": "^26.1.2",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@typescript-eslint/parser": "^8.66.0",
+    "@vitejs/plugin-react": "^6.0.5",
+    "@vitest/browser": "^4.1.10",
+    "@vitest/browser-playwright": "^4.1.10",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-n": "^18.2.2",
+    "globals": "^17.9.0",
+    "jiti": "^2.7.0",
+    "playwright": "^1.62.1",
+    "postcss": "^8.5.25",
+    "prettier": "^3.9.6",
+    "prettier-plugin-tailwindcss": "^0.8.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "tailwindcss": "^4.3.3",
+    "terser-glob": "^1.2.1",
+    "tsx": "^4.23.6",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.66.0",
+    "vite": "^8.2.0",
+    "vitepress": "^1.6.4",
+    "vitepress-i18n": "^1.3.5",
+    "vitepress-sidebar": "^1.36.1",
+    "vitest": "^4.1.10",
+    "vitest-browser-react": "^2.2.0"
+  },
+  "dependencies": {
+    "lucide-react": "^1.28.0"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "@mui/material": "^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  }
+}