@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.
Files changed (39) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/README.md +128 -41
  3. package/dist/buttons.d.mts +1 -1
  4. package/dist/buttons.d.ts +1 -1
  5. package/dist/buttons.js +33 -14
  6. package/dist/buttons.js.map +1 -1
  7. package/dist/buttons.mjs +33 -14
  8. package/dist/buttons.mjs.map +1 -1
  9. package/dist/forms.d.mts +2 -2
  10. package/dist/forms.d.ts +2 -2
  11. package/dist/index.d.mts +79 -7
  12. package/dist/index.d.ts +79 -7
  13. package/dist/index.js +6071 -5547
  14. package/dist/index.js.map +1 -1
  15. package/dist/index.mjs +5964 -5441
  16. package/dist/index.mjs.map +1 -1
  17. package/dist/layout.js +10 -7
  18. package/dist/layout.js.map +1 -1
  19. package/dist/layout.mjs +10 -7
  20. package/dist/layout.mjs.map +1 -1
  21. package/dist/md3-expressive-shapes-CPcfl_Hf.d.mts +498 -0
  22. package/dist/md3-expressive-shapes-CPcfl_Hf.d.ts +498 -0
  23. package/dist/navigation.d.mts +93 -20
  24. package/dist/navigation.d.ts +93 -20
  25. package/dist/navigation.js +2824 -561
  26. package/dist/navigation.js.map +1 -1
  27. package/dist/navigation.mjs +2815 -554
  28. package/dist/navigation.mjs.map +1 -1
  29. package/dist/overlays.d.mts +2 -2
  30. package/dist/overlays.d.ts +2 -2
  31. package/dist/shapes.d.mts +3 -498
  32. package/dist/shapes.d.ts +3 -498
  33. package/dist/{side-sheet-modal-Bd5Qqvp9.d.ts → side-sheet-modal-DdEZR6Vl.d.ts} +1 -1
  34. package/dist/{side-sheet-modal-64FGhDxL.d.mts → side-sheet-modal-Dgjt739k.d.mts} +1 -1
  35. package/dist/{split-button-trailing-uncheckable-C-qQlyZx.d.ts → split-button-trailing-uncheckable--BhNTEJw.d.ts} +10 -5
  36. package/dist/{split-button-trailing-uncheckable-DHJqNeq_.d.mts → split-button-trailing-uncheckable-DPJL3bO6.d.mts} +10 -5
  37. package/dist/{text-field-T4Rg-9Bw.d.mts → text-field-DWC7qOvp.d.mts} +128 -128
  38. package/dist/{text-field-T4Rg-9Bw.d.ts → text-field-DWC7qOvp.d.ts} +128 -128
  39. 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 { type TriStateCheckboxProps as A, type SliderThumbProps as B, Checkbox as C, RadioButton as R, Slider 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, SliderColors as k, type SliderOrientation as l, type SliderProps as m, SliderTokens as n, type SliderTrackSize as o, type SliderVariant as p, Switch as q, SwitchColors as r, type SwitchProps as s, SwitchTokens as t, type TextFieldHandle as u, type TextFieldInputType as v, type TextFieldProps as w, type TextFieldTrailingIconMode as x, type TextFieldVariant as y, TriStateCheckbox as z };
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 { type TriStateCheckboxProps as A, type SliderThumbProps as B, Checkbox as C, RadioButton as R, Slider 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, SliderColors as k, type SliderOrientation as l, type SliderProps as m, SliderTokens as n, type SliderTrackSize as o, type SliderVariant as p, Switch as q, SwitchColors as r, type SwitchProps as s, SwitchTokens as t, type TextFieldHandle as u, type TextFieldInputType as v, type TextFieldProps as w, type TextFieldTrailingIconMode as x, type TextFieldVariant as y, TriStateCheckbox as z };
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",
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-tokens": "1.2.0",
183
- "@bug-on/m3-tailwind": "1.2.0"
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",