material-plus-ui 1.11.0 → 1.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/README.md +16 -11
  2. package/dist/a2ui/catalog.d.ts +8 -5
  3. package/dist/a2ui/catalog.js +1 -1
  4. package/dist/a2ui/components/MPA2uiList.js +1 -1
  5. package/dist/a2ui/extended/api.d.ts +142 -810
  6. package/dist/a2ui/index.d.ts +8 -6
  7. package/dist/components/accordion/MPAccordion.js +1 -1
  8. package/dist/components/collapsible/MPCollapsible.js +1 -1
  9. package/dist/components/combobox/MPCombobox.d.ts +8 -2
  10. package/dist/components/container/MPContainer.d.ts +1 -1
  11. package/dist/components/date-range-picker/MPDateRangePicker.js +1 -1
  12. package/dist/components/menu/MPMenu.d.ts +4 -0
  13. package/dist/components/menu/MPMenu.js +1 -1
  14. package/dist/components/navigation-menu/MPNavigationMenu.js +1 -1
  15. package/dist/components/otp-field/MPOtpField.js +1 -1
  16. package/dist/components/pagination/MPPagination.js +1 -1
  17. package/dist/components/pill/MPPill.js +1 -1
  18. package/dist/components/shortcut/MPShortcut.d.ts +14 -0
  19. package/dist/components/shortcut/MPShortcut.js +1 -1
  20. package/dist/components/tabs/MPTabs.js +1 -1
  21. package/dist/components/tour/MPTour.js +1 -1
  22. package/dist/internal/FieldOutline.js +1 -1
  23. package/dist/internal/Picker.js +1 -1
  24. package/dist/styles/accordion.css +1 -1
  25. package/dist/styles/calendar.css +1 -1
  26. package/dist/styles/collapsible.css +1 -1
  27. package/dist/styles/color-picker.css +1 -1
  28. package/dist/styles/combobox.css +1 -1
  29. package/dist/styles/data-table.css +1 -1
  30. package/dist/styles/date-picker.css +1 -1
  31. package/dist/styles/date-range-picker.css +1 -1
  32. package/dist/styles/date-time-picker.css +1 -1
  33. package/dist/styles/menu.css +1 -1
  34. package/dist/styles/menubar.css +1 -1
  35. package/dist/styles/navigation-menu.css +1 -1
  36. package/dist/styles/number-field.css +1 -1
  37. package/dist/styles/otp-field.css +1 -1
  38. package/dist/styles/pagination.css +1 -1
  39. package/dist/styles/pill.css +1 -1
  40. package/dist/styles/select.css +1 -1
  41. package/dist/styles/text-field.css +1 -1
  42. package/dist/styles/time-picker.css +1 -1
  43. package/dist/styles/transfer.css +1 -1
  44. package/dist/styles/tree-select.css +1 -1
  45. package/dist/styles.css +1 -1
  46. package/package.json +24 -30
package/README.md CHANGED
@@ -1,14 +1,14 @@
1
- <!-- An absolute URL, not `docs/public/logo-large.png`: this file is the package
2
- page on npm as well as the front page on GitHub, `.npmignore` keeps `docs/`
3
- out of the tarball, and npm resolves a relative image against the published
4
- package before it falls back to anything else. -->
1
+ <!-- An absolute URL, not `../../docs/public/logo-large.png`: this file is the
2
+ package page on npm, the documentation folder is not in the tarball, and npm
3
+ resolves a relative image against the published package before it falls
4
+ back to anything else. -->
5
5
  <img src="https://raw.githubusercontent.com/jooy2/material-plus-ui/main/docs/public/logo-large.png" alt="Material Plus" width="96" height="96">
6
6
 
7
- # Material Plus
7
+ # Material Plus for React
8
8
 
9
9
  [![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)
10
10
 
11
- 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.
11
+ 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.
12
12
 
13
13
  ![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)
14
14
 
@@ -79,7 +79,7 @@ If Tailwind v4 is already in your project, import the token sheet instead:
79
79
  @import 'material-plus-ui/tailwind.css';
80
80
  ```
81
81
 
82
- A page that renders a handful of components can take the tokens and a sheet each instead of the whole 175.0 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.
82
+ 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.
83
83
 
84
84
  ```ts
85
85
  import 'material-plus-ui/styles/tokens.css';
@@ -153,16 +153,21 @@ A controlled `<input>` renders from its `value`. While an input method is compos
153
153
 
154
154
  ## Contributing
155
155
 
156
- 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).
156
+ 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).
157
+
158
+ This package lives in `packages/react` of the repository, and is entered and run on its own:
157
159
 
158
160
  ```bash
161
+ cd packages/react
159
162
  npm install # also builds, via `prepare`
160
163
  npm run test # vitest, in a real browser
161
- npm run typecheck # src, test and docs
162
- npm run docs:dev # the documentation site
164
+ npm run typecheck # src and test
165
+ npm run lint
163
166
  ```
164
167
 
165
- To report a security issue, follow the process in [SECURITY.md](SECURITY.md) instead of opening a public issue.
168
+ The documentation site is a package of its own in `docs/`: `cd docs && npm install && npm run dev`.
169
+
170
+ 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.
166
171
 
167
172
  For anything else that does not belong in a public issue, write to CDGet at [cdget.com/contact](https://cdget.com/contact).
168
173
 
@@ -81,15 +81,15 @@ export declare const createMPA2uiCatalog: ({ id, components, functions }?: {
81
81
  components?: ReactComponentImplementation[];
82
82
  /** The functions an agent may call. Defaults to the basic catalog's. */
83
83
  functions?: typeof BASIC_FUNCTIONS;
84
- }) => Catalog<ReactComponentImplementation, import("@a2ui/web_core/v0_9").FunctionImplementation>;
84
+ }) => Catalog<ReactComponentImplementation, import("@a2ui/web_core").FunctionImplementation>;
85
85
  /**
86
86
  * The basic catalog, drawn as Material Plus.
87
87
  *
88
88
  * ```ts
89
- * const processor = new MessageProcessor([mpA2uiCatalog]);
89
+ * const processor = new MessageProcessor<ReactComponentImplementation>([mpA2uiCatalog]);
90
90
  * ```
91
91
  */
92
- export declare const mpA2uiCatalog: Catalog<ReactComponentImplementation, import("@a2ui/web_core/v0_9").FunctionImplementation>;
92
+ export declare const mpA2uiCatalog: Catalog<ReactComponentImplementation, import("@a2ui/web_core").FunctionImplementation>;
93
93
  /**
94
94
  * The same, plus the five components the basic catalog has no way to express.
95
95
  *
@@ -98,7 +98,10 @@ export declare const mpA2uiCatalog: Catalog<ReactComponentImplementation, import
98
98
  * table or a chart.
99
99
  *
100
100
  * ```ts
101
- * const processor = new MessageProcessor([mpA2uiCatalog, mpA2uiExtendedCatalog]);
101
+ * const processor = new MessageProcessor<ReactComponentImplementation>([
102
+ * mpA2uiCatalog,
103
+ * mpA2uiExtendedCatalog
104
+ * ]);
102
105
  * ```
103
106
  */
104
- export declare const mpA2uiExtendedCatalog: Catalog<ReactComponentImplementation, import("@a2ui/web_core/v0_9").FunctionImplementation>;
107
+ export declare const mpA2uiExtendedCatalog: Catalog<ReactComponentImplementation, import("@a2ui/web_core").FunctionImplementation>;
@@ -1 +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});
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,"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});
@@ -1,2 +1,2 @@
1
1
  "use client";
2
- 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))})});
2
+ 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))}));