@cloudflare/component-button 5.0.0 → 5.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/Button.d.ts +64 -66
  3. package/dist/ButtonGroup.d.ts +5 -4
  4. package/dist/TextButton.d.ts +64 -63
  5. package/dist/UnstyledButton.d.ts +65 -63
  6. package/es/Button.js +82 -90
  7. package/es/UnstyledButton.js +23 -9
  8. package/lib/Button.js +84 -91
  9. package/lib/UnstyledButton.js +13 -3
  10. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # Change Log
2
2
 
3
+ ## 5.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 8dfd2c3a82: Add plain and plainMono button types
8
+ - 658c7bd8b6: Update colors and states, added buttonState prop to lock appearance to a particular state (e.g. hover)
9
+
10
+ ## 5.1.0
11
+
12
+ ### Minor Changes
13
+
14
+ - 46c2fbb47e: Add focus option
15
+
3
16
  ## 5.0.0
4
17
 
5
18
  ### Patch Changes
package/dist/Button.d.ts CHANGED
@@ -2,58 +2,10 @@ import React from 'react';
2
2
  import { ThemeProp } from '@cloudflare/style-container';
3
3
  import { IconType } from '@cloudflare/component-icon';
4
4
  export declare const buttonStyles: (props: PropsWithTheme) => {
5
- readonly '&:hover': {
6
- backgroundColor: string | undefined;
7
- color: string | undefined;
8
- } | undefined;
9
- readonly '&:active': {
10
- backgroundColor: string | undefined;
11
- color: string | undefined;
12
- } | undefined;
13
- readonly '&:focus': {
14
- backgroundColor: string | undefined;
15
- color: string | undefined;
16
- } | undefined;
17
- readonly '&:focus-visible': {
18
- readonly outlineOffset: 3;
19
- readonly outlineStyle: "auto";
20
- readonly outlineColor: string;
21
- };
22
- readonly '&:focus-within:hover': {
23
- backgroundColor: string | undefined;
24
- color: string | undefined;
25
- } | undefined;
26
- readonly '&:active:hover': {
27
- backgroundColor: string | undefined;
28
- color: string | undefined;
29
- } | undefined;
30
- readonly '&[title]': {
31
- readonly pointerEvents: "none" | "auto";
32
- };
33
- readonly backgroundColor: string | undefined;
34
- readonly color: string | undefined;
35
- readonly cursor: "default" | "pointer";
36
- readonly display: "inline-flex";
37
- readonly flexGrow: 1 | undefined;
38
- readonly alignItems: "center";
39
- readonly justifyContent: "center";
40
- readonly fontFamily: "-apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, \"Helvetica Neue\", Arial, sans-serif";
41
- readonly fontSize: 2;
42
- readonly fontWeight: 400;
43
- readonly lineHeight: 1.2;
44
- readonly borderBottomWidth: 0 | "1px";
45
- readonly borderLeftWidth: 0 | "1px";
46
- readonly borderRightWidth: 0 | "1px";
47
- readonly borderTopWidth: 0 | "1px";
48
- readonly borderBottomStyle: "solid";
49
- readonly borderTopStyle: "solid";
50
- readonly borderLeftStyle: "solid";
51
- readonly borderRightStyle: "solid";
52
- readonly borderColor: string | undefined;
53
- readonly borderTopRightRadius: 0 | 5;
54
- readonly borderTopLeftRadius: 0 | 5;
55
- readonly borderBottomLeftRadius: 0 | 5;
56
- readonly borderBottomRightRadius: 0 | 5;
5
+ readonly borderTopRightRadius: 0 | "4px";
6
+ readonly borderTopLeftRadius: 0 | "4px";
7
+ readonly borderBottomLeftRadius: 0 | "4px";
8
+ readonly borderBottomRightRadius: 0 | "4px";
57
9
  readonly '&::before': {
58
10
  content: string;
59
11
  color: string | undefined;
@@ -74,7 +26,7 @@ export declare const buttonStyles: (props: PropsWithTheme) => {
74
26
  animationIterationCount: string;
75
27
  animationTimingFunction: string;
76
28
  } | undefined;
77
- readonly opacity: "inherit" | 0.5;
29
+ readonly opacity: 0.5 | "inherit";
78
30
  readonly mt: number;
79
31
  readonly mr: 0;
80
32
  readonly mb: 0;
@@ -84,7 +36,7 @@ export declare const buttonStyles: (props: PropsWithTheme) => {
84
36
  readonly pointerEvents: "none" | "auto";
85
37
  readonly position: "relative";
86
38
  readonly textAlign: "center";
87
- readonly transitionProperty: "background-color,border-color" | "background-color,border-color,color";
39
+ readonly transitionProperty: "all";
88
40
  readonly transitionDuration: "200ms";
89
41
  readonly transitionTimingFunction: "ease";
90
42
  readonly userSelect: "none";
@@ -92,14 +44,56 @@ export declare const buttonStyles: (props: PropsWithTheme) => {
92
44
  readonly float: "none";
93
45
  readonly whiteSpace: "normal" | "nowrap";
94
46
  readonly width: "auto" | "100%";
47
+ readonly boxShadow?: string | undefined;
48
+ readonly '&:focus-visible': {
49
+ readonly outlineOffset: 3;
50
+ readonly outlineStyle: "auto";
51
+ readonly outlineColor: string;
52
+ };
53
+ readonly '&[title]': {
54
+ readonly pointerEvents: "none" | "auto";
55
+ };
56
+ readonly backgroundColor: string | undefined;
57
+ readonly color: string | undefined;
58
+ readonly cursor: "default" | "pointer";
59
+ readonly display: "inline-flex";
60
+ readonly flexGrow: 1 | undefined;
61
+ readonly alignItems: "center";
62
+ readonly justifyContent: "center";
63
+ readonly fontFamily: "-apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, \"Helvetica Neue\", Arial, sans-serif";
64
+ readonly fontSize: 2;
65
+ readonly fontWeight: 400;
66
+ readonly lineHeight: 1.2;
67
+ readonly border: "none";
68
+ readonly '&:focus'?: {
69
+ backgroundColor: string | undefined;
70
+ color: string | undefined;
71
+ boxShadow: string | undefined;
72
+ } | undefined;
73
+ readonly '&:hover'?: {
74
+ backgroundColor: string | undefined;
75
+ color: string | undefined;
76
+ boxShadow: string | undefined;
77
+ } | undefined;
78
+ readonly '&:active'?: {
79
+ backgroundColor: string | undefined;
80
+ color: string | undefined;
81
+ boxShadow: string | undefined;
82
+ } | undefined;
83
+ readonly '&:focus:active'?: {
84
+ backgroundColor: string | undefined;
85
+ color: string | undefined;
86
+ boxShadow: string | undefined;
87
+ } | undefined;
95
88
  };
96
89
  declare type Props = {
90
+ id?: string;
97
91
  submit?: boolean;
98
92
  spaced?: boolean;
99
93
  space?: number;
100
94
  direction?: 'column' | 'row';
101
95
  group?: 'first' | 'inbetween' | 'last';
102
- type?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
96
+ type?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'plain' | 'plainMono';
103
97
  testId?: string;
104
98
  loading?: boolean;
105
99
  inverted?: boolean;
@@ -110,33 +104,37 @@ declare type Props = {
110
104
  ariaLabel?: string;
111
105
  stretch?: boolean;
112
106
  noWrapText?: boolean;
107
+ buttonState?: 'hover' | 'active' | 'focus';
113
108
  } & Pick<JSX.IntrinsicElements['button'], 'onClick' | 'disabled' | 'form' | 'tabIndex' | 'className'>;
114
109
  declare type PropsWithTheme = Props & ThemeProp;
115
110
  declare const _default: React.ComponentType<{
111
+ space?: number | undefined;
112
+ disabled?: boolean | undefined;
116
113
  form?: string | undefined;
117
- type?: "default" | "success" | "warning" | "primary" | "danger" | undefined;
118
- key?: React.Key | null | undefined;
119
- onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
120
114
  className?: string | undefined;
115
+ id?: string | undefined;
121
116
  tabIndex?: number | undefined;
117
+ type?: "default" | "primary" | "success" | "warning" | "danger" | "plain" | "plainMono" | undefined;
122
118
  direction?: "column" | "row" | undefined;
123
- space?: number | undefined;
124
- disabled?: boolean | undefined;
119
+ key?: React.Key | null | undefined;
120
+ onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
125
121
  loading?: boolean | undefined;
126
122
  stretch?: boolean | undefined;
127
123
  submit?: boolean | undefined;
128
- ariaLabel?: string | undefined;
129
- testId?: string | undefined;
130
124
  inverted?: boolean | undefined;
131
125
  spaced?: boolean | undefined;
132
126
  group?: "first" | "last" | "inbetween" | undefined;
127
+ testId?: string | undefined;
133
128
  iconType?: IconType | undefined;
134
129
  iconLabel?: string | undefined;
135
130
  iconSize?: number | undefined;
136
131
  iconPosition?: "right" | "left" | undefined;
132
+ ariaLabel?: string | undefined;
137
133
  noWrapText?: boolean | undefined;
138
- p?: import("csstype").PaddingProperty<string | number> | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | undefined;
134
+ buttonState?: "focus" | "active" | "hover" | undefined;
139
135
  color?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
136
+ borderColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
137
+ p?: import("csstype").PaddingProperty<string | number> | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | undefined;
140
138
  height?: import("csstype").HeightProperty<string | number> | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | undefined;
141
139
  width?: import("csstype").WidthProperty<string | number> | [import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined] | [import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined] | undefined;
142
140
  cursor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
@@ -144,7 +142,6 @@ declare const _default: React.ComponentType<{
144
142
  fontSize?: import("csstype").FontSizeProperty<string | number> | [import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined] | [import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined] | undefined;
145
143
  fontWeight?: import("csstype").FontWeightProperty | [import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined] | [import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined] | undefined;
146
144
  textDecoration?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
147
- borderColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
148
145
  margin?: import("csstype").MarginProperty<string | number> | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | undefined;
149
146
  marginLeft?: import("csstype").MarginLeftProperty<string | number> | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | undefined;
150
147
  marginRight?: import("csstype").MarginRightProperty<string | number> | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | undefined;
@@ -203,12 +200,13 @@ declare const _default: React.ComponentType<{
203
200
  flexDirection?: import("csstype").FlexDirectionProperty | [import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined] | [import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined] | undefined;
204
201
  flexBasis?: import("csstype").FlexBasisProperty<string | number> | [import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined] | [import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined] | undefined;
205
202
  flexGrow?: import("csstype").GlobalsNumber | [import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined] | [import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined] | undefined;
203
+ gridTemplateColumns?: import("csstype").GridTemplateColumnsProperty<string | number> | [import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined] | [import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined] | undefined;
206
204
  innerRef?: React.Ref<HTMLButtonElement> | undefined;
207
205
  gridColumnSpan?: number | number[] | "end" | "all" | undefined;
208
206
  gridColumnPad?: number | number[] | undefined;
209
207
  gridRowSpan?: number | number[] | undefined;
210
208
  gridRowPad?: number | number[] | undefined;
211
- gridAlign?: ("end" | "start" | "center" | "stretch") | undefined;
212
- gridJustify?: ("end" | "start" | "center" | "stretch") | undefined;
209
+ gridAlign?: ("start" | "end" | "center" | "stretch") | undefined;
210
+ gridJustify?: ("start" | "end" | "center" | "stretch") | undefined;
213
211
  }>;
214
212
  export default _default;
package/dist/ButtonGroup.d.ts CHANGED
@@ -5,8 +5,9 @@ declare const _default: React.ComponentType<{
5
5
  space?: number | undefined;
6
6
  direction?: "column" | "row" | undefined;
7
7
  stretch?: boolean | undefined;
8
- p?: import("csstype").PaddingProperty<string | number> | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | undefined;
9
8
  color?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
9
+ borderColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
10
+ p?: import("csstype").PaddingProperty<string | number> | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | undefined;
10
11
  height?: import("csstype").HeightProperty<string | number> | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | undefined;
11
12
  width?: import("csstype").WidthProperty<string | number> | [import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined] | [import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined] | undefined;
12
13
  cursor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
@@ -14,7 +15,6 @@ declare const _default: React.ComponentType<{
14
15
  fontSize?: import("csstype").FontSizeProperty<string | number> | [import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined] | [import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined] | undefined;
15
16
  fontWeight?: import("csstype").FontWeightProperty | [import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined] | [import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined] | undefined;
16
17
  textDecoration?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
17
- borderColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
18
18
  margin?: import("csstype").MarginProperty<string | number> | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | undefined;
19
19
  marginLeft?: import("csstype").MarginLeftProperty<string | number> | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | undefined;
20
20
  marginRight?: import("csstype").MarginRightProperty<string | number> | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | undefined;
@@ -73,12 +73,13 @@ declare const _default: React.ComponentType<{
73
73
  flexDirection?: import("csstype").FlexDirectionProperty | [import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined] | [import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined] | undefined;
74
74
  flexBasis?: import("csstype").FlexBasisProperty<string | number> | [import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined] | [import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined] | undefined;
75
75
  flexGrow?: import("csstype").GlobalsNumber | [import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined] | [import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined] | undefined;
76
+ gridTemplateColumns?: import("csstype").GridTemplateColumnsProperty<string | number> | [import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined] | [import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined] | undefined;
76
77
  innerRef?: React.Ref<never> | undefined;
77
78
  gridColumnSpan?: number | number[] | "end" | "all" | undefined;
78
79
  gridColumnPad?: number | number[] | undefined;
79
80
  gridRowSpan?: number | number[] | undefined;
80
81
  gridRowPad?: number | number[] | undefined;
81
- gridAlign?: ("end" | "start" | "center" | "stretch") | undefined;
82
- gridJustify?: ("end" | "start" | "center" | "stretch") | undefined;
82
+ gridAlign?: ("start" | "end" | "center" | "stretch") | undefined;
83
+ gridJustify?: ("start" | "end" | "center" | "stretch") | undefined;
83
84
  }>;
84
85
  export default _default;
package/dist/TextButton.d.ts CHANGED
@@ -1,29 +1,58 @@
1
1
  /// <reference types="react" />
2
2
  declare const TextButton: import("react").ComponentType<{
3
+ is?: string | undefined;
4
+ name?: string | undefined;
5
+ disabled?: boolean | undefined;
6
+ color?: (string & (string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined])) | undefined;
3
7
  form?: string | undefined;
4
8
  slot?: string | undefined;
5
9
  style?: import("react").CSSProperties | undefined;
6
10
  title?: string | undefined;
7
11
  children?: import("react").ReactNode;
8
- type?: "button" | "reset" | "submit" | undefined;
9
- id?: string | undefined;
10
- key?: import("react").Key | null | undefined;
11
- onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
12
- onMouseEnter?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
13
- onMouseLeave?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
14
- draggable?: (boolean | "true" | "false") | undefined;
15
- onDragStart?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
16
- onDrag?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
17
- onDragEnd?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
12
+ value?: string | number | readonly string[] | undefined;
13
+ defaultChecked?: boolean | undefined;
14
+ defaultValue?: string | number | readonly string[] | undefined;
15
+ suppressContentEditableWarning?: boolean | undefined;
16
+ suppressHydrationWarning?: boolean | undefined;
17
+ dangerouslySetInnerHTML?: {
18
+ __html: string;
19
+ } | undefined;
20
+ accessKey?: string | undefined;
18
21
  className?: string | undefined;
19
- color?: (string & (string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined])) | undefined;
22
+ contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
23
+ contextMenu?: string | undefined;
24
+ dir?: string | undefined;
25
+ draggable?: (boolean | "true" | "false") | undefined;
26
+ id?: string | undefined;
20
27
  lang?: string | undefined;
21
- name?: string | undefined;
22
- role?: string | undefined;
28
+ placeholder?: string | undefined;
29
+ spellCheck?: (boolean | "true" | "false") | undefined;
23
30
  tabIndex?: number | undefined;
31
+ inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
32
+ radioGroup?: string | undefined;
33
+ role?: string | undefined;
34
+ about?: string | undefined;
35
+ datatype?: string | undefined;
36
+ inlist?: any;
37
+ prefix?: string | undefined;
38
+ property?: string | undefined;
39
+ resource?: string | undefined;
40
+ typeof?: string | undefined;
41
+ vocab?: string | undefined;
42
+ autoCapitalize?: string | undefined;
43
+ autoCorrect?: string | undefined;
44
+ autoSave?: string | undefined;
45
+ itemProp?: string | undefined;
46
+ itemScope?: boolean | undefined;
47
+ itemType?: string | undefined;
48
+ itemID?: string | undefined;
49
+ itemRef?: string | undefined;
50
+ results?: number | undefined;
51
+ security?: string | undefined;
52
+ unselectable?: "on" | "off" | undefined;
24
53
  'aria-activedescendant'?: string | undefined;
25
54
  'aria-atomic'?: boolean | "true" | "false" | undefined;
26
- 'aria-autocomplete'?: "none" | "list" | "both" | "inline" | undefined;
55
+ 'aria-autocomplete'?: "inline" | "none" | "list" | "both" | undefined;
27
56
  'aria-busy'?: boolean | "true" | "false" | undefined;
28
57
  'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
29
58
  'aria-colcount'?: number | undefined;
@@ -39,7 +68,7 @@ declare const TextButton: import("react").ComponentType<{
39
68
  'aria-expanded'?: boolean | "true" | "false" | undefined;
40
69
  'aria-flowto'?: string | undefined;
41
70
  'aria-grabbed'?: boolean | "true" | "false" | undefined;
42
- 'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
71
+ 'aria-haspopup'?: boolean | "menu" | "dialog" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
43
72
  'aria-hidden'?: boolean | "true" | "false" | undefined;
44
73
  'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
45
74
  'aria-keyshortcuts'?: string | undefined;
@@ -69,9 +98,16 @@ declare const TextButton: import("react").ComponentType<{
69
98
  'aria-valuemin'?: number | undefined;
70
99
  'aria-valuenow'?: number | undefined;
71
100
  'aria-valuetext'?: string | undefined;
72
- dangerouslySetInnerHTML?: {
73
- __html: string;
74
- } | undefined;
101
+ type?: "button" | "reset" | "submit" | undefined;
102
+ autoFocus?: boolean | undefined;
103
+ formAction?: string | undefined;
104
+ formEncType?: string | undefined;
105
+ formMethod?: string | undefined;
106
+ formNoValidate?: boolean | undefined;
107
+ formTarget?: string | undefined;
108
+ key?: import("react").Key | null | undefined;
109
+ hidden?: boolean | undefined;
110
+ translate?: "yes" | "no" | undefined;
75
111
  onCopy?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
76
112
  onCopyCapture?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
77
113
  onCut?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
@@ -156,12 +192,15 @@ declare const TextButton: import("react").ComponentType<{
156
192
  onWaitingCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
157
193
  onAuxClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
158
194
  onAuxClickCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
195
+ onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
159
196
  onClickCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
160
197
  onContextMenu?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
161
198
  onContextMenuCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
162
199
  onDoubleClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
163
200
  onDoubleClickCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
201
+ onDrag?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
164
202
  onDragCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
203
+ onDragEnd?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
165
204
  onDragEndCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
166
205
  onDragEnter?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
167
206
  onDragEnterCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
@@ -171,11 +210,14 @@ declare const TextButton: import("react").ComponentType<{
171
210
  onDragLeaveCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
172
211
  onDragOver?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
173
212
  onDragOverCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
213
+ onDragStart?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
174
214
  onDragStartCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
175
215
  onDrop?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
176
216
  onDropCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
177
217
  onMouseDown?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
178
218
  onMouseDownCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
219
+ onMouseEnter?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
220
+ onMouseLeave?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
179
221
  onMouseMove?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
180
222
  onMouseMoveCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
181
223
  onMouseOut?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
@@ -226,48 +268,7 @@ declare const TextButton: import("react").ComponentType<{
226
268
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
227
269
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
228
270
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
229
- dir?: string | undefined;
230
- is?: string | undefined;
231
- disabled?: boolean | undefined;
232
- value?: string | number | readonly string[] | undefined;
233
- defaultChecked?: boolean | undefined;
234
- defaultValue?: string | number | readonly string[] | undefined;
235
- suppressContentEditableWarning?: boolean | undefined;
236
- suppressHydrationWarning?: boolean | undefined;
237
- accessKey?: string | undefined;
238
- contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
239
- contextMenu?: string | undefined;
240
- placeholder?: string | undefined;
241
- spellCheck?: (boolean | "true" | "false") | undefined;
242
- inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
243
- radioGroup?: string | undefined;
244
- about?: string | undefined;
245
- datatype?: string | undefined;
246
- inlist?: any;
247
- prefix?: string | undefined;
248
- property?: string | undefined;
249
- resource?: string | undefined;
250
- typeof?: string | undefined;
251
- vocab?: string | undefined;
252
- autoCapitalize?: string | undefined;
253
- autoCorrect?: string | undefined;
254
- autoSave?: string | undefined;
255
- itemProp?: string | undefined;
256
- itemScope?: boolean | undefined;
257
- itemType?: string | undefined;
258
- itemID?: string | undefined;
259
- itemRef?: string | undefined;
260
- results?: number | undefined;
261
- security?: string | undefined;
262
- unselectable?: "on" | "off" | undefined;
263
- autoFocus?: boolean | undefined;
264
- formAction?: string | undefined;
265
- formEncType?: string | undefined;
266
- formMethod?: string | undefined;
267
- formNoValidate?: boolean | undefined;
268
- formTarget?: string | undefined;
269
- hidden?: boolean | undefined;
270
- translate?: "no" | "yes" | undefined;
271
+ borderColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
271
272
  p?: import("csstype").PaddingProperty<string | number> | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | undefined;
272
273
  height?: import("csstype").HeightProperty<string | number> | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | undefined;
273
274
  width?: import("csstype").WidthProperty<string | number> | [import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined] | [import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined] | undefined;
@@ -276,7 +277,6 @@ declare const TextButton: import("react").ComponentType<{
276
277
  fontSize?: import("csstype").FontSizeProperty<string | number> | [import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined] | [import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined] | undefined;
277
278
  fontWeight?: import("csstype").FontWeightProperty | [import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined] | [import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined] | undefined;
278
279
  textDecoration?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
279
- borderColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
280
280
  margin?: import("csstype").MarginProperty<string | number> | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | undefined;
281
281
  marginLeft?: import("csstype").MarginLeftProperty<string | number> | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | undefined;
282
282
  marginRight?: import("csstype").MarginRightProperty<string | number> | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | undefined;
@@ -335,13 +335,14 @@ declare const TextButton: import("react").ComponentType<{
335
335
  flexDirection?: import("csstype").FlexDirectionProperty | [import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined] | [import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined] | undefined;
336
336
  flexBasis?: import("csstype").FlexBasisProperty<string | number> | [import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined] | [import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined] | undefined;
337
337
  flexGrow?: import("csstype").GlobalsNumber | [import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined] | [import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined] | undefined;
338
+ gridTemplateColumns?: import("csstype").GridTemplateColumnsProperty<string | number> | [import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined] | [import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined] | undefined;
338
339
  'data-testid'?: string | undefined;
339
340
  innerRef?: import("react").Ref<HTMLButtonElement> | undefined;
340
341
  gridColumnSpan?: number | number[] | "end" | "all" | undefined;
341
342
  gridColumnPad?: number | number[] | undefined;
342
343
  gridRowSpan?: number | number[] | undefined;
343
344
  gridRowPad?: number | number[] | undefined;
344
- gridAlign?: ("end" | "start" | "center" | "stretch") | undefined;
345
- gridJustify?: ("end" | "start" | "center" | "stretch") | undefined;
345
+ gridAlign?: ("start" | "end" | "center" | "stretch") | undefined;
346
+ gridJustify?: ("start" | "end" | "center" | "stretch") | undefined;
346
347
  }>;
347
348
  export default TextButton;