@bug-on/m3-expressive 1.3.0 → 1.3.2
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 +15 -0
- package/README.md +88 -60
- package/dist/buttons.d.mts +3 -3
- package/dist/buttons.d.ts +3 -3
- package/dist/buttons.js +185 -40
- package/dist/buttons.js.map +1 -1
- package/dist/buttons.mjs +186 -41
- package/dist/buttons.mjs.map +1 -1
- package/dist/{core-CAU8g2HY.d.mts → core-D8FdHY6I.d.mts} +1 -1
- package/dist/{core-DRrLnsnJ.d.ts → core-DyEy8H9Z.d.ts} +1 -1
- package/dist/core.d.mts +2 -2
- package/dist/core.d.ts +2 -2
- package/dist/core.js +156 -25
- package/dist/core.js.map +1 -1
- package/dist/core.mjs +157 -26
- package/dist/core.mjs.map +1 -1
- package/dist/feedback.d.mts +20 -0
- package/dist/feedback.d.ts +20 -0
- package/dist/feedback.js +157 -26
- package/dist/feedback.js.map +1 -1
- package/dist/feedback.mjs +158 -27
- package/dist/feedback.mjs.map +1 -1
- package/dist/forms.d.mts +4 -2
- package/dist/forms.d.ts +4 -2
- package/dist/forms.js +5065 -2980
- package/dist/forms.js.map +1 -1
- package/dist/forms.mjs +5064 -2982
- package/dist/forms.mjs.map +1 -1
- package/dist/{icon-button-USJo7AqO.d.mts → icon-button-CxyJv7UV.d.mts} +1 -1
- package/dist/{icon-button-CqdQBsRe.d.ts → icon-button-Di8VX6ou.d.ts} +1 -1
- package/dist/index.d.mts +12 -82
- package/dist/index.d.ts +12 -82
- package/dist/index.js +2875 -1226
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2723 -1086
- package/dist/index.mjs.map +1 -1
- package/dist/layout.d.mts +481 -33
- package/dist/layout.d.ts +481 -33
- package/dist/layout.js +1653 -243
- package/dist/layout.js.map +1 -1
- package/dist/layout.mjs +1626 -232
- package/dist/layout.mjs.map +1 -1
- package/dist/{md3-D0_Z7IXj.d.mts → md3-BQhRygSi.d.mts} +1 -1
- package/dist/{md3-D0_Z7IXj.d.ts → md3-BQhRygSi.d.ts} +1 -1
- package/dist/menu-types-rZNQFO7Y.d.mts +315 -0
- package/dist/menu-types-rZNQFO7Y.d.ts +315 -0
- package/dist/navigation.d.mts +5 -289
- package/dist/navigation.d.ts +5 -289
- package/dist/navigation.js +575 -271
- package/dist/navigation.js.map +1 -1
- package/dist/navigation.mjs +568 -265
- package/dist/navigation.mjs.map +1 -1
- package/dist/overlays.d.mts +2 -2
- package/dist/overlays.d.ts +2 -2
- package/dist/overlays.js +156 -25
- package/dist/overlays.js.map +1 -1
- package/dist/overlays.mjs +157 -26
- package/dist/overlays.mjs.map +1 -1
- package/dist/pickers.js +156 -25
- package/dist/pickers.js.map +1 -1
- package/dist/pickers.mjs +157 -26
- package/dist/pickers.mjs.map +1 -1
- package/dist/{side-sheet-modal-Dgjt739k.d.mts → side-sheet-modal-64FGhDxL.d.mts} +1 -1
- package/dist/{side-sheet-modal-DdEZR6Vl.d.ts → side-sheet-modal-Bd5Qqvp9.d.ts} +1 -1
- package/dist/{split-button-trailing-uncheckable-26qlZvKT.d.mts → split-button-trailing-uncheckable-CGzk7KcG.d.ts} +3 -1
- package/dist/{split-button-trailing-uncheckable-CXUVrH64.d.ts → split-button-trailing-uncheckable-gAz6OAIi.d.mts} +3 -1
- package/dist/{text-field-DWC7qOvp.d.ts → text-field-4OlT9o8s.d.mts} +206 -55
- package/dist/{text-field-DWC7qOvp.d.mts → text-field-DARNdj14.d.ts} +206 -55
- package/package.json +3 -3
|
@@ -549,4 +549,4 @@ interface SideSheetModalProps extends BaseSheetProps {
|
|
|
549
549
|
*/
|
|
550
550
|
declare const SideSheetModal: React$1.ForwardRefExoticComponent<SideSheetModalProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
551
551
|
|
|
552
|
-
export { type DrawerContentProps as A, type BaseSheetProps as B, DrawerDescription as C, Dialog as D, DrawerFooter as E, DrawerHeader as F, DrawerOverlay as G, DrawerPortal as H, type DrawerProps as I, DrawerTitle as J, DrawerTrigger as K,
|
|
552
|
+
export { type DrawerContentProps as A, type BaseSheetProps as B, DrawerDescription as C, Dialog as D, DrawerFooter as E, DrawerHeader as F, DrawerOverlay as G, DrawerPortal as H, type DrawerProps as I, DrawerTitle as J, DrawerTrigger as K, type ScrimProps as L, type SheetEdge as M, type SheetState as N, SideSheet as O, SideSheetModal as P, type SideSheetModalProps as Q, type SideSheetProps as R, Scrim as S, type UseBottomSheetReturn as T, type UseBottomSheetOptions as U, useBottomSheet as V, type SheetValue as W, BottomSheet as a, type BottomSheetHandle as b, BottomSheetModal as c, type BottomSheetModalProps as d, type BottomSheetProps as e, type BottomSheetSnapPoint as f, DialogBody as g, DialogClose as h, DialogContent as i, type DialogContentProps as j, DialogDescription as k, DialogFooter as l, DialogFullScreenContent as m, type DialogFullScreenContentProps as n, DialogHeader as o, DialogIcon as p, DialogOverlay as q, DialogPortal as r, type DialogProps as s, DialogTitle as t, DialogTrigger as u, DragHandle as v, type DragHandleProps as w, Drawer as x, DrawerClose as y, DrawerContent as z };
|
|
@@ -549,4 +549,4 @@ interface SideSheetModalProps extends BaseSheetProps {
|
|
|
549
549
|
*/
|
|
550
550
|
declare const SideSheetModal: React$1.ForwardRefExoticComponent<SideSheetModalProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
551
551
|
|
|
552
|
-
export { type DrawerContentProps as A, type BaseSheetProps as B, DrawerDescription as C, Dialog as D, DrawerFooter as E, DrawerHeader as F, DrawerOverlay as G, DrawerPortal as H, type DrawerProps as I, DrawerTitle as J, DrawerTrigger as K,
|
|
552
|
+
export { type DrawerContentProps as A, type BaseSheetProps as B, DrawerDescription as C, Dialog as D, DrawerFooter as E, DrawerHeader as F, DrawerOverlay as G, DrawerPortal as H, type DrawerProps as I, DrawerTitle as J, DrawerTrigger as K, type ScrimProps as L, type SheetEdge as M, type SheetState as N, SideSheet as O, SideSheetModal as P, type SideSheetModalProps as Q, type SideSheetProps as R, Scrim as S, type UseBottomSheetReturn as T, type UseBottomSheetOptions as U, useBottomSheet as V, type SheetValue as W, BottomSheet as a, type BottomSheetHandle as b, BottomSheetModal as c, type BottomSheetModalProps as d, type BottomSheetProps as e, type BottomSheetSnapPoint as f, DialogBody as g, DialogClose as h, DialogContent as i, type DialogContentProps as j, DialogDescription as k, DialogFooter as l, DialogFullScreenContent as m, type DialogFullScreenContentProps as n, DialogHeader as o, DialogIcon as p, DialogOverlay as q, DialogPortal as r, type DialogProps as s, DialogTitle as t, DialogTrigger as u, DragHandle as v, type DragHandleProps as w, Drawer as x, DrawerClose as y, DrawerContent as z };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { HTMLMotionProps } from 'motion/react';
|
|
2
|
-
import {
|
|
2
|
+
import { M as MD3ColorStyle, b as MD3Size, a as MD3Shape } from './md3-BQhRygSi.js';
|
|
3
3
|
import * as React$1 from 'react';
|
|
4
4
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
5
5
|
|
|
@@ -801,6 +801,8 @@ interface SplitButtonTrailingProps extends Omit<MotionButtonProps, "onChange" |
|
|
|
801
801
|
"aria-label": string;
|
|
802
802
|
/** ID of controlled menu element */
|
|
803
803
|
"aria-controls"?: string;
|
|
804
|
+
/** Indicates the availability and type of interactive popup element (default: "menu") */
|
|
805
|
+
"aria-haspopup"?: boolean | "menu" | "listbox" | "tree" | "grid" | "dialog";
|
|
804
806
|
className?: string;
|
|
805
807
|
/**
|
|
806
808
|
* Change the component to the underlying child element and merge props/behavior.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { HTMLMotionProps } from 'motion/react';
|
|
2
|
-
import {
|
|
2
|
+
import { M as MD3ColorStyle, b as MD3Size, a as MD3Shape } from './md3-BQhRygSi.mjs';
|
|
3
3
|
import * as React$1 from 'react';
|
|
4
4
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
5
5
|
|
|
@@ -801,6 +801,8 @@ interface SplitButtonTrailingProps extends Omit<MotionButtonProps, "onChange" |
|
|
|
801
801
|
"aria-label": string;
|
|
802
802
|
/** ID of controlled menu element */
|
|
803
803
|
"aria-controls"?: string;
|
|
804
|
+
/** Indicates the availability and type of interactive popup element (default: "menu") */
|
|
805
|
+
"aria-haspopup"?: boolean | "menu" | "listbox" | "tree" | "grid" | "dialog";
|
|
804
806
|
className?: string;
|
|
805
807
|
/**
|
|
806
808
|
* Change the component to the underlying child element and merge props/behavior.
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
2
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
3
3
|
import { VariantProps } from 'class-variance-authority';
|
|
4
|
+
import { M as MenuColorVariant, l as MenuVariant, p as VerticalMenuSeparatorStyle } from './menu-types-rZNQFO7Y.mjs';
|
|
5
|
+
import { b as MD3Size } from './md3-BQhRygSi.mjs';
|
|
4
6
|
|
|
5
7
|
/**
|
|
6
8
|
* @file checkbox.tsx
|
|
@@ -48,7 +50,7 @@ interface CheckboxProps {
|
|
|
48
50
|
/** Extra class names on the outermost wrapper. */
|
|
49
51
|
className?: string;
|
|
50
52
|
/** Ref pointing to the hidden `<input type="checkbox">`. */
|
|
51
|
-
ref?: React.Ref<HTMLInputElement>;
|
|
53
|
+
ref?: React$1.Ref<HTMLInputElement>;
|
|
52
54
|
}
|
|
53
55
|
/**
|
|
54
56
|
* `TriStateCheckbox` props — requires `state` + `onStateChange`.
|
|
@@ -71,7 +73,7 @@ interface TriStateCheckboxProps extends Omit<CheckboxProps, "checked" | "default
|
|
|
71
73
|
* ```
|
|
72
74
|
* @see https://m3.material.io/components/checkbox/overview
|
|
73
75
|
*/
|
|
74
|
-
declare const Checkbox: React.NamedExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
|
76
|
+
declare const Checkbox: React$1.NamedExoticComponent<Omit<CheckboxProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
|
|
75
77
|
/**
|
|
76
78
|
* MD3 Expressive Tri-State Checkbox.
|
|
77
79
|
*
|
|
@@ -83,12 +85,12 @@ declare const Checkbox: React.NamedExoticComponent<Omit<CheckboxProps, "ref"> &
|
|
|
83
85
|
* <TriStateCheckbox state={parentState} onStateChange={setParentState} label="Select all" />
|
|
84
86
|
* ```
|
|
85
87
|
*/
|
|
86
|
-
declare const TriStateCheckbox: React.NamedExoticComponent<Omit<TriStateCheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
|
88
|
+
declare const TriStateCheckbox: React$1.NamedExoticComponent<Omit<TriStateCheckboxProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
|
|
87
89
|
|
|
88
90
|
declare const chipVariants: (props?: ({
|
|
89
91
|
variant?: "input" | "filter" | "assist" | "suggestion" | null | undefined;
|
|
90
92
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
91
|
-
interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
|
|
93
|
+
interface ChipProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
|
|
92
94
|
/**
|
|
93
95
|
* Chip variant.
|
|
94
96
|
* - `assist` → Smart/automated actions. Flat by default, can be elevated.
|
|
@@ -106,15 +108,17 @@ interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
|
|
|
106
108
|
elevated?: boolean;
|
|
107
109
|
/**
|
|
108
110
|
* Toggle/selection state.
|
|
109
|
-
* - `filter`:
|
|
110
|
-
* - `input`:
|
|
111
|
-
*
|
|
111
|
+
* - `filter`: selected → bg `secondary-container`, animated checkmark appears.
|
|
112
|
+
* - `input`: selected → bg `secondary-container`.
|
|
113
|
+
* - `suggestion`: selected → bg `secondary-container`.
|
|
114
|
+
* Used for `role="checkbox"` (filter) / `aria-pressed` (input/suggestion).
|
|
112
115
|
*/
|
|
113
116
|
selected?: boolean;
|
|
114
117
|
/**
|
|
115
118
|
* Disables the chip. Applies:
|
|
116
119
|
* - `pointer-events-none` – no mouse/touch interaction
|
|
117
120
|
* - `opacity-[0.38]` – DisabledLabelTextOpacity (0.38) per MD3 tokens
|
|
121
|
+
* - `text-m3-on-surface` – DisabledLabelTextColor per MD3 tokens
|
|
118
122
|
* - `aria-disabled="true"`
|
|
119
123
|
* - `tabIndex={-1}`
|
|
120
124
|
*/
|
|
@@ -122,36 +126,37 @@ interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
|
|
|
122
126
|
/**
|
|
123
127
|
* Visible label. Required. Can be a string or ReactNode.
|
|
124
128
|
*/
|
|
125
|
-
label: React.ReactNode;
|
|
129
|
+
label: React$1.ReactNode;
|
|
126
130
|
/**
|
|
127
131
|
* Optional leading icon element (18×18px recommended).
|
|
128
132
|
* For `filter` chips with `selected=true`, this is replaced by an animated checkmark.
|
|
129
133
|
* For `assist`/`suggestion`: icon color → `primary`
|
|
130
134
|
* For `input` (unselected): icon color → `on-surface-variant`
|
|
131
135
|
*/
|
|
132
|
-
leadingIcon?: React.ReactNode;
|
|
136
|
+
leadingIcon?: React$1.ReactNode;
|
|
133
137
|
/**
|
|
134
138
|
* Optional trailing icon element (18×18px recommended).
|
|
139
|
+
* Supported across all chip variants including `filter` (alongside checkmark).
|
|
135
140
|
* Color: `on-surface-variant` (unselected) / `on-secondary-container` (selected).
|
|
136
141
|
*/
|
|
137
|
-
trailingIcon?: React.ReactNode;
|
|
142
|
+
trailingIcon?: React$1.ReactNode;
|
|
138
143
|
/**
|
|
139
144
|
* Avatar element for `input` chips. Takes priority over `leadingIcon`.
|
|
140
145
|
* Rendered as a 24×24px circle (InputChipTokens: AvatarSize = 24.dp, AvatarShape = CornerFull).
|
|
141
146
|
*/
|
|
142
|
-
avatar?: React.ReactNode;
|
|
147
|
+
avatar?: React$1.ReactNode;
|
|
143
148
|
/**
|
|
144
149
|
* Callback when the trailing remove (×) button is activated on `input` chips.
|
|
145
150
|
* When provided, a dedicated tabbable close button with `aria-label="Remove {label}"` is rendered.
|
|
146
151
|
*/
|
|
147
|
-
onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
152
|
+
onRemove?: (e: React$1.MouseEvent<HTMLButtonElement>) => void;
|
|
148
153
|
/**
|
|
149
154
|
* Change the component to the underlying child element and merge props/behavior.
|
|
150
155
|
* Useful when wrapping in Next.js `<Link>` or custom anchor tags.
|
|
151
156
|
* @default false
|
|
152
157
|
*/
|
|
153
158
|
asChild?: boolean;
|
|
154
|
-
children?: React.ReactNode;
|
|
159
|
+
children?: React$1.ReactNode;
|
|
155
160
|
}
|
|
156
161
|
/**
|
|
157
162
|
* MD3 Expressive Chip — 4-variant interactive tag component.
|
|
@@ -176,7 +181,7 @@ interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
|
|
|
176
181
|
*
|
|
177
182
|
* @see https://m3.material.io/components/chips/overview
|
|
178
183
|
*/
|
|
179
|
-
declare const Chip: React.NamedExoticComponent<ChipProps & React.RefAttributes<HTMLButtonElement>>;
|
|
184
|
+
declare const Chip: React$1.NamedExoticComponent<ChipProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
180
185
|
|
|
181
186
|
/**
|
|
182
187
|
* @file radio-button.tsx
|
|
@@ -221,7 +226,7 @@ interface RadioButtonProps {
|
|
|
221
226
|
/** Whether the radio is required for form submission. */
|
|
222
227
|
required?: boolean;
|
|
223
228
|
/** Ref to the hidden `<input type="radio">`. */
|
|
224
|
-
ref?: React.Ref<HTMLInputElement>;
|
|
229
|
+
ref?: React$1.Ref<HTMLInputElement>;
|
|
225
230
|
}
|
|
226
231
|
/** Props for `RadioGroup`. */
|
|
227
232
|
interface RadioGroupProps {
|
|
@@ -245,7 +250,7 @@ interface RadioGroupProps {
|
|
|
245
250
|
orientation?: "horizontal" | "vertical";
|
|
246
251
|
/** Whether at least one radio in the group must be selected. */
|
|
247
252
|
required?: boolean;
|
|
248
|
-
children: React.ReactNode;
|
|
253
|
+
children: React$1.ReactNode;
|
|
249
254
|
className?: string;
|
|
250
255
|
}
|
|
251
256
|
/**
|
|
@@ -266,7 +271,7 @@ interface RadioGroupProps {
|
|
|
266
271
|
* ```
|
|
267
272
|
* @see https://m3.material.io/components/radio-button/overview
|
|
268
273
|
*/
|
|
269
|
-
declare const RadioButton: React.NamedExoticComponent<Omit<RadioButtonProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
|
274
|
+
declare const RadioButton: React$1.NamedExoticComponent<Omit<RadioButtonProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
|
|
270
275
|
/**
|
|
271
276
|
* MD3 Expressive RadioGroup component.
|
|
272
277
|
*
|
|
@@ -283,7 +288,7 @@ declare const RadioButton: React.NamedExoticComponent<Omit<RadioButtonProps, "re
|
|
|
283
288
|
* ```
|
|
284
289
|
* @see https://m3.material.io/components/radio-button/overview
|
|
285
290
|
*/
|
|
286
|
-
declare const RadioGroup: React.NamedExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
291
|
+
declare const RadioGroup: React$1.NamedExoticComponent<RadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
287
292
|
|
|
288
293
|
/**
|
|
289
294
|
* @file text-field.types.ts
|
|
@@ -328,7 +333,7 @@ interface TextFieldProps {
|
|
|
328
333
|
/** Initial value for uncontrolled mode. */
|
|
329
334
|
defaultValue?: string;
|
|
330
335
|
/** Fires when value changes. Receives new value string and native event. */
|
|
331
|
-
onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
|
336
|
+
onChange?: (value: string, event: React$1.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
|
332
337
|
/** Input type. Use 'textarea' for multi-line input. @default 'text' */
|
|
333
338
|
type?: TextFieldInputType;
|
|
334
339
|
/** Placeholder text — shown only when no label OR label is floated. */
|
|
@@ -336,7 +341,7 @@ interface TextFieldProps {
|
|
|
336
341
|
name?: string;
|
|
337
342
|
id?: string;
|
|
338
343
|
autoComplete?: string;
|
|
339
|
-
inputMode?: React.HTMLAttributes<HTMLInputElement>["inputMode"];
|
|
344
|
+
inputMode?: React$1.HTMLAttributes<HTMLInputElement>["inputMode"];
|
|
340
345
|
/** Number of rows for textarea type. @default 2 */
|
|
341
346
|
rows?: number;
|
|
342
347
|
/** Number of columns for textarea type. @default 20 */
|
|
@@ -371,9 +376,9 @@ interface TextFieldProps {
|
|
|
371
376
|
/** Text displayed after the input value (e.g., ".00"). */
|
|
372
377
|
suffixText?: string;
|
|
373
378
|
/** Icon node for the leading slot. Should be 24×24px. */
|
|
374
|
-
leadingIcon?: React.ReactNode;
|
|
379
|
+
leadingIcon?: React$1.ReactNode;
|
|
375
380
|
/** Custom trailing icon node. Used when trailingIconMode='custom'. */
|
|
376
|
-
trailingIcon?: React.ReactNode;
|
|
381
|
+
trailingIcon?: React$1.ReactNode;
|
|
377
382
|
/**
|
|
378
383
|
* Built-in trailing icon behavior.
|
|
379
384
|
* - 'none' — no trailing icon
|
|
@@ -397,11 +402,11 @@ interface TextFieldProps {
|
|
|
397
402
|
fullWidth?: boolean;
|
|
398
403
|
/** Dense variant — reduced height (48px instead of 56px). */
|
|
399
404
|
dense?: boolean;
|
|
400
|
-
onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
|
|
401
|
-
onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
|
|
402
|
-
onKeyDown?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
|
|
403
|
-
onKeyUp?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
|
|
404
|
-
ref?: React.Ref<TextFieldHandle>;
|
|
405
|
+
onFocus?: React$1.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
|
|
406
|
+
onBlur?: React$1.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
|
|
407
|
+
onKeyDown?: React$1.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
|
|
408
|
+
onKeyUp?: React$1.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
|
|
409
|
+
ref?: React$1.Ref<TextFieldHandle>;
|
|
405
410
|
/**
|
|
406
411
|
* Controls when the scrollbars are visible when type="textarea".
|
|
407
412
|
* - `hover`: Show on hover (default)
|
|
@@ -412,6 +417,152 @@ interface TextFieldProps {
|
|
|
412
417
|
scrollAreaType?: "hover" | "scroll" | "always" | "none";
|
|
413
418
|
}
|
|
414
419
|
|
|
420
|
+
interface SelectOption {
|
|
421
|
+
/** Display label for the option */
|
|
422
|
+
label: string;
|
|
423
|
+
/** Unique value for the option */
|
|
424
|
+
value: string;
|
|
425
|
+
/** Optional disabled state for this option */
|
|
426
|
+
disabled?: boolean;
|
|
427
|
+
/** Optional leading icon for this option */
|
|
428
|
+
leadingIcon?: React$1.ReactNode;
|
|
429
|
+
/** Supporting text below option label */
|
|
430
|
+
supportingText?: React$1.ReactNode;
|
|
431
|
+
}
|
|
432
|
+
interface SelectOptionRenderState {
|
|
433
|
+
/** Whether the option is currently selected */
|
|
434
|
+
selected: boolean;
|
|
435
|
+
/** Whether the option is disabled */
|
|
436
|
+
disabled?: boolean;
|
|
437
|
+
/** Select handler to trigger when clicking the custom option */
|
|
438
|
+
handleSelect: () => void;
|
|
439
|
+
/** Index in the current visible list */
|
|
440
|
+
index: number;
|
|
441
|
+
}
|
|
442
|
+
interface SelectContentRenderState {
|
|
443
|
+
/** Original options array passed to the component */
|
|
444
|
+
options: SelectOption[];
|
|
445
|
+
/** Options after filtering (or external options when onSearchChange is used) */
|
|
446
|
+
filteredOptions: SelectOption[];
|
|
447
|
+
/** Currently visible items slice */
|
|
448
|
+
visibleOptions: SelectOption[];
|
|
449
|
+
/** Whether there are more items to load in the virtual window */
|
|
450
|
+
hasMore: boolean;
|
|
451
|
+
/** Ref to attach to a sentinel element for progressive loading */
|
|
452
|
+
sentinelRef: React$1.RefObject<HTMLDivElement | null>;
|
|
453
|
+
/** Controlled/uncontrolled current value */
|
|
454
|
+
currentValue?: string;
|
|
455
|
+
/** Selected option object */
|
|
456
|
+
selectedOption?: SelectOption;
|
|
457
|
+
/** Current search query string */
|
|
458
|
+
searchQuery: string;
|
|
459
|
+
/** Callback to select an option and close menu */
|
|
460
|
+
handleSelect: (option: SelectOption) => void;
|
|
461
|
+
/** Empty state text */
|
|
462
|
+
emptyText: string;
|
|
463
|
+
/** Whether loading state is active */
|
|
464
|
+
loading?: boolean;
|
|
465
|
+
}
|
|
466
|
+
interface SelectProps extends Omit<TextFieldProps, "value" | "onChange" | "defaultValue" | "type" | "multiline" | "children"> {
|
|
467
|
+
/** Array of selectable options */
|
|
468
|
+
options: SelectOption[];
|
|
469
|
+
/** Controlled selected value */
|
|
470
|
+
value?: string;
|
|
471
|
+
/** Default selected value (uncontrolled) */
|
|
472
|
+
defaultValue?: string;
|
|
473
|
+
/** Callback fired when selection changes */
|
|
474
|
+
onChange?: (value: string, option?: SelectOption) => void;
|
|
475
|
+
/**
|
|
476
|
+
* Callback fired when search query changes in searchable mode.
|
|
477
|
+
* When provided, INTERNAL filtering is disabled — pass filtered `options` from outside (for server-side/async search).
|
|
478
|
+
*/
|
|
479
|
+
onSearchChange?: (query: string) => void;
|
|
480
|
+
/** Enable autocomplete mode (input filtering real-time search) */
|
|
481
|
+
searchable?: boolean;
|
|
482
|
+
/** Whether data is loading (displays a spinner inside the dropdown) */
|
|
483
|
+
loading?: boolean;
|
|
484
|
+
/** Maximum number of items rendered per chunk in virtual window (default: 50) */
|
|
485
|
+
maxVisible?: number;
|
|
486
|
+
/** Custom placeholder when no option is selected or when searching */
|
|
487
|
+
placeholder?: string;
|
|
488
|
+
/** Label text for the input field */
|
|
489
|
+
label?: string;
|
|
490
|
+
/** Supporting text below the input field */
|
|
491
|
+
supportingText?: string;
|
|
492
|
+
/** Color variant for the dropdown menu ('standard' | 'vibrant') */
|
|
493
|
+
colorVariant?: MenuColorVariant;
|
|
494
|
+
/** Menu visual variant ('expressive' | 'baseline') */
|
|
495
|
+
menuVariant?: MenuVariant;
|
|
496
|
+
/**
|
|
497
|
+
* Whether to show divider lines between menu options.
|
|
498
|
+
* Default: true
|
|
499
|
+
*/
|
|
500
|
+
showDividers?: boolean;
|
|
501
|
+
/**
|
|
502
|
+
* Separation style between menu options ('divider' | 'gap' | 'none').
|
|
503
|
+
* Overrides `showDividers` when explicitly specified.
|
|
504
|
+
* Default: 'divider' (or 'none' if showDividers={false})
|
|
505
|
+
*/
|
|
506
|
+
separatorStyle?: VerticalMenuSeparatorStyle;
|
|
507
|
+
/** Custom empty state message when searchable mode yields no results */
|
|
508
|
+
emptyText?: string;
|
|
509
|
+
/** Whether the popup menu automatically matches the input width. Default: true */
|
|
510
|
+
matchTriggerWidth?: boolean;
|
|
511
|
+
/**
|
|
512
|
+
* Maximum height of the dropdown options list before scrolling.
|
|
513
|
+
* Default: "360px"
|
|
514
|
+
*/
|
|
515
|
+
maxHeight?: string;
|
|
516
|
+
/** Additional class names for the root container */
|
|
517
|
+
className?: string;
|
|
518
|
+
/** Custom renderer for individual option items */
|
|
519
|
+
renderOption?: (option: SelectOption, state: SelectOptionRenderState) => React$1.ReactNode;
|
|
520
|
+
/** Custom renderer for the dropdown content (e.g. for custom virtual list libraries like TanStack Virtual) */
|
|
521
|
+
renderContent?: (state: SelectContentRenderState) => React$1.ReactNode;
|
|
522
|
+
/** Custom children to render inside MenuContent if fully overriding options */
|
|
523
|
+
children?: React$1.ReactNode;
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
/**
|
|
527
|
+
* M3 Expressive Select component (Exposed Dropdown Menu & Autocomplete).
|
|
528
|
+
*
|
|
529
|
+
* Implements Material 3 Exposed Dropdown Menu spec (Figma Node `58966:3961`).
|
|
530
|
+
* Features progressive slice virtualization and server-side/async search via `onSearchChange`.
|
|
531
|
+
*
|
|
532
|
+
* @example
|
|
533
|
+
* // Standard Exposed Dropdown Menu
|
|
534
|
+
* <Select
|
|
535
|
+
* label="City"
|
|
536
|
+
* options={[
|
|
537
|
+
* { label: "Hanoi", value: "hn" },
|
|
538
|
+
* { label: "Ho Chi Minh City", value: "hcm" }
|
|
539
|
+
* ]}
|
|
540
|
+
* value={city}
|
|
541
|
+
* onChange={(val) => setCity(val)}
|
|
542
|
+
* />
|
|
543
|
+
*
|
|
544
|
+
* @example
|
|
545
|
+
* // Searchable Autocomplete (Local filtering)
|
|
546
|
+
* <Select
|
|
547
|
+
* searchable
|
|
548
|
+
* label="Search Employee"
|
|
549
|
+
* options={userList}
|
|
550
|
+
* onChange={(val, opt) => setSelected(opt)}
|
|
551
|
+
* />
|
|
552
|
+
*
|
|
553
|
+
* @example
|
|
554
|
+
* // Searchable Autocomplete (Async / Server-side search)
|
|
555
|
+
* <Select
|
|
556
|
+
* searchable
|
|
557
|
+
* loading={isLoading}
|
|
558
|
+
* label="Search Countries"
|
|
559
|
+
* options={searchResults}
|
|
560
|
+
* onSearchChange={(query) => fetchCountries(query)}
|
|
561
|
+
* onChange={(val, opt) => setSelectedCountry(opt)}
|
|
562
|
+
* />
|
|
563
|
+
*/
|
|
564
|
+
declare const Select: React$1.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React$1.RefAttributes<TextFieldHandle>>;
|
|
565
|
+
|
|
415
566
|
/**
|
|
416
567
|
* @file slider.types.ts
|
|
417
568
|
* MD3 Expressive Slider — TypeScript prop definitions.
|
|
@@ -419,8 +570,8 @@ interface TextFieldProps {
|
|
|
419
570
|
* Reference: docs/m3/sliders/Slider.kt
|
|
420
571
|
*/
|
|
421
572
|
|
|
422
|
-
/**
|
|
423
|
-
type SliderTrackSize =
|
|
573
|
+
/** @deprecated Use MD3Size instead */
|
|
574
|
+
type SliderTrackSize = MD3Size;
|
|
424
575
|
type SliderVariant = "primary" | "secondary" | "tertiary" | "error";
|
|
425
576
|
type SliderTrackShape = "md3" | "full" | number;
|
|
426
577
|
/** Slider layout direction. */
|
|
@@ -471,11 +622,11 @@ interface SliderProps {
|
|
|
471
622
|
/** Layout orientation. @default "horizontal" */
|
|
472
623
|
orientation?: SliderOrientation;
|
|
473
624
|
/**
|
|
474
|
-
* Physical track size.
|
|
625
|
+
* Physical track size per MD3 specification.
|
|
475
626
|
* Horizontal: height. Vertical: width.
|
|
476
|
-
* @default "
|
|
627
|
+
* @default "md"
|
|
477
628
|
*/
|
|
478
|
-
|
|
629
|
+
size?: MD3Size;
|
|
479
630
|
/**
|
|
480
631
|
* Color variant.
|
|
481
632
|
* @default "primary"
|
|
@@ -588,7 +739,7 @@ interface SliderThumbProps {
|
|
|
588
739
|
showValueIndicator: boolean;
|
|
589
740
|
/** For the drag constraint ref. */
|
|
590
741
|
trackRef: React.RefObject<HTMLDivElement | null>;
|
|
591
|
-
|
|
742
|
+
size: MD3Size;
|
|
592
743
|
variant: SliderVariant;
|
|
593
744
|
/** Called during pointer drag with new value. */
|
|
594
745
|
onValueChange: (value: number) => void;
|
|
@@ -650,7 +801,7 @@ interface SliderThumbProps {
|
|
|
650
801
|
*
|
|
651
802
|
* @see https://m3.material.io/components/sliders/overview
|
|
652
803
|
*/
|
|
653
|
-
declare const RangeSlider: React.NamedExoticComponent<RangeSliderProps & React.RefAttributes<HTMLDivElement>>;
|
|
804
|
+
declare const RangeSlider: React$1.NamedExoticComponent<RangeSliderProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
654
805
|
|
|
655
806
|
/**
|
|
656
807
|
* @file slider.tsx
|
|
@@ -710,7 +861,7 @@ declare const RangeSlider: React.NamedExoticComponent<RangeSliderProps & React.R
|
|
|
710
861
|
*
|
|
711
862
|
* @see https://m3.material.io/components/sliders/overview
|
|
712
863
|
*/
|
|
713
|
-
declare const Slider: React.NamedExoticComponent<SliderProps & React.RefAttributes<HTMLDivElement>>;
|
|
864
|
+
declare const Slider: React$1.NamedExoticComponent<SliderProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
714
865
|
|
|
715
866
|
/**
|
|
716
867
|
* @file slider.tokens.ts
|
|
@@ -729,24 +880,24 @@ declare const Slider: React.NamedExoticComponent<SliderProps & React.RefAttribut
|
|
|
729
880
|
declare const SliderTokens: {
|
|
730
881
|
readonly trackSizes: {
|
|
731
882
|
xs: number;
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
883
|
+
sm: number;
|
|
884
|
+
md: number;
|
|
885
|
+
lg: number;
|
|
735
886
|
xl: number;
|
|
736
887
|
};
|
|
737
888
|
readonly trackShapes: {
|
|
738
889
|
xs: number;
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
890
|
+
sm: number;
|
|
891
|
+
md: number;
|
|
892
|
+
lg: number;
|
|
742
893
|
xl: number;
|
|
743
894
|
};
|
|
744
895
|
/** Thumb height grows with track size */
|
|
745
896
|
readonly thumbHeights: {
|
|
746
897
|
xs: number;
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
898
|
+
sm: number;
|
|
899
|
+
md: number;
|
|
900
|
+
lg: number;
|
|
750
901
|
xl: number;
|
|
751
902
|
};
|
|
752
903
|
/**
|
|
@@ -785,9 +936,9 @@ declare const SliderTokens: {
|
|
|
785
936
|
/** Standard icon size map for inset icons inside the track. */
|
|
786
937
|
readonly insetIconSizes: {
|
|
787
938
|
xs: number;
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
939
|
+
sm: number;
|
|
940
|
+
md: number;
|
|
941
|
+
lg: number;
|
|
791
942
|
xl: number;
|
|
792
943
|
};
|
|
793
944
|
/**
|
|
@@ -824,14 +975,14 @@ declare const SliderColors: {
|
|
|
824
975
|
readonly valueIndicatorText: "var(--md-sys-color-inverse-on-surface)";
|
|
825
976
|
/**
|
|
826
977
|
* Tick on the INACTIVE portion of the track.
|
|
827
|
-
* Maps to
|
|
978
|
+
* Maps to TickMarkInactiveContainerColor (in spec: primary color stands out).
|
|
828
979
|
*/
|
|
829
980
|
readonly tickOnInactive: "var(--md-sys-color-primary)";
|
|
830
981
|
/**
|
|
831
982
|
* Tick on the ACTIVE portion of the track.
|
|
832
|
-
* Maps to
|
|
983
|
+
* Maps to TickMarkActiveContainerColor (in spec: on-primary contrasts with filled track).
|
|
833
984
|
*/
|
|
834
|
-
readonly tickOnActive: "var(--md-sys-color-
|
|
985
|
+
readonly tickOnActive: "var(--md-sys-color-on-primary)";
|
|
835
986
|
readonly disabledTick: "var(--md-sys-color-on-surface)";
|
|
836
987
|
};
|
|
837
988
|
|
|
@@ -860,7 +1011,7 @@ interface SwitchProps {
|
|
|
860
1011
|
* Optional icon content rendered inside the thumb.
|
|
861
1012
|
* Expected to measure 16dp (SwitchTokens.iconSize).
|
|
862
1013
|
*/
|
|
863
|
-
thumbContent?: React.ReactNode;
|
|
1014
|
+
thumbContent?: React$1.ReactNode;
|
|
864
1015
|
/**
|
|
865
1016
|
* When true, shows thumb icons in both selected and unselected states.
|
|
866
1017
|
* Requires `thumbContent` to be provided.
|
|
@@ -923,7 +1074,7 @@ interface SwitchProps {
|
|
|
923
1074
|
*
|
|
924
1075
|
* @see https://m3.material.io/components/switch/overview
|
|
925
1076
|
*/
|
|
926
|
-
declare const Switch: React.NamedExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
|
|
1077
|
+
declare const Switch: React$1.NamedExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
927
1078
|
|
|
928
1079
|
/**
|
|
929
1080
|
* @file switch.tokens.ts
|
|
@@ -1040,6 +1191,6 @@ declare const SwitchColors: {
|
|
|
1040
1191
|
*
|
|
1041
1192
|
* @see https://m3.material.io/components/text-fields/overview
|
|
1042
1193
|
*/
|
|
1043
|
-
declare const TextField: React.NamedExoticComponent<Omit<TextFieldProps, "ref"> & React.RefAttributes<TextFieldHandle>>;
|
|
1194
|
+
declare const TextField: React$1.NamedExoticComponent<Omit<TextFieldProps, "ref"> & React$1.RefAttributes<TextFieldHandle>>;
|
|
1044
1195
|
|
|
1045
|
-
export {
|
|
1196
|
+
export { type TextFieldInputType as A, type TextFieldProps as B, Checkbox as C, type TextFieldTrailingIconMode as D, type TextFieldVariant as E, TriStateCheckbox as F, type TriStateCheckboxProps as G, type SliderThumbProps as H, RadioButton as R, Select as S, TextField as T, type CheckboxProps as a, type CheckboxState as b, Chip as c, type ChipProps as d, type RadioButtonColors as e, type RadioButtonProps as f, RadioGroup as g, type RadioGroupProps as h, RangeSlider as i, type RangeSliderProps as j, type SelectContentRenderState as k, type SelectOption as l, type SelectOptionRenderState as m, type SelectProps as n, Slider as o, SliderColors as p, type SliderOrientation as q, type SliderProps as r, SliderTokens as s, type SliderTrackSize as t, type SliderVariant as u, Switch as v, SwitchColors as w, type SwitchProps as x, SwitchTokens as y, type TextFieldHandle as z };
|