material-plus-ui 1.10.0 → 1.12.0

package/README.md

@@ -1,14 +1,14 @@
-<!-- An absolute URL, not `docs/public/logo-large.png`: this file is the package
-     page on npm as well as the front page on GitHub, `.npmignore` keeps `docs/`
-     out of the tarball, and npm resolves a relative image against the published
-     package before it falls back to anything else. -->
+<!-- An absolute URL, not `../../docs/public/logo-large.png`: this file is the
+     package page on npm, the documentation folder is not in the tarball, and npm
+     resolves a relative image against the published package before it falls
+     back to anything else. -->
 <img src="https://raw.githubusercontent.com/jooy2/material-plus-ui/main/docs/public/logo-large.png" alt="Material Plus" width="96" height="96">
 
-# Material Plus
+# Material Plus for React
 
 [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/jooy2/material-plus-ui/blob/main/LICENSE) ![Programming Language Usage](https://img.shields.io/github/languages/top/jooy2/material-plus-ui) [![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)
 
-This README is the quick start. [The documentation site](https://material-plus.cdget.com) has a page per component, with live previews and the full props table.
+This README is the quick start. [The documentation site](https://material-plus.cdget.com) has a page per component, with live previews and the full props table. The same components ship for Flutter as [`material_plus_ui`](https://pub.dev/packages/material_plus_ui), under the same names and the same prop vocabulary; the two packages version independently.
 
 ![Material Plus components arranged around the Material Plus mark: a search field, a settings card, radio buttons and checkboxes, buttons and chips, a segmented button and pagination, an alert, a slider, a progress bar and a meter, an avatar stack, a badge and a rating](https://raw.githubusercontent.com/jooy2/material-plus-ui/main/.github/showcase.png)
 
@@ -23,7 +23,7 @@ It also goes on past where the specification stops. The button ladder keeps the
 - **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.
 - **Works in a Next.js server component**, and in any bundler: the components carry `"use client"`, the barrel and the data do not, and every specifier in `dist/` names a file — so webpack, Vite, esbuild, Rollup and plain Node all resolve it.
-- **ESM only**, TypeScript declarations included, and tree-shakeable for real: one component is 3.8 kB gzipped and five are 9.9 kB, against 137.5 kB for every export there is. `npm run measure` prints those numbers off a real bundler, so they cannot quietly stop being true. The stylesheet splits the same way.
+- **ESM only**, TypeScript declarations included, and tree-shakeable for real: one component is 3.8 kB gzipped and five are 10.0 kB, against 138.3 kB for every export there is. `npm run measure` prints those numbers off a real bundler, so they cannot quietly stop being true. The stylesheet splits the same way.
 - **Two runtime dependencies**, and the second is loaded rather than bundled: `lucide-react` for the glyphs, and `highlight.js` behind `MPCodeBlock` — every grammar sits behind an `import()`, so a page that renders no code block never downloads one. React 18 or 19, Node.js 22 or later.
 
 ## Documentation
@@ -79,7 +79,7 @@ If Tailwind v4 is already in your project, import the token sheet instead:
 @import 'material-plus-ui/tailwind.css';
 ```
 
-A page that renders a handful of components can take the tokens and a sheet each instead of the whole 174.3 kB — 6.3 kB gzipped for one component against 23.7 kB for the lot. [The guide](https://material-plus.cdget.com/guide/getting-started#if-you-only-render-a-few-components) has the numbers and where the two paths cross.
+A page that renders a handful of components can take the tokens and a sheet each instead of the whole 174.9 kB — 6.3 kB gzipped for one component against 23.7 kB for the lot. [The guide](https://material-plus.cdget.com/guide/getting-started#if-you-only-render-a-few-components) has the numbers and where the two paths cross.
 
 ```ts
 import 'material-plus-ui/styles/tokens.css';
@@ -153,16 +153,21 @@ A controlled `<input>` renders from its `value`. While an input method is compos
 
 ## Contributing
 
-Issues and pull requests are welcome. [CONTRIBUTING.md](CONTRIBUTING.md) has the repository layout, the commands and what a component is expected to own. Participation is subject to the [Code of Conduct](CODE_OF_CONDUCT.md).
+Issues and pull requests are welcome. [CONTRIBUTING.md](https://github.com/jooy2/material-plus-ui/blob/main/CONTRIBUTING.md) has the repository layout, the commands and what a component is expected to own. Participation is subject to the [Code of Conduct](https://github.com/jooy2/material-plus-ui/blob/main/CODE_OF_CONDUCT.md).
+
+This package lives in `packages/react` of the repository, and is entered and run on its own:
 
 ```bash
+cd packages/react
 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
+npm run typecheck  # src and test
+npm run lint
 ```
 
-To report a security issue, follow the process in [SECURITY.md](SECURITY.md) instead of opening a public issue.
+The documentation site is a package of its own in `docs/`: `cd docs && npm install && npm run dev`.
+
+To report a security issue, follow the process in [SECURITY.md](https://github.com/jooy2/material-plus-ui/blob/main/SECURITY.md) instead of opening a public issue.
 
 For anything else that does not belong in a public issue, write to CDGet at [cdget.com/contact](https://cdget.com/contact).
 

package/dist/a2ui/catalog.d.ts

@@ -81,15 +81,15 @@ export declare const createMPA2uiCatalog: ({ id, components, functions }?: {
     components?: ReactComponentImplementation[];
     /** The functions an agent may call. Defaults to the basic catalog's. */
     functions?: typeof BASIC_FUNCTIONS;
-}) => Catalog<ReactComponentImplementation, import("@a2ui/web_core/v0_9").FunctionImplementation>;
+}) => Catalog<ReactComponentImplementation, import("@a2ui/web_core").FunctionImplementation>;
 /**
  * The basic catalog, drawn as Material Plus.
  *
  * ```ts
- * const processor = new MessageProcessor([mpA2uiCatalog]);
+ * const processor = new MessageProcessor<ReactComponentImplementation>([mpA2uiCatalog]);
  * ```
  */
-export declare const mpA2uiCatalog: Catalog<ReactComponentImplementation, import("@a2ui/web_core/v0_9").FunctionImplementation>;
+export declare const mpA2uiCatalog: Catalog<ReactComponentImplementation, import("@a2ui/web_core").FunctionImplementation>;
 /**
  * The same, plus the five components the basic catalog has no way to express.
  *
@@ -98,7 +98,10 @@ export declare const mpA2uiCatalog: Catalog<ReactComponentImplementation, import
  * table or a chart.
  *
  * ```ts
- * const processor = new MessageProcessor([mpA2uiCatalog, mpA2uiExtendedCatalog]);
+ * const processor = new MessageProcessor<ReactComponentImplementation>([
+ *   mpA2uiCatalog,
+ *   mpA2uiExtendedCatalog
+ * ]);
  * ```
  */
-export declare const mpA2uiExtendedCatalog: Catalog<ReactComponentImplementation, import("@a2ui/web_core/v0_9").FunctionImplementation>;
+export declare const mpA2uiExtendedCatalog: Catalog<ReactComponentImplementation, import("@a2ui/web_core").FunctionImplementation>;

package/dist/a2ui/catalog.js

@@ -1 +1 @@
-import{BASIC_FUNCTIONS as o,Catalog as t}from"@a2ui/web_core/v0_9";import{MPA2uiBarChart as i}from"./extended/MPA2uiBarChart.js";import{MPA2uiDataTable as m}from"./extended/MPA2uiDataTable.js";import{MPA2uiLineChart as e}from"./extended/MPA2uiLineChart.js";import{MPA2uiPieChart as r}from"./extended/MPA2uiPieChart.js";import{MPA2uiStatistic as n}from"./extended/MPA2uiStatistic.js";import{MPA2uiAudioPlayer as s}from"./components/MPA2uiAudioPlayer.js";import{MPA2uiButton as p}from"./components/MPA2uiButton.js";import{MPA2uiCard as A}from"./components/MPA2uiCard.js";import{MPA2uiCheckBox as c}from"./components/MPA2uiCheckBox.js";import{MPA2uiChoicePicker as a}from"./components/MPA2uiChoicePicker.js";import{MPA2uiColumn as P}from"./components/MPA2uiColumn.js";import{MPA2uiDateTimeInput as u}from"./components/MPA2uiDateTimeInput.js";import{MPA2uiDivider as M}from"./components/MPA2uiDivider.js";import{MPA2uiIcon as f}from"./components/MPA2uiIcon.js";import{MPA2uiImage as _}from"./components/MPA2uiImage.js";import{MPA2uiList as j}from"./components/MPA2uiList.js";import{MPA2uiModal as d}from"./components/MPA2uiModal.js";import{MPA2uiRow as C}from"./components/MPA2uiRow.js";import{MPA2uiSlider as I}from"./components/MPA2uiSlider.js";import{MPA2uiTabs as l}from"./components/MPA2uiTabs.js";import{MPA2uiText as x}from"./components/MPA2uiText.js";import{MPA2uiTextField as T}from"./components/MPA2uiTextField.js";import{MPA2uiVideo as O}from"./components/MPA2uiVideo.js";export const A2UI_BASIC_CATALOG_ID="https://a2ui.org/specification/v0_9/catalogs/basic/catalog.json";export const MP_A2UI_COMPONENTS=[x,_,f,O,s,C,P,j,A,l,d,M,p,T,c,a,I,u];export const MP_A2UI_CATALOG_ID="https://material-plus.cdget.com/a2ui/v0_9/catalog.json";export const MP_A2UI_EXTENDED_COMPONENTS=[m,i,e,r,n];export const createMPA2uiCatalog=({id:i=A2UI_BASIC_CATALOG_ID,components:m=[],functions:e=o}={})=>new t(i,[...MP_A2UI_COMPONENTS,...m],e);export const mpA2uiCatalog=/*@__PURE__*/createMPA2uiCatalog();export const mpA2uiExtendedCatalog=/*@__PURE__*/createMPA2uiCatalog({id:MP_A2UI_CATALOG_ID,components:MP_A2UI_EXTENDED_COMPONENTS});
+import{BASIC_FUNCTIONS as o,Catalog as t}from"@a2ui/web_core/v0_9";import{MPA2uiBarChart as i}from"./extended/MPA2uiBarChart.js";import{MPA2uiDataTable as m}from"./extended/MPA2uiDataTable.js";import{MPA2uiLineChart as e}from"./extended/MPA2uiLineChart.js";import{MPA2uiPieChart as r}from"./extended/MPA2uiPieChart.js";import{MPA2uiStatistic as n}from"./extended/MPA2uiStatistic.js";import{MPA2uiAudioPlayer as s}from"./components/MPA2uiAudioPlayer.js";import{MPA2uiButton as p}from"./components/MPA2uiButton.js";import{MPA2uiCard as A}from"./components/MPA2uiCard.js";import{MPA2uiCheckBox as c}from"./components/MPA2uiCheckBox.js";import{MPA2uiChoicePicker as a}from"./components/MPA2uiChoicePicker.js";import{MPA2uiColumn as P}from"./components/MPA2uiColumn.js";import{MPA2uiDateTimeInput as u}from"./components/MPA2uiDateTimeInput.js";import{MPA2uiDivider as M}from"./components/MPA2uiDivider.js";import{MPA2uiIcon as f}from"./components/MPA2uiIcon.js";import{MPA2uiImage as _}from"./components/MPA2uiImage.js";import{MPA2uiList as j}from"./components/MPA2uiList.js";import{MPA2uiModal as d}from"./components/MPA2uiModal.js";import{MPA2uiRow as C}from"./components/MPA2uiRow.js";import{MPA2uiSlider as I}from"./components/MPA2uiSlider.js";import{MPA2uiTabs as l}from"./components/MPA2uiTabs.js";import{MPA2uiText as x}from"./components/MPA2uiText.js";import{MPA2uiTextField as T}from"./components/MPA2uiTextField.js";import{MPA2uiVideo as O}from"./components/MPA2uiVideo.js";export const A2UI_BASIC_CATALOG_ID="https://a2ui.org/specification/v0_9/catalogs/basic/catalog.json";export const MP_A2UI_COMPONENTS=[x,_,f,O,s,C,P,j,A,l,d,M,p,T,c,a,I,u];export const MP_A2UI_CATALOG_ID="https://material-plus.cdget.com/a2ui/v0_9/catalog.json";export const MP_A2UI_EXTENDED_COMPONENTS=[m,i,e,r,n];export const createMPA2uiCatalog=({id:i=A2UI_BASIC_CATALOG_ID,components:m=[],functions:e=o}={})=>new t(i,"0.9",[...MP_A2UI_COMPONENTS,...m],e);export const mpA2uiCatalog=/*@__PURE__*/createMPA2uiCatalog();export const mpA2uiExtendedCatalog=/*@__PURE__*/createMPA2uiCatalog({id:MP_A2UI_CATALOG_ID,components:MP_A2UI_EXTENDED_COMPONENTS});

package/dist/a2ui/components/MPA2uiList.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as i}from"react/jsx-runtime";import{createComponentImplementation as e}from"@a2ui/react/v0_9";import{ListApi as t}from"@a2ui/web_core/v0_9";import{MPFlex as r}from"../../components/flex/MPFlex.js";import{childNodes as o}from"../internal/children.js";import{FLEX_ALIGN as l,accessibilityAttributes as n,weightStyle as s}from"../internal/common.js";const d={ordered:"decimal",unordered:"disc"};export const MPA2uiList=/*@__PURE__*/e(t,({props:e,buildChild:t})=>{const m=e.listStyle?d[e.listStyle]:void 0;return i(r,{render:"ordered"===e.listStyle?i("ol",{}):i("ul",{}),direction:"horizontal"===e.direction?"row":"column",align:l[e.align??"stretch"]??"stretch",gap:8,style:{margin:0,paddingInlineStart:m?"1.25em":0,listStyleType:m??"none",listStylePosition:"inside",...s(e.weight)},...n(e.accessibility),children:o(e.children,t).map(({key:e,node:t})=>i("li",{style:{display:m?"list-item":"block",minWidth:0},children:t},e))})});
+import{jsx as i}from"react/jsx-runtime";import{createComponentImplementation as r}from"@a2ui/react/v0_9";import{ListApi as e}from"@a2ui/web_core/v0_9";import{MPFlex as t}from"../../components/flex/MPFlex.js";import{childNodes as o}from"../internal/children.js";import{FLEX_ALIGN as n,accessibilityAttributes as l,weightStyle as m}from"../internal/common.js";export const MPA2uiList=/*@__PURE__*/r(e,({props:r,buildChild:e})=>i(t,{render:i("ul",{}),role:"list",direction:"horizontal"===r.direction?"row":"column",align:n[r.align??"stretch"]??"stretch",gap:8,style:{margin:0,paddingInlineStart:0,listStyleType:"none",...m(r.weight)},...l(r.accessibility),children:o(r.children,e).map(({key:r,node:e})=>i("li",{style:{display:"block",minWidth:0},children:e},r))}));