@bug-on/m3-expressive 1.2.3 → 1.2.5
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 +128 -41
- package/dist/buttons.d.mts +1 -1
- package/dist/buttons.d.ts +1 -1
- package/dist/buttons.js +33 -14
- package/dist/buttons.js.map +1 -1
- package/dist/buttons.mjs +33 -14
- package/dist/buttons.mjs.map +1 -1
- package/dist/forms.d.mts +2 -2
- package/dist/forms.d.ts +2 -2
- package/dist/index.d.mts +79 -7
- package/dist/index.d.ts +79 -7
- package/dist/index.js +6071 -5547
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +5964 -5441
- package/dist/index.mjs.map +1 -1
- package/dist/layout.js +10 -7
- package/dist/layout.js.map +1 -1
- package/dist/layout.mjs +10 -7
- package/dist/layout.mjs.map +1 -1
- package/dist/md3-expressive-shapes-CPcfl_Hf.d.mts +498 -0
- package/dist/md3-expressive-shapes-CPcfl_Hf.d.ts +498 -0
- package/dist/navigation.d.mts +93 -20
- package/dist/navigation.d.ts +93 -20
- package/dist/navigation.js +2824 -561
- package/dist/navigation.js.map +1 -1
- package/dist/navigation.mjs +2815 -554
- package/dist/navigation.mjs.map +1 -1
- package/dist/overlays.d.mts +2 -2
- package/dist/overlays.d.ts +2 -2
- package/dist/shapes.d.mts +3 -498
- package/dist/shapes.d.ts +3 -498
- package/dist/{side-sheet-modal-Bd5Qqvp9.d.ts → side-sheet-modal-DdEZR6Vl.d.ts} +1 -1
- package/dist/{side-sheet-modal-64FGhDxL.d.mts → side-sheet-modal-Dgjt739k.d.mts} +1 -1
- package/dist/{split-button-trailing-uncheckable-C-qQlyZx.d.ts → split-button-trailing-uncheckable--BhNTEJw.d.ts} +10 -5
- package/dist/{split-button-trailing-uncheckable-DHJqNeq_.d.mts → split-button-trailing-uncheckable-DPJL3bO6.d.mts} +10 -5
- package/dist/{text-field-T4Rg-9Bw.d.mts → text-field-DWC7qOvp.d.mts} +128 -128
- package/dist/{text-field-T4Rg-9Bw.d.ts → text-field-DWC7qOvp.d.ts} +128 -128
- package/package.json +3 -3
|
@@ -285,6 +285,133 @@ declare const RadioButton: React.NamedExoticComponent<Omit<RadioButtonProps, "re
|
|
|
285
285
|
*/
|
|
286
286
|
declare const RadioGroup: React.NamedExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
287
287
|
|
|
288
|
+
/**
|
|
289
|
+
* @file text-field.types.ts
|
|
290
|
+
* TypeScript interfaces and types for TextField MD3 Expressive component.
|
|
291
|
+
* @see https://m3.material.io/components/text-fields/overview
|
|
292
|
+
*/
|
|
293
|
+
|
|
294
|
+
type TextFieldVariant = "filled" | "outlined";
|
|
295
|
+
type TextFieldInputType = "text" | "email" | "number" | "password" | "search" | "tel" | "url" | "textarea";
|
|
296
|
+
type TextFieldTrailingIconMode = "none" | "clear" | "password-toggle" | "custom";
|
|
297
|
+
/**
|
|
298
|
+
* Imperative handle exposed via forwardRef.
|
|
299
|
+
* Allows parent components to programmatically control the text field.
|
|
300
|
+
*/
|
|
301
|
+
interface TextFieldHandle {
|
|
302
|
+
/** Focuses the input element. */
|
|
303
|
+
focus(): void;
|
|
304
|
+
/** Blurs the input element. */
|
|
305
|
+
blur(): void;
|
|
306
|
+
/** Selects all text in the input. */
|
|
307
|
+
select(): void;
|
|
308
|
+
/** Clears the current value and fires onChange with empty string. */
|
|
309
|
+
clear(): void;
|
|
310
|
+
/** Sets a custom validation message on the native input. */
|
|
311
|
+
setCustomValidity(message: string): void;
|
|
312
|
+
/** Returns true if the input is valid. Does not show validation UI. */
|
|
313
|
+
checkValidity(): boolean;
|
|
314
|
+
/** Returns true if the input is valid. Shows validation UI if invalid. */
|
|
315
|
+
reportValidity(): boolean;
|
|
316
|
+
/** Returns the current value string. */
|
|
317
|
+
getValue(): string;
|
|
318
|
+
/** Returns the underlying input or textarea element. */
|
|
319
|
+
getInputElement(): HTMLInputElement | HTMLTextAreaElement | null;
|
|
320
|
+
}
|
|
321
|
+
interface TextFieldProps {
|
|
322
|
+
/** Filled or outlined variant. @default 'filled' */
|
|
323
|
+
variant?: TextFieldVariant;
|
|
324
|
+
/** Floating label text. Also used as accessible name when no aria-label is set. */
|
|
325
|
+
label?: string;
|
|
326
|
+
/** Controlled value. Use with onChange for controlled mode. */
|
|
327
|
+
value?: string;
|
|
328
|
+
/** Initial value for uncontrolled mode. */
|
|
329
|
+
defaultValue?: string;
|
|
330
|
+
/** Fires when value changes. Receives new value string and native event. */
|
|
331
|
+
onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
|
332
|
+
/** Input type. Use 'textarea' for multi-line input. @default 'text' */
|
|
333
|
+
type?: TextFieldInputType;
|
|
334
|
+
/** Placeholder text — shown only when no label OR label is floated. */
|
|
335
|
+
placeholder?: string;
|
|
336
|
+
name?: string;
|
|
337
|
+
id?: string;
|
|
338
|
+
autoComplete?: string;
|
|
339
|
+
inputMode?: React.HTMLAttributes<HTMLInputElement>["inputMode"];
|
|
340
|
+
/** Number of rows for textarea type. @default 2 */
|
|
341
|
+
rows?: number;
|
|
342
|
+
/** Number of columns for textarea type. @default 20 */
|
|
343
|
+
cols?: number;
|
|
344
|
+
/** Whether the textarea should automatically resize to fit its content. @default false */
|
|
345
|
+
autoResize?: boolean;
|
|
346
|
+
/** Maximum number of rows when autoResize is true. */
|
|
347
|
+
maxRows?: number;
|
|
348
|
+
/** CSS direction override for input text. */
|
|
349
|
+
textDirection?: "ltr" | "rtl" | "";
|
|
350
|
+
/** Marks field as required. Shows asterisk on label. */
|
|
351
|
+
required?: boolean;
|
|
352
|
+
/** Hides the asterisk even when required=true. */
|
|
353
|
+
noAsterisk?: boolean;
|
|
354
|
+
/** Manual error override — forces error visual state. */
|
|
355
|
+
error?: boolean;
|
|
356
|
+
/** Error message shown below the field (replaces supportingText). */
|
|
357
|
+
errorText?: string;
|
|
358
|
+
minLength?: number;
|
|
359
|
+
/** When set, enables character counter display. */
|
|
360
|
+
maxLength?: number;
|
|
361
|
+
min?: string;
|
|
362
|
+
max?: string;
|
|
363
|
+
step?: string;
|
|
364
|
+
pattern?: string;
|
|
365
|
+
/** For type="email" — allows multiple email addresses. */
|
|
366
|
+
multiple?: boolean;
|
|
367
|
+
/** Helper text shown below the field. Replaced by errorText when in error state. */
|
|
368
|
+
supportingText?: string;
|
|
369
|
+
/** Text displayed before the input value (e.g., "$"). */
|
|
370
|
+
prefixText?: string;
|
|
371
|
+
/** Text displayed after the input value (e.g., ".00"). */
|
|
372
|
+
suffixText?: string;
|
|
373
|
+
/** Icon node for the leading slot. Should be 24×24px. */
|
|
374
|
+
leadingIcon?: React.ReactNode;
|
|
375
|
+
/** Custom trailing icon node. Used when trailingIconMode='custom'. */
|
|
376
|
+
trailingIcon?: React.ReactNode;
|
|
377
|
+
/**
|
|
378
|
+
* Built-in trailing icon behavior.
|
|
379
|
+
* - 'none' — no trailing icon
|
|
380
|
+
* - 'clear' — ✕ button, clears value when clicked
|
|
381
|
+
* - 'password-toggle' — eye icon, toggles password visibility
|
|
382
|
+
* - 'custom' — uses trailingIcon prop
|
|
383
|
+
* @default 'none'
|
|
384
|
+
*/
|
|
385
|
+
trailingIconMode?: TextFieldTrailingIconMode;
|
|
386
|
+
disabled?: boolean;
|
|
387
|
+
readOnly?: boolean;
|
|
388
|
+
/** Hides spinner arrows on type="number". */
|
|
389
|
+
noSpinner?: boolean;
|
|
390
|
+
form?: string;
|
|
391
|
+
"aria-label"?: string;
|
|
392
|
+
"aria-describedby"?: string;
|
|
393
|
+
"aria-labelledby"?: string;
|
|
394
|
+
/** Extra class applied to the root wrapper element. */
|
|
395
|
+
className?: string;
|
|
396
|
+
/** Makes the component fill its container width. */
|
|
397
|
+
fullWidth?: boolean;
|
|
398
|
+
/** Dense variant — reduced height (48px instead of 56px). */
|
|
399
|
+
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
|
+
/**
|
|
406
|
+
* Controls when the scrollbars are visible when type="textarea".
|
|
407
|
+
* - `hover`: Show on hover (default)
|
|
408
|
+
* - `scroll`: Show only while scrolling
|
|
409
|
+
* - `always`: Always visible
|
|
410
|
+
* - `none`: Never visible
|
|
411
|
+
*/
|
|
412
|
+
scrollAreaType?: "hover" | "scroll" | "always" | "none";
|
|
413
|
+
}
|
|
414
|
+
|
|
288
415
|
/**
|
|
289
416
|
* @file slider.types.ts
|
|
290
417
|
* MD3 Expressive Slider — TypeScript prop definitions.
|
|
@@ -866,133 +993,6 @@ declare const SwitchColors: {
|
|
|
866
993
|
readonly focusIndicator: "var(--md-sys-color-secondary)";
|
|
867
994
|
};
|
|
868
995
|
|
|
869
|
-
/**
|
|
870
|
-
* @file text-field.types.ts
|
|
871
|
-
* TypeScript interfaces and types for TextField MD3 Expressive component.
|
|
872
|
-
* @see https://m3.material.io/components/text-fields/overview
|
|
873
|
-
*/
|
|
874
|
-
|
|
875
|
-
type TextFieldVariant = "filled" | "outlined";
|
|
876
|
-
type TextFieldInputType = "text" | "email" | "number" | "password" | "search" | "tel" | "url" | "textarea";
|
|
877
|
-
type TextFieldTrailingIconMode = "none" | "clear" | "password-toggle" | "custom";
|
|
878
|
-
/**
|
|
879
|
-
* Imperative handle exposed via forwardRef.
|
|
880
|
-
* Allows parent components to programmatically control the text field.
|
|
881
|
-
*/
|
|
882
|
-
interface TextFieldHandle {
|
|
883
|
-
/** Focuses the input element. */
|
|
884
|
-
focus(): void;
|
|
885
|
-
/** Blurs the input element. */
|
|
886
|
-
blur(): void;
|
|
887
|
-
/** Selects all text in the input. */
|
|
888
|
-
select(): void;
|
|
889
|
-
/** Clears the current value and fires onChange with empty string. */
|
|
890
|
-
clear(): void;
|
|
891
|
-
/** Sets a custom validation message on the native input. */
|
|
892
|
-
setCustomValidity(message: string): void;
|
|
893
|
-
/** Returns true if the input is valid. Does not show validation UI. */
|
|
894
|
-
checkValidity(): boolean;
|
|
895
|
-
/** Returns true if the input is valid. Shows validation UI if invalid. */
|
|
896
|
-
reportValidity(): boolean;
|
|
897
|
-
/** Returns the current value string. */
|
|
898
|
-
getValue(): string;
|
|
899
|
-
/** Returns the underlying input or textarea element. */
|
|
900
|
-
getInputElement(): HTMLInputElement | HTMLTextAreaElement | null;
|
|
901
|
-
}
|
|
902
|
-
interface TextFieldProps {
|
|
903
|
-
/** Filled or outlined variant. @default 'filled' */
|
|
904
|
-
variant?: TextFieldVariant;
|
|
905
|
-
/** Floating label text. Also used as accessible name when no aria-label is set. */
|
|
906
|
-
label?: string;
|
|
907
|
-
/** Controlled value. Use with onChange for controlled mode. */
|
|
908
|
-
value?: string;
|
|
909
|
-
/** Initial value for uncontrolled mode. */
|
|
910
|
-
defaultValue?: string;
|
|
911
|
-
/** Fires when value changes. Receives new value string and native event. */
|
|
912
|
-
onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
|
913
|
-
/** Input type. Use 'textarea' for multi-line input. @default 'text' */
|
|
914
|
-
type?: TextFieldInputType;
|
|
915
|
-
/** Placeholder text — shown only when no label OR label is floated. */
|
|
916
|
-
placeholder?: string;
|
|
917
|
-
name?: string;
|
|
918
|
-
id?: string;
|
|
919
|
-
autoComplete?: string;
|
|
920
|
-
inputMode?: React.HTMLAttributes<HTMLInputElement>["inputMode"];
|
|
921
|
-
/** Number of rows for textarea type. @default 2 */
|
|
922
|
-
rows?: number;
|
|
923
|
-
/** Number of columns for textarea type. @default 20 */
|
|
924
|
-
cols?: number;
|
|
925
|
-
/** Whether the textarea should automatically resize to fit its content. @default false */
|
|
926
|
-
autoResize?: boolean;
|
|
927
|
-
/** Maximum number of rows when autoResize is true. */
|
|
928
|
-
maxRows?: number;
|
|
929
|
-
/** CSS direction override for input text. */
|
|
930
|
-
textDirection?: "ltr" | "rtl" | "";
|
|
931
|
-
/** Marks field as required. Shows asterisk on label. */
|
|
932
|
-
required?: boolean;
|
|
933
|
-
/** Hides the asterisk even when required=true. */
|
|
934
|
-
noAsterisk?: boolean;
|
|
935
|
-
/** Manual error override — forces error visual state. */
|
|
936
|
-
error?: boolean;
|
|
937
|
-
/** Error message shown below the field (replaces supportingText). */
|
|
938
|
-
errorText?: string;
|
|
939
|
-
minLength?: number;
|
|
940
|
-
/** When set, enables character counter display. */
|
|
941
|
-
maxLength?: number;
|
|
942
|
-
min?: string;
|
|
943
|
-
max?: string;
|
|
944
|
-
step?: string;
|
|
945
|
-
pattern?: string;
|
|
946
|
-
/** For type="email" — allows multiple email addresses. */
|
|
947
|
-
multiple?: boolean;
|
|
948
|
-
/** Helper text shown below the field. Replaced by errorText when in error state. */
|
|
949
|
-
supportingText?: string;
|
|
950
|
-
/** Text displayed before the input value (e.g., "$"). */
|
|
951
|
-
prefixText?: string;
|
|
952
|
-
/** Text displayed after the input value (e.g., ".00"). */
|
|
953
|
-
suffixText?: string;
|
|
954
|
-
/** Icon node for the leading slot. Should be 24×24px. */
|
|
955
|
-
leadingIcon?: React.ReactNode;
|
|
956
|
-
/** Custom trailing icon node. Used when trailingIconMode='custom'. */
|
|
957
|
-
trailingIcon?: React.ReactNode;
|
|
958
|
-
/**
|
|
959
|
-
* Built-in trailing icon behavior.
|
|
960
|
-
* - 'none' — no trailing icon
|
|
961
|
-
* - 'clear' — ✕ button, clears value when clicked
|
|
962
|
-
* - 'password-toggle' — eye icon, toggles password visibility
|
|
963
|
-
* - 'custom' — uses trailingIcon prop
|
|
964
|
-
* @default 'none'
|
|
965
|
-
*/
|
|
966
|
-
trailingIconMode?: TextFieldTrailingIconMode;
|
|
967
|
-
disabled?: boolean;
|
|
968
|
-
readOnly?: boolean;
|
|
969
|
-
/** Hides spinner arrows on type="number". */
|
|
970
|
-
noSpinner?: boolean;
|
|
971
|
-
form?: string;
|
|
972
|
-
"aria-label"?: string;
|
|
973
|
-
"aria-describedby"?: string;
|
|
974
|
-
"aria-labelledby"?: string;
|
|
975
|
-
/** Extra class applied to the root wrapper element. */
|
|
976
|
-
className?: string;
|
|
977
|
-
/** Makes the component fill its container width. */
|
|
978
|
-
fullWidth?: boolean;
|
|
979
|
-
/** Dense variant — reduced height (48px instead of 56px). */
|
|
980
|
-
dense?: boolean;
|
|
981
|
-
onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
|
|
982
|
-
onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
|
|
983
|
-
onKeyDown?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
|
|
984
|
-
onKeyUp?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
|
|
985
|
-
ref?: React.Ref<TextFieldHandle>;
|
|
986
|
-
/**
|
|
987
|
-
* Controls when the scrollbars are visible when type="textarea".
|
|
988
|
-
* - `hover`: Show on hover (default)
|
|
989
|
-
* - `scroll`: Show only while scrolling
|
|
990
|
-
* - `always`: Always visible
|
|
991
|
-
* - `none`: Never visible
|
|
992
|
-
*/
|
|
993
|
-
scrollAreaType?: "hover" | "scroll" | "always" | "none";
|
|
994
|
-
}
|
|
995
|
-
|
|
996
996
|
/**
|
|
997
997
|
* @file text-field.tsx
|
|
998
998
|
* MD3 Expressive TextField — Filled & Outlined variants.
|
|
@@ -1042,4 +1042,4 @@ interface TextFieldProps {
|
|
|
1042
1042
|
*/
|
|
1043
1043
|
declare const TextField: React.NamedExoticComponent<Omit<TextFieldProps, "ref"> & React.RefAttributes<TextFieldHandle>>;
|
|
1044
1044
|
|
|
1045
|
-
export {
|
|
1045
|
+
export { TriStateCheckbox as A, type TriStateCheckboxProps as B, Checkbox as C, RadioButton as R, type SliderThumbProps 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, Slider as k, SliderColors as l, type SliderOrientation as m, type SliderProps as n, SliderTokens as o, type SliderTrackSize as p, type SliderVariant as q, Switch as r, SwitchColors as s, type SwitchProps as t, SwitchTokens as u, type TextFieldHandle as v, type TextFieldInputType as w, type TextFieldProps as x, type TextFieldTrailingIconMode as y, type TextFieldVariant as z };
|
|
@@ -285,6 +285,133 @@ declare const RadioButton: React.NamedExoticComponent<Omit<RadioButtonProps, "re
|
|
|
285
285
|
*/
|
|
286
286
|
declare const RadioGroup: React.NamedExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
287
287
|
|
|
288
|
+
/**
|
|
289
|
+
* @file text-field.types.ts
|
|
290
|
+
* TypeScript interfaces and types for TextField MD3 Expressive component.
|
|
291
|
+
* @see https://m3.material.io/components/text-fields/overview
|
|
292
|
+
*/
|
|
293
|
+
|
|
294
|
+
type TextFieldVariant = "filled" | "outlined";
|
|
295
|
+
type TextFieldInputType = "text" | "email" | "number" | "password" | "search" | "tel" | "url" | "textarea";
|
|
296
|
+
type TextFieldTrailingIconMode = "none" | "clear" | "password-toggle" | "custom";
|
|
297
|
+
/**
|
|
298
|
+
* Imperative handle exposed via forwardRef.
|
|
299
|
+
* Allows parent components to programmatically control the text field.
|
|
300
|
+
*/
|
|
301
|
+
interface TextFieldHandle {
|
|
302
|
+
/** Focuses the input element. */
|
|
303
|
+
focus(): void;
|
|
304
|
+
/** Blurs the input element. */
|
|
305
|
+
blur(): void;
|
|
306
|
+
/** Selects all text in the input. */
|
|
307
|
+
select(): void;
|
|
308
|
+
/** Clears the current value and fires onChange with empty string. */
|
|
309
|
+
clear(): void;
|
|
310
|
+
/** Sets a custom validation message on the native input. */
|
|
311
|
+
setCustomValidity(message: string): void;
|
|
312
|
+
/** Returns true if the input is valid. Does not show validation UI. */
|
|
313
|
+
checkValidity(): boolean;
|
|
314
|
+
/** Returns true if the input is valid. Shows validation UI if invalid. */
|
|
315
|
+
reportValidity(): boolean;
|
|
316
|
+
/** Returns the current value string. */
|
|
317
|
+
getValue(): string;
|
|
318
|
+
/** Returns the underlying input or textarea element. */
|
|
319
|
+
getInputElement(): HTMLInputElement | HTMLTextAreaElement | null;
|
|
320
|
+
}
|
|
321
|
+
interface TextFieldProps {
|
|
322
|
+
/** Filled or outlined variant. @default 'filled' */
|
|
323
|
+
variant?: TextFieldVariant;
|
|
324
|
+
/** Floating label text. Also used as accessible name when no aria-label is set. */
|
|
325
|
+
label?: string;
|
|
326
|
+
/** Controlled value. Use with onChange for controlled mode. */
|
|
327
|
+
value?: string;
|
|
328
|
+
/** Initial value for uncontrolled mode. */
|
|
329
|
+
defaultValue?: string;
|
|
330
|
+
/** Fires when value changes. Receives new value string and native event. */
|
|
331
|
+
onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
|
332
|
+
/** Input type. Use 'textarea' for multi-line input. @default 'text' */
|
|
333
|
+
type?: TextFieldInputType;
|
|
334
|
+
/** Placeholder text — shown only when no label OR label is floated. */
|
|
335
|
+
placeholder?: string;
|
|
336
|
+
name?: string;
|
|
337
|
+
id?: string;
|
|
338
|
+
autoComplete?: string;
|
|
339
|
+
inputMode?: React.HTMLAttributes<HTMLInputElement>["inputMode"];
|
|
340
|
+
/** Number of rows for textarea type. @default 2 */
|
|
341
|
+
rows?: number;
|
|
342
|
+
/** Number of columns for textarea type. @default 20 */
|
|
343
|
+
cols?: number;
|
|
344
|
+
/** Whether the textarea should automatically resize to fit its content. @default false */
|
|
345
|
+
autoResize?: boolean;
|
|
346
|
+
/** Maximum number of rows when autoResize is true. */
|
|
347
|
+
maxRows?: number;
|
|
348
|
+
/** CSS direction override for input text. */
|
|
349
|
+
textDirection?: "ltr" | "rtl" | "";
|
|
350
|
+
/** Marks field as required. Shows asterisk on label. */
|
|
351
|
+
required?: boolean;
|
|
352
|
+
/** Hides the asterisk even when required=true. */
|
|
353
|
+
noAsterisk?: boolean;
|
|
354
|
+
/** Manual error override — forces error visual state. */
|
|
355
|
+
error?: boolean;
|
|
356
|
+
/** Error message shown below the field (replaces supportingText). */
|
|
357
|
+
errorText?: string;
|
|
358
|
+
minLength?: number;
|
|
359
|
+
/** When set, enables character counter display. */
|
|
360
|
+
maxLength?: number;
|
|
361
|
+
min?: string;
|
|
362
|
+
max?: string;
|
|
363
|
+
step?: string;
|
|
364
|
+
pattern?: string;
|
|
365
|
+
/** For type="email" — allows multiple email addresses. */
|
|
366
|
+
multiple?: boolean;
|
|
367
|
+
/** Helper text shown below the field. Replaced by errorText when in error state. */
|
|
368
|
+
supportingText?: string;
|
|
369
|
+
/** Text displayed before the input value (e.g., "$"). */
|
|
370
|
+
prefixText?: string;
|
|
371
|
+
/** Text displayed after the input value (e.g., ".00"). */
|
|
372
|
+
suffixText?: string;
|
|
373
|
+
/** Icon node for the leading slot. Should be 24×24px. */
|
|
374
|
+
leadingIcon?: React.ReactNode;
|
|
375
|
+
/** Custom trailing icon node. Used when trailingIconMode='custom'. */
|
|
376
|
+
trailingIcon?: React.ReactNode;
|
|
377
|
+
/**
|
|
378
|
+
* Built-in trailing icon behavior.
|
|
379
|
+
* - 'none' — no trailing icon
|
|
380
|
+
* - 'clear' — ✕ button, clears value when clicked
|
|
381
|
+
* - 'password-toggle' — eye icon, toggles password visibility
|
|
382
|
+
* - 'custom' — uses trailingIcon prop
|
|
383
|
+
* @default 'none'
|
|
384
|
+
*/
|
|
385
|
+
trailingIconMode?: TextFieldTrailingIconMode;
|
|
386
|
+
disabled?: boolean;
|
|
387
|
+
readOnly?: boolean;
|
|
388
|
+
/** Hides spinner arrows on type="number". */
|
|
389
|
+
noSpinner?: boolean;
|
|
390
|
+
form?: string;
|
|
391
|
+
"aria-label"?: string;
|
|
392
|
+
"aria-describedby"?: string;
|
|
393
|
+
"aria-labelledby"?: string;
|
|
394
|
+
/** Extra class applied to the root wrapper element. */
|
|
395
|
+
className?: string;
|
|
396
|
+
/** Makes the component fill its container width. */
|
|
397
|
+
fullWidth?: boolean;
|
|
398
|
+
/** Dense variant — reduced height (48px instead of 56px). */
|
|
399
|
+
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
|
+
/**
|
|
406
|
+
* Controls when the scrollbars are visible when type="textarea".
|
|
407
|
+
* - `hover`: Show on hover (default)
|
|
408
|
+
* - `scroll`: Show only while scrolling
|
|
409
|
+
* - `always`: Always visible
|
|
410
|
+
* - `none`: Never visible
|
|
411
|
+
*/
|
|
412
|
+
scrollAreaType?: "hover" | "scroll" | "always" | "none";
|
|
413
|
+
}
|
|
414
|
+
|
|
288
415
|
/**
|
|
289
416
|
* @file slider.types.ts
|
|
290
417
|
* MD3 Expressive Slider — TypeScript prop definitions.
|
|
@@ -866,133 +993,6 @@ declare const SwitchColors: {
|
|
|
866
993
|
readonly focusIndicator: "var(--md-sys-color-secondary)";
|
|
867
994
|
};
|
|
868
995
|
|
|
869
|
-
/**
|
|
870
|
-
* @file text-field.types.ts
|
|
871
|
-
* TypeScript interfaces and types for TextField MD3 Expressive component.
|
|
872
|
-
* @see https://m3.material.io/components/text-fields/overview
|
|
873
|
-
*/
|
|
874
|
-
|
|
875
|
-
type TextFieldVariant = "filled" | "outlined";
|
|
876
|
-
type TextFieldInputType = "text" | "email" | "number" | "password" | "search" | "tel" | "url" | "textarea";
|
|
877
|
-
type TextFieldTrailingIconMode = "none" | "clear" | "password-toggle" | "custom";
|
|
878
|
-
/**
|
|
879
|
-
* Imperative handle exposed via forwardRef.
|
|
880
|
-
* Allows parent components to programmatically control the text field.
|
|
881
|
-
*/
|
|
882
|
-
interface TextFieldHandle {
|
|
883
|
-
/** Focuses the input element. */
|
|
884
|
-
focus(): void;
|
|
885
|
-
/** Blurs the input element. */
|
|
886
|
-
blur(): void;
|
|
887
|
-
/** Selects all text in the input. */
|
|
888
|
-
select(): void;
|
|
889
|
-
/** Clears the current value and fires onChange with empty string. */
|
|
890
|
-
clear(): void;
|
|
891
|
-
/** Sets a custom validation message on the native input. */
|
|
892
|
-
setCustomValidity(message: string): void;
|
|
893
|
-
/** Returns true if the input is valid. Does not show validation UI. */
|
|
894
|
-
checkValidity(): boolean;
|
|
895
|
-
/** Returns true if the input is valid. Shows validation UI if invalid. */
|
|
896
|
-
reportValidity(): boolean;
|
|
897
|
-
/** Returns the current value string. */
|
|
898
|
-
getValue(): string;
|
|
899
|
-
/** Returns the underlying input or textarea element. */
|
|
900
|
-
getInputElement(): HTMLInputElement | HTMLTextAreaElement | null;
|
|
901
|
-
}
|
|
902
|
-
interface TextFieldProps {
|
|
903
|
-
/** Filled or outlined variant. @default 'filled' */
|
|
904
|
-
variant?: TextFieldVariant;
|
|
905
|
-
/** Floating label text. Also used as accessible name when no aria-label is set. */
|
|
906
|
-
label?: string;
|
|
907
|
-
/** Controlled value. Use with onChange for controlled mode. */
|
|
908
|
-
value?: string;
|
|
909
|
-
/** Initial value for uncontrolled mode. */
|
|
910
|
-
defaultValue?: string;
|
|
911
|
-
/** Fires when value changes. Receives new value string and native event. */
|
|
912
|
-
onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
|
913
|
-
/** Input type. Use 'textarea' for multi-line input. @default 'text' */
|
|
914
|
-
type?: TextFieldInputType;
|
|
915
|
-
/** Placeholder text — shown only when no label OR label is floated. */
|
|
916
|
-
placeholder?: string;
|
|
917
|
-
name?: string;
|
|
918
|
-
id?: string;
|
|
919
|
-
autoComplete?: string;
|
|
920
|
-
inputMode?: React.HTMLAttributes<HTMLInputElement>["inputMode"];
|
|
921
|
-
/** Number of rows for textarea type. @default 2 */
|
|
922
|
-
rows?: number;
|
|
923
|
-
/** Number of columns for textarea type. @default 20 */
|
|
924
|
-
cols?: number;
|
|
925
|
-
/** Whether the textarea should automatically resize to fit its content. @default false */
|
|
926
|
-
autoResize?: boolean;
|
|
927
|
-
/** Maximum number of rows when autoResize is true. */
|
|
928
|
-
maxRows?: number;
|
|
929
|
-
/** CSS direction override for input text. */
|
|
930
|
-
textDirection?: "ltr" | "rtl" | "";
|
|
931
|
-
/** Marks field as required. Shows asterisk on label. */
|
|
932
|
-
required?: boolean;
|
|
933
|
-
/** Hides the asterisk even when required=true. */
|
|
934
|
-
noAsterisk?: boolean;
|
|
935
|
-
/** Manual error override — forces error visual state. */
|
|
936
|
-
error?: boolean;
|
|
937
|
-
/** Error message shown below the field (replaces supportingText). */
|
|
938
|
-
errorText?: string;
|
|
939
|
-
minLength?: number;
|
|
940
|
-
/** When set, enables character counter display. */
|
|
941
|
-
maxLength?: number;
|
|
942
|
-
min?: string;
|
|
943
|
-
max?: string;
|
|
944
|
-
step?: string;
|
|
945
|
-
pattern?: string;
|
|
946
|
-
/** For type="email" — allows multiple email addresses. */
|
|
947
|
-
multiple?: boolean;
|
|
948
|
-
/** Helper text shown below the field. Replaced by errorText when in error state. */
|
|
949
|
-
supportingText?: string;
|
|
950
|
-
/** Text displayed before the input value (e.g., "$"). */
|
|
951
|
-
prefixText?: string;
|
|
952
|
-
/** Text displayed after the input value (e.g., ".00"). */
|
|
953
|
-
suffixText?: string;
|
|
954
|
-
/** Icon node for the leading slot. Should be 24×24px. */
|
|
955
|
-
leadingIcon?: React.ReactNode;
|
|
956
|
-
/** Custom trailing icon node. Used when trailingIconMode='custom'. */
|
|
957
|
-
trailingIcon?: React.ReactNode;
|
|
958
|
-
/**
|
|
959
|
-
* Built-in trailing icon behavior.
|
|
960
|
-
* - 'none' — no trailing icon
|
|
961
|
-
* - 'clear' — ✕ button, clears value when clicked
|
|
962
|
-
* - 'password-toggle' — eye icon, toggles password visibility
|
|
963
|
-
* - 'custom' — uses trailingIcon prop
|
|
964
|
-
* @default 'none'
|
|
965
|
-
*/
|
|
966
|
-
trailingIconMode?: TextFieldTrailingIconMode;
|
|
967
|
-
disabled?: boolean;
|
|
968
|
-
readOnly?: boolean;
|
|
969
|
-
/** Hides spinner arrows on type="number". */
|
|
970
|
-
noSpinner?: boolean;
|
|
971
|
-
form?: string;
|
|
972
|
-
"aria-label"?: string;
|
|
973
|
-
"aria-describedby"?: string;
|
|
974
|
-
"aria-labelledby"?: string;
|
|
975
|
-
/** Extra class applied to the root wrapper element. */
|
|
976
|
-
className?: string;
|
|
977
|
-
/** Makes the component fill its container width. */
|
|
978
|
-
fullWidth?: boolean;
|
|
979
|
-
/** Dense variant — reduced height (48px instead of 56px). */
|
|
980
|
-
dense?: boolean;
|
|
981
|
-
onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
|
|
982
|
-
onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
|
|
983
|
-
onKeyDown?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
|
|
984
|
-
onKeyUp?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
|
|
985
|
-
ref?: React.Ref<TextFieldHandle>;
|
|
986
|
-
/**
|
|
987
|
-
* Controls when the scrollbars are visible when type="textarea".
|
|
988
|
-
* - `hover`: Show on hover (default)
|
|
989
|
-
* - `scroll`: Show only while scrolling
|
|
990
|
-
* - `always`: Always visible
|
|
991
|
-
* - `none`: Never visible
|
|
992
|
-
*/
|
|
993
|
-
scrollAreaType?: "hover" | "scroll" | "always" | "none";
|
|
994
|
-
}
|
|
995
|
-
|
|
996
996
|
/**
|
|
997
997
|
* @file text-field.tsx
|
|
998
998
|
* MD3 Expressive TextField — Filled & Outlined variants.
|
|
@@ -1042,4 +1042,4 @@ interface TextFieldProps {
|
|
|
1042
1042
|
*/
|
|
1043
1043
|
declare const TextField: React.NamedExoticComponent<Omit<TextFieldProps, "ref"> & React.RefAttributes<TextFieldHandle>>;
|
|
1044
1044
|
|
|
1045
|
-
export {
|
|
1045
|
+
export { TriStateCheckbox as A, type TriStateCheckboxProps as B, Checkbox as C, RadioButton as R, type SliderThumbProps 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, Slider as k, SliderColors as l, type SliderOrientation as m, type SliderProps as n, SliderTokens as o, type SliderTrackSize as p, type SliderVariant as q, Switch as r, SwitchColors as s, type SwitchProps as t, SwitchTokens as u, type TextFieldHandle as v, type TextFieldInputType as w, type TextFieldProps as x, type TextFieldTrailingIconMode as y, type TextFieldVariant as z };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bug-on/m3-expressive",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.5",
|
|
4
4
|
"description": "Material Design 3 Expressive React components",
|
|
5
5
|
"author": "Bug On",
|
|
6
6
|
"license": "MIT",
|
|
@@ -179,8 +179,8 @@
|
|
|
179
179
|
"class-variance-authority": "^0.7.1",
|
|
180
180
|
"clsx": "^2.1.1",
|
|
181
181
|
"tailwind-merge": "^3.3.1",
|
|
182
|
-
"@bug-on/m3-
|
|
183
|
-
"@bug-on/m3-
|
|
182
|
+
"@bug-on/m3-tailwind": "1.2.1",
|
|
183
|
+
"@bug-on/m3-tokens": "1.2.1"
|
|
184
184
|
},
|
|
185
185
|
"devDependencies": {
|
|
186
186
|
"@testing-library/jest-dom": "^6.9.1",
|