react-material-expressive 1.0.0 → 1.1.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.
- package/CHANGELOG.md +54 -1
- package/README.md +28 -23
- package/dist/index.cjs +1241 -491
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +110 -9
- package/dist/index.d.ts +110 -9
- package/dist/index.js +1240 -492
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/theme.css +5 -0
- package/docs/components/Combobox.md +119 -0
- package/docs/components/DatePicker.md +14 -2
- package/docs/components/Dropdown.md +4 -0
- package/docs/components/Layers.md +3 -0
- package/docs/components/Menu.md +4 -0
- package/docs/components/NavigationRail.md +3 -0
- package/docs/components/OverflowMenu.md +5 -1
- package/docs/components/Search.md +9 -1
- package/docs/components/SplitButton.md +3 -1
- package/docs/components/TextElement.md +15 -0
- package/llms.txt +64 -59
- package/package.json +5 -2
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
# Combobox
|
|
2
|
+
|
|
3
|
+
ARIA **combobox** with an async-friendly options list — a text field
|
|
4
|
+
(`ComboboxFilled` / `ComboboxOutlined`, same anatomy as the text fields and
|
|
5
|
+
`Select`) over a `role="listbox"` popover. Unlike `Select` (a fixed option
|
|
6
|
+
list) and `Search` (a search bar, not a combobox), it exposes the full
|
|
7
|
+
combobox semantics — `role="combobox"`, `aria-autocomplete`,
|
|
8
|
+
`aria-expanded`/`aria-controls`/`aria-activedescendant` — with keyboard
|
|
9
|
+
navigation and a portaled listbox that escapes `overflow` ancestors.
|
|
10
|
+
|
|
11
|
+
**The library never fetches or filters.** You own the data: as the user types,
|
|
12
|
+
`onInputChange(query)` fires (debounce it on your side), you fetch/filter
|
|
13
|
+
(client- or server-side) and feed the resulting `options` back in. `loading`
|
|
14
|
+
shows a status row while in flight. (Not a Material component — an extra on top
|
|
15
|
+
of the M3 kit.)
|
|
16
|
+
|
|
17
|
+
Because filtering only happens through `onInputChange`, `aria-autocomplete` is
|
|
18
|
+
`"list"` when you wire `onInputChange` (the list narrows as the user types) and
|
|
19
|
+
`"none"` when you don't (a static option popover that never narrows). Wire
|
|
20
|
+
`onInputChange` for a real combobox — even a static list needs a (synchronous)
|
|
21
|
+
filter to narrow.
|
|
22
|
+
|
|
23
|
+
## Import
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import {ComboboxFilled, ComboboxOutlined} from "react-material-expressive";
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## API
|
|
30
|
+
|
|
31
|
+
```ts
|
|
32
|
+
interface ComboboxOption {
|
|
33
|
+
disabled?: boolean;
|
|
34
|
+
label?: string; // input text when selected; defaults to value
|
|
35
|
+
value: string;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
interface ComboboxLabels {
|
|
39
|
+
clear?: string; // clear-button aria-label (default "Clear")
|
|
40
|
+
empty?: string; // no-options status row (default "No results")
|
|
41
|
+
loading?: string; // loading status row (default "Loading…")
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
interface ComboboxOutlinedProps {
|
|
45
|
+
// …plus the native <input> props (placeholder, required, aria-*, …)
|
|
46
|
+
className?: string;
|
|
47
|
+
clearable?: boolean; // trailing clear button when there is text (default true)
|
|
48
|
+
defaultValue?: string; // uncontrolled selected value
|
|
49
|
+
disabled?: boolean;
|
|
50
|
+
error?: boolean;
|
|
51
|
+
errorText?: ReactNode;
|
|
52
|
+
id?: string;
|
|
53
|
+
inputClassName?: string;
|
|
54
|
+
label?: string; // floating label
|
|
55
|
+
labels?: ComboboxLabels;
|
|
56
|
+
leftElement?: ReactNode; // leading icon (24px box)
|
|
57
|
+
listboxClassName?: string; // class for the portaled listbox surface
|
|
58
|
+
loading?: boolean; // consumer signals an in-flight fetch
|
|
59
|
+
name?: string; // posts the selected value via a hidden input
|
|
60
|
+
onChange?: (value: string) => void; // selected value, or "" when cleared
|
|
61
|
+
onInputChange?: (query: string) => void; // re-query (debounce on your side)
|
|
62
|
+
options: ComboboxOption[]; // ALREADY filtered
|
|
63
|
+
supportingText?: ReactNode;
|
|
64
|
+
value?: string; // controlled selected value
|
|
65
|
+
}
|
|
66
|
+
// ComboboxFilledProps is identical.
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## Example (async)
|
|
70
|
+
|
|
71
|
+
```tsx
|
|
72
|
+
function CountryPicker() {
|
|
73
|
+
const [options, setOptions] = useState<ComboboxOption[]>([]);
|
|
74
|
+
const [loading, setLoading] = useState(false);
|
|
75
|
+
|
|
76
|
+
const search = useMemo(
|
|
77
|
+
() =>
|
|
78
|
+
debounce(async (q: string) => {
|
|
79
|
+
setLoading(true);
|
|
80
|
+
setOptions(await fetchCountries(q)); // your API
|
|
81
|
+
setLoading(false);
|
|
82
|
+
}, 250),
|
|
83
|
+
[],
|
|
84
|
+
);
|
|
85
|
+
|
|
86
|
+
return (
|
|
87
|
+
<ComboboxOutlined
|
|
88
|
+
label="Country"
|
|
89
|
+
loading={loading}
|
|
90
|
+
onInputChange={search}
|
|
91
|
+
onChange={setCountry}
|
|
92
|
+
options={options}
|
|
93
|
+
/>
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## Keyboard
|
|
99
|
+
|
|
100
|
+
`ArrowDown`/`ArrowUp` open the popover (then move the active option, skipping
|
|
101
|
+
disabled, wrapping); `Home`/`End` jump; `Enter` commits the active option;
|
|
102
|
+
`Escape` and `Tab` close and revert the input text to the selected option's
|
|
103
|
+
label. Typing fires `onInputChange` and keeps the popover open.
|
|
104
|
+
|
|
105
|
+
## Gotchas
|
|
106
|
+
|
|
107
|
+
- **You own fetching and filtering.** `options` are rendered as-is; the
|
|
108
|
+
library never filters them. Debounce `onInputChange` yourself.
|
|
109
|
+
- Two states: the **selected value** (`value`/`onChange`, controllable via
|
|
110
|
+
`useControlled`) and the **input text** (the query). Typing diverges the
|
|
111
|
+
text; blur/Escape/Tab without a pick reverts it to the selected label.
|
|
112
|
+
- `onChange` fires the option **value** (or `""` on clear) — not on every
|
|
113
|
+
keystroke (that's `onInputChange`).
|
|
114
|
+
- The listbox is portaled to `document.body` (fixed positioning), matches the
|
|
115
|
+
input width and flips up when there's no room below — it escapes `overflow`
|
|
116
|
+
ancestors. An empty/loading popover shows a `role="status"` row instead of an
|
|
117
|
+
empty listbox.
|
|
118
|
+
- `name` renders a hidden input so the value posts in native forms; native
|
|
119
|
+
`required` validation is not wired — validate in `onSubmit`.
|
|
@@ -51,11 +51,14 @@ interface DatePickerLabels {
|
|
|
51
51
|
|
|
52
52
|
interface DatePickerDockedProps {
|
|
53
53
|
className?: string;
|
|
54
|
+
error?: boolean; // error state on the field
|
|
55
|
+
errorText?: ReactNode; // error message below the field
|
|
54
56
|
labels?: DatePickerDockedLabels; // { field, openCalendar, previousMonth, nextMonth, selectYear }
|
|
55
57
|
locale?: string;
|
|
56
58
|
max?: Date | null;
|
|
57
59
|
min?: Date | null;
|
|
58
60
|
onChange?: (date: Date | null) => void;
|
|
61
|
+
supportingText?: ReactNode; // helper text below the field
|
|
59
62
|
value?: Date | null;
|
|
60
63
|
weekStartsOn?: number;
|
|
61
64
|
}
|
|
@@ -89,8 +92,13 @@ const [date, setDate] = useState<Date | null>(null);
|
|
|
89
92
|
value={date}
|
|
90
93
|
/>;
|
|
91
94
|
|
|
92
|
-
// Docked
|
|
93
|
-
<DatePicker.Docked
|
|
95
|
+
// Docked, with validation
|
|
96
|
+
<DatePicker.Docked
|
|
97
|
+
value={date}
|
|
98
|
+
onChange={setDate}
|
|
99
|
+
error={submitted && !date}
|
|
100
|
+
errorText="Pick a date"
|
|
101
|
+
/>;
|
|
94
102
|
```
|
|
95
103
|
|
|
96
104
|
## Gotchas
|
|
@@ -103,6 +111,10 @@ const [date, setDate] = useState<Date | null>(null);
|
|
|
103
111
|
is in `labels`, e.g. `labels={{cancel: "Cancelar", confirm: "Aceptar"}}`;
|
|
104
112
|
unset keys keep the English defaults.
|
|
105
113
|
- `min`/`max` disable out-of-range days.
|
|
114
|
+
- `error` / `errorText` / `supportingText` recolor and annotate the **docked**
|
|
115
|
+
field with the MD3 error role (`aria-invalid`, `role="alert"`,
|
|
116
|
+
`aria-describedby`). The modal pickers render no form field of their own, so
|
|
117
|
+
they have no error state.
|
|
106
118
|
|
|
107
119
|
## Accepted gaps (criterion)
|
|
108
120
|
|
|
@@ -62,6 +62,10 @@ interface DropdownItemProps {
|
|
|
62
62
|
|
|
63
63
|
## Gotchas
|
|
64
64
|
|
|
65
|
+
- The menu renders in a portal on `document.body` with fixed positioning, so
|
|
66
|
+
it escapes `overflow` ancestors (e.g. a `Table` body) and auto-flips above
|
|
67
|
+
the trigger when there isn't room below; it tracks the trigger on
|
|
68
|
+
scroll/resize.
|
|
65
69
|
- The whole wrapper toggles on click, so clicking an item also closes the
|
|
66
70
|
menu (select-like behavior).
|
|
67
71
|
- The menu is content-width, clamped to the M3 spec's 112–280dp range
|
|
@@ -41,3 +41,6 @@ interface SectionProps {
|
|
|
41
41
|
|
|
42
42
|
- The dot grid uses `--md-sys-color-outline-variant`, so it adapts to the
|
|
43
43
|
active theme.
|
|
44
|
+
- Overlay stacking follows the documented `--md-sys-z-*` scale (see
|
|
45
|
+
FOUNDATIONS.md → Stacking & z-index). Override a token to slot your own
|
|
46
|
+
chrome between layers (e.g. a sticky header below menus).
|
package/docs/components/Menu.md
CHANGED
|
@@ -145,5 +145,9 @@ Grouped with a gap (separate surfaces):
|
|
|
145
145
|
|
|
146
146
|
- Anchorless: wrap it in a positioned element and control mount/unmount
|
|
147
147
|
(e.g. via `useDismissable`) yourself, or use `Dropdown` which does this.
|
|
148
|
+
The built-in anchored menus (`Dropdown`, `OverflowMenu`, `SplitButton`) and
|
|
149
|
+
`Menu.Sub` all render in a portal on `document.body`, placed by the shared
|
|
150
|
+
internal `usePopoverPosition` helper (fixed positioning with viewport
|
|
151
|
+
flip/shift), so they escape `overflow` ancestors.
|
|
148
152
|
- `selected` is visual; for single-selection semantics in a picker, the
|
|
149
153
|
consumer still owns the selected value.
|
|
@@ -103,3 +103,6 @@ const [expanded, setExpanded] = useState(false);
|
|
|
103
103
|
- Per spec: 3–7 destinations, vertical rails sit opposite the content
|
|
104
104
|
edge with ≥24dp margins on large screens, and the rail stays fixed
|
|
105
105
|
while content scrolls vertically.
|
|
106
|
+
- The destinations area scrolls only when the items genuinely overflow the
|
|
107
|
+
rail height; the header and bottom slot keep their natural size, so a few
|
|
108
|
+
destinations never show a scrollbar even when the rail is short.
|
|
@@ -61,5 +61,9 @@ interface OverflowMenuItemProps {
|
|
|
61
61
|
|
|
62
62
|
## Gotchas
|
|
63
63
|
|
|
64
|
-
- Position flags are booleans
|
|
64
|
+
- Position flags are booleans expressing a **preferred** placement; with none
|
|
65
|
+
set it falls back to bottomRight. The menu renders in a portal on
|
|
66
|
+
`document.body` (fixed-positioned), so it escapes `overflow` ancestors, and
|
|
67
|
+
flips to the opposite side / shifts to stay in the viewport when the
|
|
68
|
+
preferred placement doesn't fit; it tracks the trigger on scroll/resize.
|
|
65
69
|
- Closes on outside click, item click and Escape.
|
|
@@ -34,13 +34,16 @@ interface SearchInputProps extends Omit<
|
|
|
34
34
|
"placeholder" | "size"
|
|
35
35
|
> {
|
|
36
36
|
className?: string;
|
|
37
|
+
clearable?: boolean; // trailing clear (×) button when there's a value
|
|
37
38
|
inputClassName?: string;
|
|
38
39
|
labels?: SearchInputLabels; // accessible names
|
|
39
40
|
leftElement?: ReactNode; // 56px slot (search icon / back)
|
|
40
|
-
|
|
41
|
+
onClear?: () => void; // called after the clear button empties the input
|
|
42
|
+
rightElement?: ReactNode; // 56px slot (avatar / mic) — wins over clear
|
|
41
43
|
}
|
|
42
44
|
|
|
43
45
|
interface SearchInputLabels {
|
|
46
|
+
clear?: string; // clear-button aria-label (default "Clear")
|
|
44
47
|
placeholder?: string; // input placeholder (default "Search")
|
|
45
48
|
}
|
|
46
49
|
|
|
@@ -74,6 +77,7 @@ interface SearchItemProps {
|
|
|
74
77
|
</>
|
|
75
78
|
}>
|
|
76
79
|
<SearchInput
|
|
80
|
+
clearable
|
|
77
81
|
labels={{placeholder: "Search"}}
|
|
78
82
|
leftElement={<MaterialSymbol name="search" />}
|
|
79
83
|
onChange={onQuery}
|
|
@@ -86,6 +90,10 @@ interface SearchItemProps {
|
|
|
86
90
|
- `SearchInput` is transparent — the `Search` wrapper owns the container
|
|
87
91
|
color/shape. Standalone bars: wrap in `Search` without `result`.
|
|
88
92
|
- Search bars don't float labels (M3); the placeholder stays visible.
|
|
93
|
+
- `clearable` renders a trailing clear (×) button while the input has a value
|
|
94
|
+
(controlled or uncontrolled; clearing refocuses the input and fires
|
|
95
|
+
`onClear`). It hides the inconsistent native `type=search` clear, and a
|
|
96
|
+
`rightElement` takes precedence over it.
|
|
89
97
|
- The suggestions card opens with the menu choreography (500ms emphasized
|
|
90
98
|
clip reveal with staggered items, 150ms accelerate exit). In the default
|
|
91
99
|
**contained** style the bar keeps its 28px pill shape and the card floats
|
|
@@ -40,7 +40,9 @@ interface SplitButtonLabels {
|
|
|
40
40
|
The menu is the shared M3E vertical [`Menu`](Menu.md) (corner-large surface,
|
|
41
41
|
`surface-container-low`, elevation 3) anchored to the trailing button's
|
|
42
42
|
bottom-right; focus returns to that button when it closes. `SplitButton.Item`
|
|
43
|
-
is the shared `Menu.Item` (same as `OverflowMenu.Item`).
|
|
43
|
+
is the shared `Menu.Item` (same as `OverflowMenu.Item`). The menu renders in a
|
|
44
|
+
portal on `document.body` (fixed-positioned), so it escapes `overflow`
|
|
45
|
+
ancestors and auto-flips above the button when there's no room below.
|
|
44
46
|
|
|
45
47
|
## Sizes
|
|
46
48
|
|
|
@@ -14,12 +14,16 @@ import {TextElement} from "react-material-expressive";
|
|
|
14
14
|
|
|
15
15
|
```ts
|
|
16
16
|
interface TextElementProps {
|
|
17
|
+
as?: ElementType; // wrapper element (multi-slot only); default "div"
|
|
17
18
|
body?: ReactNode;
|
|
19
|
+
bodyAs?: ElementType; // body element; default "p"
|
|
18
20
|
bodyStyle?: string; // class override
|
|
19
21
|
className?: string;
|
|
20
22
|
label?: ReactNode;
|
|
23
|
+
labelAs?: ElementType; // label element; default "p"
|
|
21
24
|
labelStyle?: string;
|
|
22
25
|
title?: ReactNode;
|
|
26
|
+
titleAs?: ElementType; // title element; default "h2"
|
|
23
27
|
titleStyle?: string;
|
|
24
28
|
}
|
|
25
29
|
```
|
|
@@ -29,9 +33,20 @@ interface TextElementProps {
|
|
|
29
33
|
```tsx
|
|
30
34
|
<TextElement label="OVERLINE" title="Headline" body="Supporting copy" />
|
|
31
35
|
<TextElement title="Bigger" titleStyle="text-headline-small" />
|
|
36
|
+
|
|
37
|
+
// A lone title as a page heading — renders a bare <h1>, no wrapper div:
|
|
38
|
+
<TextElement title="Page title" titleAs="h1" />
|
|
32
39
|
```
|
|
33
40
|
|
|
34
41
|
## Gotchas
|
|
35
42
|
|
|
36
43
|
- Each slot renders only when provided; `*Style` props are class strings
|
|
37
44
|
merged with `cn`.
|
|
45
|
+
- **Element is polymorphic**: `labelAs`/`titleAs`/`bodyAs` (default p/h2/p) set
|
|
46
|
+
the rendered tag while keeping the M3 typography. Choose the title's level by
|
|
47
|
+
content hierarchy, not visual size (M3 a11y: don't force `<h2>` where the
|
|
48
|
+
outline needs `<h1>`/`<h3>`/a non-heading).
|
|
49
|
+
- **Single slot = no wrapper**: with exactly one slot the text element renders
|
|
50
|
+
directly (e.g. a bare `<h2>`) and `className` applies to it. With two or more
|
|
51
|
+
slots they stack in the `as` wrapper (default `<div>`), which takes
|
|
52
|
+
`className`.
|
package/llms.txt
CHANGED
|
@@ -6,85 +6,90 @@
|
|
|
6
6
|
> React >= 19 (ESM + CJS + types, "use client" embedded). Single root
|
|
7
7
|
> export (react-material-expressive) plus the precompiled ./styles.css
|
|
8
8
|
> and the raw ./theme.css Tailwind partial (only to extend with your own
|
|
9
|
-
> Tailwind v4).
|
|
9
|
+
> Tailwind v4). Links below are relative to this file (the package bundles
|
|
10
|
+
> `docs/` alongside it).
|
|
10
11
|
|
|
11
12
|
## Start here
|
|
12
13
|
|
|
13
|
-
- [README](README.md)
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
- [
|
|
17
|
-
|
|
14
|
+
- [README](README.md) — install, quickstart, theming, icons, media/link
|
|
15
|
+
injection, i18n (per-component `labels` prop, English defaults only;
|
|
16
|
+
`locale` for Intl formatting), exports.
|
|
17
|
+
- [FOUNDATIONS](FOUNDATIONS.md) — authoritative M3 sources and the
|
|
18
|
+
cross-cutting foundations: tokens, state layers, motion, elevation, the type
|
|
19
|
+
scale, and the documented `--md-sys-z-*` overlay stacking scale.
|
|
20
|
+
- [CHANGELOG](CHANGELOG.md) — per-release history; each breaking change carries
|
|
21
|
+
a migration note (SemVer: breaking → major, additive → minor, fix → patch).
|
|
18
22
|
|
|
19
23
|
## Component docs (API, props, variants, examples, gotchas)
|
|
20
24
|
|
|
21
25
|
### Actions
|
|
22
|
-
- [Button](docs/components/Button.md)
|
|
23
|
-
- [ButtonGroup](docs/components/ButtonGroup.md)
|
|
24
|
-
- [ButtonGroupConnected](docs/components/ButtonGroupConnected.md)
|
|
25
|
-
- [IconButton](docs/components/IconButton.md)
|
|
26
|
-
- [FAB and ExtendedFAB](docs/components/FAB.md)
|
|
27
|
-
- [FABMenu](docs/components/FABMenu.md)
|
|
28
|
-
- [SplitButton](docs/components/SplitButton.md)
|
|
26
|
+
- [Button](docs/components/Button.md) — M3 Expressive button; sizes xs–xl, variants, optional toggle.
|
|
27
|
+
- [ButtonGroup](docs/components/ButtonGroup.md) — invisible container that spaces a row of buttons.
|
|
28
|
+
- [ButtonGroupConnected](docs/components/ButtonGroupConnected.md) — buttons joined by 2dp gaps, with toggle selection.
|
|
29
|
+
- [IconButton](docs/components/IconButton.md) — 40×40 icon button (48×48 touch target), variants + toggle.
|
|
30
|
+
- [FAB and ExtendedFAB](docs/components/FAB.md) — floating action buttons (56/80/96) and the extended FAB.
|
|
31
|
+
- [FABMenu](docs/components/FABMenu.md) — a FAB that morphs into a vertical menu of labeled actions.
|
|
32
|
+
- [SplitButton](docs/components/SplitButton.md) — leading action + trailing menu button; the menu portals to escape `overflow`.
|
|
29
33
|
|
|
30
34
|
### Communication
|
|
31
|
-
- [Badge, DotBadge, OnIconBadge](docs/components/Badge.md)
|
|
32
|
-
- [Progress and Circle](docs/components/Progress.md)
|
|
33
|
-
- [LoadingIndicator](docs/components/LoadingIndicator.md)
|
|
34
|
-
- [Snackbar and SnackbarWrapper](docs/components/Snackbar.md)
|
|
35
|
-
- [Tooltip](docs/components/Tooltip.md)
|
|
36
|
-
- [Loading](docs/components/Loading.md)
|
|
35
|
+
- [Badge, DotBadge, OnIconBadge](docs/components/Badge.md) — count, dot and on-icon badges on the error container.
|
|
36
|
+
- [Progress and Circle](docs/components/Progress.md) — linear and circular progress indicators (optional `wavy`).
|
|
37
|
+
- [LoadingIndicator](docs/components/LoadingIndicator.md) — expressive 38dp shape-morphing loading indicator.
|
|
38
|
+
- [Snackbar and SnackbarWrapper](docs/components/Snackbar.md) — snackbar (inverse-surface) + its portaled stacking wrapper.
|
|
39
|
+
- [Tooltip](docs/components/Tooltip.md) — plain/rich tooltips on hover/focus, dismissed on Escape.
|
|
40
|
+
- [Loading](docs/components/Loading.md) — icon-sized indeterminate spinner using `currentColor`.
|
|
37
41
|
|
|
38
42
|
### Containment
|
|
39
|
-
- [Card (+Header/Body/Footer)](docs/components/Card.md)
|
|
40
|
-
- [Dialog (+Header/Body/Footer)](docs/components/Dialog.md)
|
|
41
|
-
- [BottomSheet and SideSheet](docs/components/Sheets.md)
|
|
42
|
-
- [Divider](docs/components/Divider.md)
|
|
43
|
-
- [List (+List.Item)](docs/components/List.md)
|
|
44
|
-
- [Table (+Head/Body/Row/Cell/HeaderCell/TextContainer)](docs/components/Table.md)
|
|
43
|
+
- [Card (+Header/Body/Footer)](docs/components/Card.md) — card (shape medium) with composable sub-parts.
|
|
44
|
+
- [Dialog (+Header/Body/Footer)](docs/components/Dialog.md) — focus-trapped modal dialog with sub-parts.
|
|
45
|
+
- [BottomSheet and SideSheet](docs/components/Sheets.md) — modal sheets over a 32% scrim.
|
|
46
|
+
- [Divider](docs/components/Divider.md) — 1px `outline-variant` rule.
|
|
47
|
+
- [List (+List.Item)](docs/components/List.md) — expressive (tiles) or plain list.
|
|
48
|
+
- [Table (+Head/Body/Row/Cell/HeaderCell/TextContainer)](docs/components/Table.md) — data table with horizontal scroll and composable parts.
|
|
45
49
|
|
|
46
50
|
### Selection and input
|
|
47
|
-
- [Checkbox](docs/components/Checkbox.md)
|
|
48
|
-
- [Radio](docs/components/Radio.md)
|
|
49
|
-
- [Switch](docs/components/Switch.md)
|
|
50
|
-
- [Chips](docs/components/Chips.md)
|
|
51
|
-
- [Slider and SliderDual](docs/components/Slider.md)
|
|
52
|
-
- [TextField (InputOutlined/InputFilled/TextFieldOutlined/TextFieldFilled)](docs/components/TextField.md)
|
|
53
|
-
- [Select (SelectFilled/SelectOutlined)](docs/components/Select.md)
|
|
54
|
-
- [
|
|
55
|
-
- [
|
|
56
|
-
- [
|
|
51
|
+
- [Checkbox](docs/components/Checkbox.md) — custom-rendered checkbox over a native input.
|
|
52
|
+
- [Radio](docs/components/Radio.md) — custom-rendered radio over a native input.
|
|
53
|
+
- [Switch](docs/components/Switch.md) — M3 switch (52×32) over a native input.
|
|
54
|
+
- [Chips](docs/components/Chips.md) — chip (height 32) with an optional remove affordance.
|
|
55
|
+
- [Slider and SliderDual](docs/components/Slider.md) — single and dual-thumb sliders, arrow-key operable.
|
|
56
|
+
- [TextField (InputOutlined/InputFilled/TextFieldOutlined/TextFieldFilled)](docs/components/TextField.md) — outlined/filled fields and textareas with error + supporting text.
|
|
57
|
+
- [Select (SelectFilled/SelectOutlined)](docs/components/Select.md) — outlined/filled select over a listbox, with typeahead.
|
|
58
|
+
- [Combobox (ComboboxFilled/ComboboxOutlined)](docs/components/Combobox.md) — ARIA combobox with consumer-controlled async options, loading and clearable.
|
|
59
|
+
- [Amount](docs/components/Amount.md) — quantity stepper pill (minus / value / plus).
|
|
60
|
+
- [DatePicker (+Docked) and DateRangePicker](docs/components/DatePicker.md) — modal + docked date pickers and a range picker; the docked field takes error state.
|
|
61
|
+
- [TimePicker (dial + input)](docs/components/TimePicker.md) — modal time picker: clock dial + keyboard input.
|
|
57
62
|
|
|
58
63
|
### Navigation
|
|
59
|
-
- [NavigationBar (+Item)](docs/components/NavigationBar.md)
|
|
60
|
-
- [NavigationRail (+Item)](docs/components/NavigationRail.md)
|
|
61
|
-
- [TopAppBar (Small/Center/Medium/Large)](docs/components/TopAppBar.md)
|
|
62
|
-
- [DockedToolbar and FloatingToolbar](docs/components/Toolbar.md)
|
|
63
|
-
- [TabsPrimary and TabsSecondary](docs/components/Tabs.md)
|
|
64
|
-
- [LinkBox and LinkContainer](docs/components/Link.md)
|
|
65
|
-
- [Search (+Input/Item)](docs/components/Search.md)
|
|
64
|
+
- [NavigationBar (+Item)](docs/components/NavigationBar.md) — flexible bottom navigation bar.
|
|
65
|
+
- [NavigationRail (+Item)](docs/components/NavigationRail.md) — navigation rail (collapsed/expanded, optional modal); items scroll only on overflow.
|
|
66
|
+
- [TopAppBar (Small/Center/Medium/Large)](docs/components/TopAppBar.md) — top app bar variants as sub-parts.
|
|
67
|
+
- [DockedToolbar and FloatingToolbar](docs/components/Toolbar.md) — docked and floating expressive toolbars.
|
|
68
|
+
- [TabsPrimary and TabsSecondary](docs/components/Tabs.md) — primary and secondary tabs, arrow-key operable.
|
|
69
|
+
- [LinkBox and LinkContainer](docs/components/Link.md) — router-agnostic native `<a>` link helpers.
|
|
70
|
+
- [Search (+Input/Item)](docs/components/Search.md) — search bar + docked results; `SearchInput` supports `clearable`.
|
|
66
71
|
|
|
67
72
|
### Menus
|
|
68
|
-
- [Menu (+Item
|
|
69
|
-
- [Dropdown (+Item)](docs/components/Dropdown.md)
|
|
70
|
-
- [OverflowMenu (+Item)](docs/components/OverflowMenu.md)
|
|
71
|
-
- [ToggleTheme and ToggleThemeMenu](docs/components/ToggleTheme.md)
|
|
73
|
+
- [Menu (+Item/Group/Sub/Label/Divider)](docs/components/Menu.md) — shared M3E vertical-menu primitive; the host positions it.
|
|
74
|
+
- [Dropdown (+Item)](docs/components/Dropdown.md) — trigger + portaled Menu opening below the trigger.
|
|
75
|
+
- [OverflowMenu (+Item)](docs/components/OverflowMenu.md) — corner-anchored portaled menu.
|
|
76
|
+
- [ToggleTheme and ToggleThemeMenu](docs/components/ToggleTheme.md) — prebuilt light/dark theme controls.
|
|
72
77
|
|
|
73
78
|
### Media and showcase
|
|
74
|
-
- [Avatar](docs/components/Avatar.md)
|
|
75
|
-
- [AvatarStack](docs/components/AvatarStack.md)
|
|
76
|
-
- [Img](docs/components/Img.md)
|
|
77
|
-
- [MediaFrame](docs/components/MediaFrame.md)
|
|
78
|
-
- [Gallery (+Row)](docs/components/Gallery.md)
|
|
79
|
-
- [Stories (+User/Business)](docs/components/Stories.md)
|
|
80
|
-
- [Video](docs/components/Video.md)
|
|
81
|
-
- [PerspectiveImage and PerspectiveCard](docs/components/Perspective.md)
|
|
82
|
-
- [Blob](docs/components/Blob.md)
|
|
79
|
+
- [Avatar](docs/components/Avatar.md) — avatar with initials/placeholder fallback and badges.
|
|
80
|
+
- [AvatarStack](docs/components/AvatarStack.md) — overlapping avatar row with a hover raise.
|
|
81
|
+
- [Img](docs/components/Img.md) — native `<img>` in a MediaFrame (object-fit, hide-on-error).
|
|
82
|
+
- [MediaFrame](docs/components/MediaFrame.md) — presentational media frame (size/aspect/radius) with media injection.
|
|
83
|
+
- [Gallery (+Row)](docs/components/Gallery.md) — stacked media gallery composed with `Gallery.Row`.
|
|
84
|
+
- [Stories (+User/Business)](docs/components/Stories.md) — horizontal story strip with User/Business items.
|
|
85
|
+
- [Video](docs/components/Video.md) — native looping ambient/media video.
|
|
86
|
+
- [PerspectiveImage and PerspectiveCard](docs/components/Perspective.md) — 3D cursor-tilt showcases.
|
|
87
|
+
- [Blob](docs/components/Blob.md) — decorative blurred, morphing blob.
|
|
83
88
|
|
|
84
89
|
### Text and icons
|
|
85
|
-
- [TextElement](docs/components/TextElement.md)
|
|
86
|
-
- [Icon](docs/components/Icon.md)
|
|
87
|
-
- [MaterialSymbol](docs/components/MaterialSymbol.md)
|
|
90
|
+
- [TextElement](docs/components/TextElement.md) — polymorphic label/title/body text stack (`as`/`titleAs`/`labelAs`/`bodyAs`).
|
|
91
|
+
- [Icon](docs/components/Icon.md) — icon slot helper (fixed square box).
|
|
92
|
+
- [MaterialSymbol](docs/components/MaterialSymbol.md) — zero-dependency Material Symbols glyph.
|
|
88
93
|
|
|
89
94
|
### Layout
|
|
90
|
-
- [Layers: Container and Section](docs/components/Layers.md)
|
|
95
|
+
- [Layers: Container and Section](docs/components/Layers.md) — `Container` (dotted showcase panel) and `Section` (responsive band).
|
package/package.json
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-material-expressive",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Material 3 Expressive React component library. Framework-agnostic, precompiled CSS, official M3 design tokens.",
|
|
5
5
|
"author": "Ger Silva",
|
|
6
6
|
"homepage": "https://github.com/gersilva96/react-material-expressive#readme",
|
|
7
|
+
"llmsTxt": "./llms.txt",
|
|
7
8
|
"repository": {
|
|
8
9
|
"type": "git",
|
|
9
10
|
"url": "git+https://github.com/gersilva96/react-material-expressive.git"
|
|
@@ -46,6 +47,7 @@
|
|
|
46
47
|
},
|
|
47
48
|
"./styles.css": "./dist/styles.css",
|
|
48
49
|
"./theme.css": "./dist/theme.css",
|
|
50
|
+
"./llms.txt": "./llms.txt",
|
|
49
51
|
"./package.json": "./package.json"
|
|
50
52
|
},
|
|
51
53
|
"scripts": {
|
|
@@ -96,6 +98,7 @@
|
|
|
96
98
|
"vitest": "4.1.9"
|
|
97
99
|
},
|
|
98
100
|
"publishConfig": {
|
|
99
|
-
"access": "public"
|
|
101
|
+
"access": "public",
|
|
102
|
+
"provenance": true
|
|
100
103
|
}
|
|
101
104
|
}
|