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.
@@ -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 value={date} onChange={setDate} />;
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).
@@ -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; with none set it falls back to bottomRight.
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
- rightElement?: ReactNode; // 56px slot (avatar / mic)
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): install, quickstart,
14
- theming, icons, media/link injection, i18n (per-component `labels` prop,
15
- English defaults only; `locale` for Intl formatting), subpath map.
16
- - [CHANGELOG](CHANGELOG.md): per-release history with a migration note on
17
- every breaking change (pre-1.0: breaking bumps the minor version).
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
- - [Amount](docs/components/Amount.md)
55
- - [DatePicker (+Docked) and DateRangePicker](docs/components/DatePicker.md)
56
- - [TimePicker (dial + input)](docs/components/TimePicker.md)
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/+Group/+Sub/+Label/+Divider)](docs/components/Menu.md) — shared M3E vertical-menu primitive
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.0.0",
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
  }