@launchpad-ui/form 0.10.12 → 0.10.13

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 (4) hide show
  1. package/dist/index.es.js +53 -53
  2. package/dist/index.js +53 -53
  3. package/dist/style.css +1 -491
  4. package/package.json +5 -5
package/dist/index.es.js CHANGED
@@ -10,72 +10,72 @@ import { useButton } from "@react-aria/button";
10
10
  import { useLocale } from "@react-aria/i18n";
11
11
  import { useNumberField as useNumberField$1 } from "@react-aria/numberfield";
12
12
  import { useNumberFieldState } from "@react-stately/numberfield";
13
- const formGroup = "_formGroup_k5j2r_10";
14
- const formIncreasedErrorMargin = "_formIncreasedErrorMargin_k5j2r_18";
15
- const formInline = "_formInline_k5j2r_22";
16
- const form = "_form_k5j2r_10";
17
- const formInput = "_formInput_k5j2r_36";
18
- const isFocused = "_isFocused_k5j2r_56";
19
- const suffixContainer = "_suffixContainer_k5j2r_75";
20
- const isInvalid = "_isInvalid_k5j2r_80";
21
- const iconField = "_iconField_k5j2r_87";
22
- const iconFieldIcon = "_iconFieldIcon_k5j2r_95";
23
- const inlineForm = "_inlineForm_k5j2r_113";
24
- const label = "_label_k5j2r_118";
25
- const labelDisabled = "_labelDisabled_k5j2r_124";
26
- const labelOptional = "_labelOptional_k5j2r_128";
27
- const compactTextField = "_compactTextField_k5j2r_134";
28
- const fieldError = "_fieldError_k5j2r_158";
29
- const hint = "_hint_k5j2r_204";
30
- const field = "_field_k5j2r_158";
31
- const fieldErrorMessage = "_fieldErrorMessage_k5j2r_224";
32
- const isDisabled = "_isDisabled_k5j2r_237";
33
- const checkbox = "_checkbox_k5j2r_304";
34
- const radio = "_radio_k5j2r_311";
35
- const number = "_number_k5j2r_315";
36
- const suffix = "_suffix_k5j2r_75";
37
- const iconFieldIconFill = "_iconFieldIconFill_k5j2r_353";
38
- const iconFieldButton = "_iconFieldButton_k5j2r_357";
39
- const formInputTiny = "_formInputTiny_k5j2r_361";
40
- const requiredAsterisk = "_requiredAsterisk_k5j2r_370";
41
- const fieldSet = "_fieldSet_k5j2r_374";
42
- const isActive = "_isActive_k5j2r_385";
43
- const numberField = "_numberField_k5j2r_392";
13
+ const checkbox = "QJPOUG_checkbox_";
14
+ const compactTextField = "QJPOUG_compactTextField_";
15
+ const field = "QJPOUG_field_";
16
+ const fieldError = "QJPOUG_fieldError_";
17
+ const fieldErrorMessage = "QJPOUG_fieldErrorMessage_";
18
+ const fieldSet = "QJPOUG_fieldSet_";
19
+ const form = "QJPOUG_form_";
20
+ const formGroup = "QJPOUG_formGroup_";
21
+ const formIncreasedErrorMargin = "QJPOUG_formIncreasedErrorMargin_";
22
+ const formInline = "QJPOUG_formInline_";
23
+ const formInput = "QJPOUG_formInput_";
24
+ const formInputTiny = "QJPOUG_formInputTiny_";
25
+ const hint = "QJPOUG_hint_";
26
+ const iconField = "QJPOUG_iconField_";
27
+ const iconFieldButton = "QJPOUG_iconFieldButton_";
28
+ const iconFieldIcon = "QJPOUG_iconFieldIcon_";
29
+ const iconFieldIconFill = "QJPOUG_iconFieldIconFill_";
30
+ const inlineForm = "QJPOUG_inlineForm_";
31
+ const isActive = "QJPOUG_isActive_";
32
+ const isDisabled = "QJPOUG_isDisabled_";
33
+ const isFocused = "QJPOUG_isFocused_";
34
+ const isInvalid = "QJPOUG_isInvalid_";
35
+ const label = "QJPOUG_label_";
36
+ const labelDisabled = "QJPOUG_labelDisabled_";
37
+ const labelOptional = "QJPOUG_labelOptional_";
38
+ const number = "QJPOUG_number_";
39
+ const numberField = "QJPOUG_numberField_";
40
+ const radio = "QJPOUG_radio_";
41
+ const requiredAsterisk = "QJPOUG_requiredAsterisk_";
42
+ const suffix = "QJPOUG_suffix_";
43
+ const suffixContainer = "QJPOUG_suffixContainer_";
44
44
  const styles = {
45
+ checkbox,
46
+ compactTextField,
47
+ field,
48
+ fieldError,
49
+ fieldErrorMessage,
50
+ fieldSet,
51
+ form,
45
52
  formGroup,
46
53
  formIncreasedErrorMargin,
47
54
  formInline,
48
- form,
49
55
  formInput,
50
- isFocused,
51
- suffixContainer,
52
- isInvalid,
56
+ formInputTiny,
57
+ hint,
53
58
  iconField,
59
+ iconFieldButton,
54
60
  iconFieldIcon,
61
+ iconFieldIconFill,
55
62
  inlineForm,
63
+ isActive,
64
+ isDisabled,
65
+ isFocused,
66
+ isInvalid,
56
67
  label,
57
68
  labelDisabled,
58
69
  labelOptional,
59
- compactTextField,
60
- fieldError,
61
- hint,
62
- field,
63
- fieldErrorMessage,
64
- isDisabled,
65
- checkbox,
66
- radio,
67
70
  number,
68
- suffix,
69
- iconFieldIconFill,
70
- iconFieldButton,
71
- formInputTiny,
72
- requiredAsterisk,
73
- fieldSet,
74
- isActive,
75
71
  numberField,
76
- "numberField-input": "_numberField-input_k5j2r_396",
77
- "numberField-stepperContainer": "_numberField-stepperContainer_k5j2r_400",
78
- "numberField-stepper": "_numberField-stepper_k5j2r_400"
72
+ "numberField-input": "QJPOUG_numberField-input_",
73
+ "numberField-stepper": "QJPOUG_numberField-stepper_",
74
+ "numberField-stepperContainer": "QJPOUG_numberField-stepperContainer_",
75
+ radio,
76
+ requiredAsterisk,
77
+ suffix,
78
+ suffixContainer
79
79
  };
80
80
  const RequiredAsterisk = ({
81
81
  className,
package/dist/index.js CHANGED
@@ -12,72 +12,72 @@ const button$1 = require("@react-aria/button");
12
12
  const i18n = require("@react-aria/i18n");
13
13
  const numberfield$1 = require("@react-aria/numberfield");
14
14
  const numberfield = require("@react-stately/numberfield");
15
- const formGroup = "_formGroup_k5j2r_10";
16
- const formIncreasedErrorMargin = "_formIncreasedErrorMargin_k5j2r_18";
17
- const formInline = "_formInline_k5j2r_22";
18
- const form = "_form_k5j2r_10";
19
- const formInput = "_formInput_k5j2r_36";
20
- const isFocused = "_isFocused_k5j2r_56";
21
- const suffixContainer = "_suffixContainer_k5j2r_75";
22
- const isInvalid = "_isInvalid_k5j2r_80";
23
- const iconField = "_iconField_k5j2r_87";
24
- const iconFieldIcon = "_iconFieldIcon_k5j2r_95";
25
- const inlineForm = "_inlineForm_k5j2r_113";
26
- const label = "_label_k5j2r_118";
27
- const labelDisabled = "_labelDisabled_k5j2r_124";
28
- const labelOptional = "_labelOptional_k5j2r_128";
29
- const compactTextField = "_compactTextField_k5j2r_134";
30
- const fieldError = "_fieldError_k5j2r_158";
31
- const hint = "_hint_k5j2r_204";
32
- const field = "_field_k5j2r_158";
33
- const fieldErrorMessage = "_fieldErrorMessage_k5j2r_224";
34
- const isDisabled = "_isDisabled_k5j2r_237";
35
- const checkbox = "_checkbox_k5j2r_304";
36
- const radio = "_radio_k5j2r_311";
37
- const number = "_number_k5j2r_315";
38
- const suffix = "_suffix_k5j2r_75";
39
- const iconFieldIconFill = "_iconFieldIconFill_k5j2r_353";
40
- const iconFieldButton = "_iconFieldButton_k5j2r_357";
41
- const formInputTiny = "_formInputTiny_k5j2r_361";
42
- const requiredAsterisk = "_requiredAsterisk_k5j2r_370";
43
- const fieldSet = "_fieldSet_k5j2r_374";
44
- const isActive = "_isActive_k5j2r_385";
45
- const numberField = "_numberField_k5j2r_392";
15
+ const checkbox = "QJPOUG_checkbox_";
16
+ const compactTextField = "QJPOUG_compactTextField_";
17
+ const field = "QJPOUG_field_";
18
+ const fieldError = "QJPOUG_fieldError_";
19
+ const fieldErrorMessage = "QJPOUG_fieldErrorMessage_";
20
+ const fieldSet = "QJPOUG_fieldSet_";
21
+ const form = "QJPOUG_form_";
22
+ const formGroup = "QJPOUG_formGroup_";
23
+ const formIncreasedErrorMargin = "QJPOUG_formIncreasedErrorMargin_";
24
+ const formInline = "QJPOUG_formInline_";
25
+ const formInput = "QJPOUG_formInput_";
26
+ const formInputTiny = "QJPOUG_formInputTiny_";
27
+ const hint = "QJPOUG_hint_";
28
+ const iconField = "QJPOUG_iconField_";
29
+ const iconFieldButton = "QJPOUG_iconFieldButton_";
30
+ const iconFieldIcon = "QJPOUG_iconFieldIcon_";
31
+ const iconFieldIconFill = "QJPOUG_iconFieldIconFill_";
32
+ const inlineForm = "QJPOUG_inlineForm_";
33
+ const isActive = "QJPOUG_isActive_";
34
+ const isDisabled = "QJPOUG_isDisabled_";
35
+ const isFocused = "QJPOUG_isFocused_";
36
+ const isInvalid = "QJPOUG_isInvalid_";
37
+ const label = "QJPOUG_label_";
38
+ const labelDisabled = "QJPOUG_labelDisabled_";
39
+ const labelOptional = "QJPOUG_labelOptional_";
40
+ const number = "QJPOUG_number_";
41
+ const numberField = "QJPOUG_numberField_";
42
+ const radio = "QJPOUG_radio_";
43
+ const requiredAsterisk = "QJPOUG_requiredAsterisk_";
44
+ const suffix = "QJPOUG_suffix_";
45
+ const suffixContainer = "QJPOUG_suffixContainer_";
46
46
  const styles = {
47
+ checkbox,
48
+ compactTextField,
49
+ field,
50
+ fieldError,
51
+ fieldErrorMessage,
52
+ fieldSet,
53
+ form,
47
54
  formGroup,
48
55
  formIncreasedErrorMargin,
49
56
  formInline,
50
- form,
51
57
  formInput,
52
- isFocused,
53
- suffixContainer,
54
- isInvalid,
58
+ formInputTiny,
59
+ hint,
55
60
  iconField,
61
+ iconFieldButton,
56
62
  iconFieldIcon,
63
+ iconFieldIconFill,
57
64
  inlineForm,
65
+ isActive,
66
+ isDisabled,
67
+ isFocused,
68
+ isInvalid,
58
69
  label,
59
70
  labelDisabled,
60
71
  labelOptional,
61
- compactTextField,
62
- fieldError,
63
- hint,
64
- field,
65
- fieldErrorMessage,
66
- isDisabled,
67
- checkbox,
68
- radio,
69
72
  number,
70
- suffix,
71
- iconFieldIconFill,
72
- iconFieldButton,
73
- formInputTiny,
74
- requiredAsterisk,
75
- fieldSet,
76
- isActive,
77
73
  numberField,
78
- "numberField-input": "_numberField-input_k5j2r_396",
79
- "numberField-stepperContainer": "_numberField-stepperContainer_k5j2r_400",
80
- "numberField-stepper": "_numberField-stepper_k5j2r_400"
74
+ "numberField-input": "QJPOUG_numberField-input_",
75
+ "numberField-stepper": "QJPOUG_numberField-stepper_",
76
+ "numberField-stepperContainer": "QJPOUG_numberField-stepperContainer_",
77
+ radio,
78
+ requiredAsterisk,
79
+ suffix,
80
+ suffixContainer
81
81
  };
82
82
  const RequiredAsterisk = ({
83
83
  className,
package/dist/style.css CHANGED
@@ -1,491 +1 @@
1
- :root,
2
- [data-theme='default'] {
3
- --lp-component-form-color-text-label-disabled: var(--lp-color-gray-800);
4
- }
5
-
6
- [data-theme='dark'] {
7
- --lp-component-form-color-text-label-disabled: var(--lp-color-gray-400);
8
- }
9
-
10
- ._formGroup_k5j2r_10 {
11
- margin: 1.25rem 0;
12
- padding: 0;
13
- border: none;
14
- }
15
-
16
- /* The margin for .formGroup and the min-height of .form-fieldError
17
- should be equal to avoid content shift when errors are shown */
18
-
19
- ._formIncreasedErrorMargin_k5j2r_18 ._formGroup_k5j2r_10 {
20
- margin: 1.75rem 0;
21
- }
22
-
23
- ._formInline_k5j2r_22 ._formGroup_k5j2r_10 {
24
- display: inline-block;
25
- vertical-align: middle;
26
- margin: 0;
27
- }
28
-
29
- ._form_k5j2r_10 ._formGroup_k5j2r_10:first-child {
30
- margin-top: 0;
31
- }
32
-
33
- ._form_k5j2r_10 ._formGroup_k5j2r_10:last-child {
34
- margin-bottom: 0;
35
- }
36
-
37
- ._formInput_k5j2r_36 {
38
- display: block;
39
- width: 100%;
40
- padding: 0.375rem 0.625rem;
41
- font-size: 0.8125rem;
42
- font-family: var(--lp-font-family-base);
43
- line-height: var(--lp-line-height-300);
44
- background-color: var(--lp-color-bg-field-base);
45
- color: var(--lp-color-text-ui-primary-base);
46
- border: 1px solid var(--lp-color-border-field-base);
47
- border-radius: var(--lp-border-radius-regular);
48
- transition: all var(--lp-duration-100) linear;
49
- height: 2rem;
50
- }
51
-
52
- ._formInput_k5j2r_36:-moz-placeholder-shown {
53
- overflow: hidden;
54
- text-overflow: ellipsis;
55
- }
56
-
57
- ._formInput_k5j2r_36:placeholder-shown {
58
- overflow: hidden;
59
- text-overflow: ellipsis;
60
- }
61
-
62
- ._formInput_k5j2r_36._isFocused_k5j2r_56,
63
- ._formInput_k5j2r_36:focus {
64
- outline: 0;
65
- border-color: var(--lp-color-border-field-focus);
66
- box-shadow: 0 0 0 3px hsla(232, 100%, 63%, 0.1);
67
- }
68
-
69
- select._formInput_k5j2r_36 {
70
- -webkit-appearance: none;
71
- -moz-appearance: none;
72
- appearance: none;
73
- background: transparent;
74
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41 8.84L12 13.42l4.59-4.58L18 10.25l-6 6-6-6 1.41-1.41z" fill="%23646f7a"/></svg>');
75
- background-size: 1.25rem;
76
- background-repeat: no-repeat;
77
- background-position:
78
- right 0.4em top 50%,
79
- 0 0;
80
- padding-right: 1.25rem;
81
- }
82
-
83
- ._suffixContainer_k5j2r_75 ._formInput_k5j2r_36 {
84
- border: none;
85
- border-radius: var(--lp-border-radius-regular) 0 0 var(--lp-border-radius-regular);
86
- }
87
-
88
- ._isInvalid_k5j2r_80 ._formInput_k5j2r_36,
89
- ._form_k5j2r_10 ._isInvalid_k5j2r_80 .Select-control,
90
- ._form_k5j2r_10 ._isInvalid_k5j2r_80 .CustomSelect > div,
91
- ._form_k5j2r_10 ._isInvalid_k5j2r_80 ._formInput_k5j2r_36 {
92
- border-color: var(--lp-color-border-field-error);
93
- }
94
-
95
- ._iconField_k5j2r_87.IconBefore ._formInput_k5j2r_36 {
96
- padding-left: 1.875rem;
97
- }
98
-
99
- ._iconField_k5j2r_87.IconAfter ._formInput_k5j2r_36 {
100
- padding-right: 1.875rem;
101
- }
102
-
103
- ._iconFieldIcon_k5j2r_95 {
104
- position: absolute;
105
- top: 50%;
106
- transform: translateY(-50%);
107
- }
108
-
109
- ._iconField_k5j2r_87.IconBefore ._iconFieldIcon_k5j2r_95 {
110
- left: 0.625rem;
111
- }
112
-
113
- ._iconField_k5j2r_87.IconAfter ._iconFieldIcon_k5j2r_95 {
114
- right: 0.625rem;
115
- }
116
-
117
- ._suffixContainer_k5j2r_75 ._formInput_k5j2r_36:focus {
118
- box-shadow: none;
119
- }
120
-
121
- ._inlineForm_k5j2r_113 ._formGroup_k5j2r_10 + ._formGroup_k5j2r_10,
122
- ._inlineForm_k5j2r_113 ._formGroup_k5j2r_10 + [class*='_Button_'] {
123
- margin-left: 0.625rem;
124
- }
125
-
126
- ._label_k5j2r_118 {
127
- font-size: 0.8125rem;
128
- font-family: var(--lp-font-family-base);
129
- word-break: break-word;
130
- }
131
-
132
- ._labelDisabled_k5j2r_124 {
133
- color: var(--lp-color-gray-800);
134
- color: var(--lp-component-form-color-text-label-disabled);
135
- }
136
-
137
- ._labelOptional_k5j2r_128 {
138
- margin-left: 0.4em;
139
- color: var(--lp-color-text-ui-secondary);
140
- fill: var(--lp-color-text-ui-secondary);
141
- }
142
-
143
- ._compactTextField_k5j2r_134 ._label_k5j2r_118 {
144
- position: absolute;
145
- top: -2px;
146
- left: 10px;
147
- padding: 0 3px;
148
- color: var(--lp-color-text-ui-primary-base);
149
- opacity: 0;
150
- pointer-events: none;
151
- background-color: var(--lp-color-bg-ui-primary);
152
- transform-origin: 0 0; /* preserve left alignment after scaling */
153
- transition: all var(--lp-duration-100) ease-in-out;
154
- z-index: 1; /* Fixes layout issue in Firefox */
155
- }
156
-
157
- ._formGroup_k5j2r_10 ._label_k5j2r_118 {
158
- display: flex;
159
- align-items: center;
160
- margin-bottom: 0.125rem;
161
- }
162
-
163
- ._formGroup_k5j2r_10 ._label_k5j2r_118 + ._label_k5j2r_118 {
164
- margin-top: 0.3125rem;
165
- }
166
-
167
- ._fieldError_k5j2r_158 {
168
- color: var(--lp-color-text-feedback-error);
169
- font-size: 0.8125rem;
170
- }
171
-
172
- ._fieldError_k5j2r_158 svg {
173
- transform: translateY(-1px);
174
- }
175
-
176
- /* The margin for .formGroup and the min-height of .form-fieldError
177
- should be equal to avoid content shift when errors are shown */
178
-
179
- ._formIncreasedErrorMargin_k5j2r_18 ._fieldError_k5j2r_158 {
180
- min-height: 1.75rem;
181
- }
182
-
183
- ._label_k5j2r_118 ._fieldError_k5j2r_158 {
184
- float: right;
185
- }
186
-
187
- ._form_k5j2r_10:not(._inlineForm_k5j2r_113) ._fieldError_k5j2r_158 {
188
- display: block;
189
- padding-top: 0.3125rem;
190
- text-align: left;
191
- }
192
-
193
- ._formIncreasedErrorMargin_k5j2r_18:not(._inlineForm_k5j2r_113) ._fieldError_k5j2r_158 {
194
- padding-top: 0.0625rem;
195
- padding-bottom: 0.3125rem;
196
- }
197
-
198
- ._form_k5j2r_10 ._isInvalid_k5j2r_80 ._label_k5j2r_118 {
199
- color: var(--lp-color-text-feedback-error);
200
- }
201
-
202
- ._formInput_k5j2r_36::-moz-placeholder {
203
- color: var(--lp-color-text-field-placeholder);
204
- }
205
-
206
- ._formInput_k5j2r_36::placeholder {
207
- color: var(--lp-color-text-field-placeholder);
208
- }
209
-
210
- ._formIncreasedErrorMargin_k5j2r_18 ._formGroup_k5j2r_10._isInvalid_k5j2r_80 {
211
- margin-bottom: 0;
212
- }
213
-
214
- ._formIncreasedErrorMargin_k5j2r_18 ._formGroup_k5j2r_10._isInvalid_k5j2r_80 + ._formGroup_k5j2r_10 {
215
- margin-top: 0;
216
- }
217
-
218
- ._hint_k5j2r_204 {
219
- display: block;
220
- margin-top: 0.1875rem;
221
- font-size: 0.8125rem;
222
- font-weight: var(--lp-font-weight-regular);
223
- color: var(--lp-color-text-ui-secondary);
224
- }
225
-
226
- ._field_k5j2r_158 ._hint_k5j2r_204 {
227
- margin: 0;
228
- font-size: 0.8125rem;
229
- color: var(--lp-color-text-ui-secondary);
230
- fill: var(--lp-color-text-ui-secondary);
231
- }
232
-
233
- ._form_k5j2r_10 ._field_k5j2r_158 label,
234
- ._form_k5j2r_10 ._field_k5j2r_158 ._isInvalid_k5j2r_80 label {
235
- color: var(--lp-color-text-ui-primary-base);
236
- }
237
-
238
- ._fieldErrorMessage_k5j2r_224 {
239
- color: var(--lp-color-text-feedback-error);
240
- font-size: 0.8125rem;
241
- }
242
-
243
- ._field_k5j2r_158._formGroup_k5j2r_10 {
244
- margin: 0.625rem 0;
245
- }
246
-
247
- ._field_k5j2r_158._formGroup_k5j2r_10:first-child {
248
- margin-top: 0;
249
- }
250
-
251
- input._formInput_k5j2r_36:-moz-read-only {
252
- opacity: 1;
253
- background-color: var(--lp-color-bg-field-disabled);
254
- color: var(--lp-color-text-field-disabled);
255
- border-color: var(--lp-color-border-field-disabled);
256
- }
257
-
258
- ._formInput_k5j2r_36._isDisabled_k5j2r_237,
259
- input._formInput_k5j2r_36:disabled,
260
- select._formInput_k5j2r_36:disabled,
261
- input._formInput_k5j2r_36:read-only {
262
- opacity: 1;
263
- background-color: var(--lp-color-bg-field-disabled);
264
- color: var(--lp-color-text-field-disabled);
265
- border-color: var(--lp-color-border-field-disabled);
266
- }
267
-
268
- ._formInput_k5j2r_36._isDisabled_k5j2r_237:hover,
269
- ._formInput_k5j2r_36:disabled:hover {
270
- cursor: not-allowed;
271
- }
272
-
273
- textarea._formInput_k5j2r_36 {
274
- min-height: 2.5em;
275
- height: auto;
276
- resize: none;
277
- }
278
-
279
- textarea._formInput_k5j2r_36:-moz-read-only {
280
- opacity: 1;
281
- color: var(--lp-color-text-field-disabled);
282
- background-color: var(--lp-color-bg-field-disabled);
283
- border-color: var(--lp-color-border-field-disabled);
284
- }
285
-
286
- textarea._formInput_k5j2r_36:disabled,
287
- textarea._formInput_k5j2r_36:read-only {
288
- opacity: 1;
289
- color: var(--lp-color-text-field-disabled);
290
- background-color: var(--lp-color-bg-field-disabled);
291
- border-color: var(--lp-color-border-field-disabled);
292
- }
293
-
294
- input._formInput_k5j2r_36::-webkit-autofill {
295
- box-shadow: 0 0 0 50px var(--lp-color-bg-field-base) inset;
296
- }
297
-
298
- /* Hide the type=search cancel button in Webkit for consistency */
299
-
300
- input[type='search']::-webkit-search-decoration,
301
- input[type='search']::-webkit-search-cancel-button,
302
- input[type='search']::-webkit-search-results-button,
303
- input[type='search']::-webkit-search-results-decoration {
304
- display: none;
305
- }
306
-
307
- /* Hide the type=search cancel button in IE for consistency */
308
-
309
- input[type='text']::-ms-clear,
310
- input[type='text']::-ms-reveal {
311
- display: none;
312
- width: 0;
313
- height: 0;
314
- }
315
-
316
- input[type='search']::-ms-clear,
317
- input[type='search']::-ms-reveal {
318
- display: none;
319
- width: 0;
320
- height: 0;
321
- }
322
-
323
- input[type='checkbox']:disabled {
324
- pointer-events: none;
325
- }
326
-
327
- ._formInput_k5j2r_36[readonly],
328
- ._formInput_k5j2r_36[readonly]:focus {
329
- color: var(--lp-color-text-ui-secondary);
330
- border-color: var(--lp-color-gray-500);
331
- box-shadow: none;
332
- }
333
-
334
- ._checkbox_k5j2r_304 {
335
- align-self: flex-start; /* Default for .label is center, but this looks bad on multi-line checkbox labels */
336
- flex-shrink: 0; /* Make sure the input itself doesn't shrink in flex layouts */
337
- margin-right: 0.3125rem;
338
- margin-top: 0.25rem;
339
- }
340
-
341
- ._radio_k5j2r_311 {
342
- margin-right: 0.3125rem;
343
- }
344
-
345
- ._number_k5j2r_315 {
346
- min-width: 2.8125rem;
347
- }
348
-
349
- ._suffixContainer_k5j2r_75 {
350
- display: inline-flex;
351
- border: 1px solid var(--lp-color-border-field-base);
352
- border-radius: var(--lp-border-radius-regular);
353
- overflow: hidden;
354
- transition: all 0.1s linear;
355
- }
356
-
357
- ._suffixContainer_k5j2r_75:focus-within {
358
- border-color: var(--lp-color-border-field-focus);
359
- box-shadow: 0 0 0 3px hsla(232, 100%, 63%, 0.1);
360
- }
361
-
362
- ._suffixContainer_k5j2r_75 ._suffix_k5j2r_75 {
363
- padding: 0 2px;
364
- background-color: var(--lp-color-bg-field-aside);
365
- color: var(--lp-color-text-ui-secondary);
366
- cursor: text;
367
- display: inline-flex;
368
- align-items: center;
369
- position: static;
370
- position: initial;
371
- }
372
-
373
- ._suffix_k5j2r_75::-webkit-outer-spin-button,
374
- ._suffix_k5j2r_75::-webkit-inner-spin-button {
375
- -webkit-appearance: none;
376
- appearance: none;
377
- margin: 0;
378
- }
379
-
380
- /* Firefox */
381
-
382
- ._suffix_k5j2r_75[type='number'] {
383
- -webkit-appearance: textfield;
384
- -moz-appearance: textfield;
385
- appearance: textfield;
386
- }
387
-
388
- ._iconFieldIconFill_k5j2r_353 {
389
- fill: var(--lp-color-fill-field-base);
390
- }
391
-
392
- [class*='_Popover-target_']._iconFieldButton_k5j2r_357 {
393
- display: block;
394
- }
395
-
396
- ._formInputTiny_k5j2r_361 {
397
- padding: 0.0625rem 0.375rem;
398
- height: 1.5rem;
399
- }
400
-
401
- ._iconField_k5j2r_87 {
402
- position: relative;
403
- }
404
-
405
- ._requiredAsterisk_k5j2r_370 {
406
- color: var(--lp-color-text-feedback-error);
407
- }
408
-
409
- ._fieldSet_k5j2r_374 {
410
- border: none;
411
- margin: 1.25rem 0;
412
- padding: 0;
413
- }
414
-
415
- ._compactTextField_k5j2r_134 {
416
- position: relative;
417
- width: 100%;
418
- }
419
-
420
- ._compactTextField_k5j2r_134._isActive_k5j2r_385 ._label_k5j2r_118 {
421
- border-radius: var(--lp-border-radius-regular);
422
- opacity: 1;
423
- pointer-events: auto;
424
- transform: translate(0, -8px) scale(0.9); /* 2d transform to avoid webkit blurry text */
425
- }
426
-
427
- ._numberField_k5j2r_392 {
428
- display: flex;
429
- position: relative;
430
- }
431
-
432
- ._numberField_k5j2r_392 ._numberField-input_k5j2r_396 {
433
- padding-right: 1.5rem;
434
- }
435
-
436
- ._numberField_k5j2r_392 ._numberField-stepperContainer_k5j2r_400 {
437
- display: flex;
438
- opacity: 0;
439
- flex-direction: column;
440
- position: absolute;
441
- width: 1.5rem;
442
- top: 1px;
443
- bottom: 1px;
444
- right: 1px;
445
- transition: all var(--lp-duration-100) linear;
446
- }
447
-
448
- ._numberField_k5j2r_392 ._numberField-stepperContainer_k5j2r_400 ._numberField-stepper_k5j2r_400 {
449
- --numberField-stepper-padding: 0.25rem;
450
- --numberField-stepper-border-radius: calc(var(--lp-border-radius-regular) - 0.0625rem);
451
-
452
- background-color: var(--lp-color-bg-field-base);
453
- flex: auto;
454
- display: flex;
455
- justify-content: center;
456
- align-items: center;
457
- cursor: pointer;
458
- padding: 0 0.25rem;
459
- padding: 0 var(--numberField-stepper-padding);
460
- border: none;
461
- border-radius: 0;
462
- min-height: 1px;
463
- overflow: hidden;
464
- }
465
-
466
- ._numberField_k5j2r_392 ._numberField-stepperContainer_k5j2r_400 ._numberField-stepper_k5j2r_400:first-child {
467
- border-top-right-radius: var(--numberField-stepper-border-radius);
468
- padding-top: var(--numberField-stepper-padding);
469
- }
470
-
471
- ._numberField_k5j2r_392 ._numberField-stepperContainer_k5j2r_400 ._numberField-stepper_k5j2r_400:last-child {
472
- border-bottom-right-radius: var(--numberField-stepper-border-radius);
473
- padding-bottom: var(--numberField-stepper-padding);
474
- }
475
-
476
- ._numberField_k5j2r_392 ._numberField-stepperContainer_k5j2r_400 ._numberField-stepper_k5j2r_400:hover {
477
- background-color: var(--lp-color-bg-interactive-secondary-hover);
478
- }
479
-
480
- ._numberField_k5j2r_392 ._numberField-stepperContainer_k5j2r_400 ._numberField-stepper_k5j2r_400:active {
481
- background-color: var(--lp-color-bg-interactive-secondary-active);
482
- }
483
-
484
- ._numberField_k5j2r_392 ._numberField-stepperContainer_k5j2r_400 ._numberField-stepper_k5j2r_400 span:has(svg) {
485
- width: 100%;
486
- color: var(--lp-color-text-ui-primary-base);
487
- }
488
-
489
- ._numberField_k5j2r_392:hover ._numberField-stepperContainer_k5j2r_400, ._numberField_k5j2r_392:has(input:focus) ._numberField-stepperContainer_k5j2r_400 {
490
- opacity: 1;
491
- }
1
+ :root,[data-theme=default]{--lp-component-form-color-text-label-disabled:var(--lp-color-gray-800)}[data-theme=dark]{--lp-component-form-color-text-label-disabled:var(--lp-color-gray-400)}.QJPOUG_formGroup_{border:none;margin:1.25rem 0;padding:0}.QJPOUG_formIncreasedErrorMargin_ .QJPOUG_formGroup_{margin:1.75rem 0}.QJPOUG_formInline_ .QJPOUG_formGroup_{vertical-align:middle;margin:0;display:inline-block}.QJPOUG_form_ .QJPOUG_formGroup_:first-child{margin-top:0}.QJPOUG_form_ .QJPOUG_formGroup_:last-child{margin-bottom:0}.QJPOUG_formInput_{font-size:.8125rem;font-family:var(--lp-font-family-base);line-height:var(--lp-line-height-300);background-color:var(--lp-color-bg-field-base);color:var(--lp-color-text-ui-primary-base);border:1px solid var(--lp-color-border-field-base);border-radius:var(--lp-border-radius-regular);transition:all var(--lp-duration-100)linear;width:100%;height:2rem;padding:.375rem .625rem;display:block}.QJPOUG_formInput_:placeholder-shown{text-overflow:ellipsis;overflow:hidden}.QJPOUG_formInput_.QJPOUG_isFocused_,.QJPOUG_formInput_:focus{border-color:var(--lp-color-border-field-focus);outline:0;box-shadow:0 0 0 3px #405bff1a}select.QJPOUG_formInput_{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#0000;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7.41 8.84L12 13.42l4.59-4.58L18 10.25l-6 6-6-6 1.41-1.41z' fill='%23646f7a'/></svg>");background-position:right .4em top 50%,0 0;background-repeat:no-repeat;background-size:1.25rem;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;padding-right:1.25rem}.QJPOUG_suffixContainer_ .QJPOUG_formInput_{border-radius:var(--lp-border-radius-regular)0 0 var(--lp-border-radius-regular);border:none}.QJPOUG_isInvalid_ .QJPOUG_formInput_,.QJPOUG_form_ .QJPOUG_isInvalid_ .QJPOUG_formInput_,.QJPOUG_form_ .QJPOUG_isInvalid_ .Select-control,.QJPOUG_form_ .QJPOUG_isInvalid_ .CustomSelect>div{border-color:var(--lp-color-border-field-error)}.QJPOUG_iconField_.IconBefore .QJPOUG_formInput_{padding-left:1.875rem}.QJPOUG_iconField_.IconAfter .QJPOUG_formInput_{padding-right:1.875rem}.QJPOUG_iconFieldIcon_{position:absolute;top:50%;transform:translateY(-50%)}.QJPOUG_iconField_.IconBefore .QJPOUG_iconFieldIcon_{left:.625rem}.QJPOUG_iconField_.IconAfter .QJPOUG_iconFieldIcon_{right:.625rem}.QJPOUG_suffixContainer_ .QJPOUG_formInput_:focus{box-shadow:none}:is(.QJPOUG_inlineForm_ .QJPOUG_formGroup_+.QJPOUG_formGroup_,.QJPOUG_inlineForm_ .QJPOUG_formGroup_+[class*=_Button_]){margin-left:.625rem}.QJPOUG_label_{font-size:.8125rem;font-family:var(--lp-font-family-base);word-break:break-word}.QJPOUG_labelDisabled_{color:var(--lp-component-form-color-text-label-disabled)}.QJPOUG_labelOptional_{color:var(--lp-color-text-ui-secondary);fill:var(--lp-color-text-ui-secondary);margin-left:.4em}.QJPOUG_compactTextField_ .QJPOUG_label_{color:var(--lp-color-text-ui-primary-base);opacity:0;pointer-events:none;background-color:var(--lp-color-bg-ui-primary);transform-origin:0 0;transition:all var(--lp-duration-100)ease-in-out;z-index:1;padding:0 3px;position:absolute;top:-2px;left:10px}.QJPOUG_formGroup_ .QJPOUG_label_{align-items:center;margin-bottom:.125rem;display:flex}.QJPOUG_formGroup_ .QJPOUG_label_+.QJPOUG_label_{margin-top:.3125rem}.QJPOUG_fieldError_{color:var(--lp-color-text-feedback-error);font-size:.8125rem}.QJPOUG_fieldError_ svg{transform:translateY(-1px)}.QJPOUG_formIncreasedErrorMargin_ .QJPOUG_fieldError_{min-height:1.75rem}.QJPOUG_label_ .QJPOUG_fieldError_{float:right}.QJPOUG_form_:not(.QJPOUG_inlineForm_) .QJPOUG_fieldError_{text-align:left;padding-top:.3125rem;display:block}.QJPOUG_formIncreasedErrorMargin_:not(.QJPOUG_inlineForm_) .QJPOUG_fieldError_{padding-top:.0625rem;padding-bottom:.3125rem}.QJPOUG_form_ .QJPOUG_isInvalid_ .QJPOUG_label_{color:var(--lp-color-text-feedback-error)}.QJPOUG_formInput_::placeholder{color:var(--lp-color-text-field-placeholder)}.QJPOUG_formIncreasedErrorMargin_ .QJPOUG_formGroup_.QJPOUG_isInvalid_{margin-bottom:0}.QJPOUG_formIncreasedErrorMargin_ .QJPOUG_formGroup_.QJPOUG_isInvalid_+.QJPOUG_formGroup_{margin-top:0}.QJPOUG_hint_{font-size:.8125rem;font-weight:var(--lp-font-weight-regular);color:var(--lp-color-text-ui-secondary);margin-top:.1875rem;display:block}.QJPOUG_field_ .QJPOUG_hint_{color:var(--lp-color-text-ui-secondary);fill:var(--lp-color-text-ui-secondary);margin:0;font-size:.8125rem}.QJPOUG_form_ .QJPOUG_field_ label,.QJPOUG_form_ .QJPOUG_field_ .QJPOUG_isInvalid_ label{color:var(--lp-color-text-ui-primary-base)}.QJPOUG_fieldErrorMessage_{color:var(--lp-color-text-feedback-error);font-size:.8125rem}.QJPOUG_field_.QJPOUG_formGroup_{margin:.625rem 0}.QJPOUG_field_.QJPOUG_formGroup_:first-child{margin-top:0}.QJPOUG_formInput_.QJPOUG_isDisabled_,input.QJPOUG_formInput_:disabled,select.QJPOUG_formInput_:disabled,input.QJPOUG_formInput_:read-only{opacity:1;background-color:var(--lp-color-bg-field-disabled);color:var(--lp-color-text-field-disabled);border-color:var(--lp-color-border-field-disabled)}.QJPOUG_formInput_.QJPOUG_isDisabled_:hover,.QJPOUG_formInput_:disabled:hover{cursor:not-allowed}textarea.QJPOUG_formInput_{resize:none;height:auto;min-height:2.5em}textarea.QJPOUG_formInput_:disabled,textarea.QJPOUG_formInput_:read-only{opacity:1;color:var(--lp-color-text-field-disabled);background-color:var(--lp-color-bg-field-disabled);border-color:var(--lp-color-border-field-disabled)}input.QJPOUG_formInput_::-webkit-autofill{box-shadow:0 0 0 50px var(--lp-color-bg-field-base)inset}input[type=search]::-webkit-search-decoration{display:none}input[type=search]::-webkit-search-cancel-button{display:none}input[type=search]::-webkit-search-results-button{display:none}input[type=search]::-webkit-search-results-decoration{display:none}input[type=text]::-ms-clear{width:0;height:0;display:none}input[type=text]::-ms-reveal{width:0;height:0;display:none}input[type=search]::-ms-clear{width:0;height:0;display:none}input[type=search]::-ms-reveal{width:0;height:0;display:none}input[type=checkbox]:disabled{pointer-events:none}.QJPOUG_formInput_[readonly],.QJPOUG_formInput_[readonly]:focus{color:var(--lp-color-text-ui-secondary);border-color:var(--lp-color-gray-500);box-shadow:none}.QJPOUG_checkbox_{flex-shrink:0;align-self:flex-start;margin-top:.25rem;margin-right:.3125rem}.QJPOUG_radio_{margin-right:.3125rem}.QJPOUG_number_{min-width:2.8125rem}.QJPOUG_suffixContainer_{border:1px solid var(--lp-color-border-field-base);border-radius:var(--lp-border-radius-regular);transition:all .1s linear;display:inline-flex;overflow:hidden}.QJPOUG_suffixContainer_:focus-within{border-color:var(--lp-color-border-field-focus);box-shadow:0 0 0 3px #405bff1a}.QJPOUG_suffixContainer_ .QJPOUG_suffix_{background-color:var(--lp-color-bg-field-aside);color:var(--lp-color-text-ui-secondary);cursor:text;position:initial;align-items:center;padding:0 2px;display:inline-flex}.QJPOUG_suffix_::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.QJPOUG_suffix_::-webkit-inner-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.QJPOUG_suffix_[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.QJPOUG_iconFieldIconFill_{fill:var(--lp-color-fill-field-base)}[class*=_Popover-target_].QJPOUG_iconFieldButton_{display:block}.QJPOUG_formInputTiny_{height:1.5rem;padding:.0625rem .375rem}.QJPOUG_iconField_{position:relative}.QJPOUG_requiredAsterisk_{color:var(--lp-color-text-feedback-error)}.QJPOUG_fieldSet_{border:none;margin:1.25rem 0;padding:0}.QJPOUG_compactTextField_{width:100%;position:relative}.QJPOUG_compactTextField_.QJPOUG_isActive_ .QJPOUG_label_{border-radius:var(--lp-border-radius-regular);opacity:1;pointer-events:auto;transform:matrix(.9,0,0,.9,0,-8)}.QJPOUG_numberField_{display:flex;position:relative}.QJPOUG_numberField_ .QJPOUG_numberField-input_{padding-right:1.5rem}.QJPOUG_numberField_ .QJPOUG_numberField-stepperContainer_{opacity:0;transition:all var(--lp-duration-100)linear;flex-direction:column;width:1.5rem;display:flex;position:absolute;top:1px;bottom:1px;right:1px}.QJPOUG_numberField_ .QJPOUG_numberField-stepperContainer_ .QJPOUG_numberField-stepper_{--numberField-stepper-padding:.25rem;--numberField-stepper-border-radius:calc(var(--lp-border-radius-regular) - .0625rem);background-color:var(--lp-color-bg-field-base);cursor:pointer;padding:0 var(--numberField-stepper-padding);border:none;border-radius:0;flex:auto;justify-content:center;align-items:center;min-height:1px;display:flex;overflow:hidden}.QJPOUG_numberField_ .QJPOUG_numberField-stepperContainer_ .QJPOUG_numberField-stepper_:first-child{border-top-right-radius:var(--numberField-stepper-border-radius);padding-top:var(--numberField-stepper-padding)}.QJPOUG_numberField_ .QJPOUG_numberField-stepperContainer_ .QJPOUG_numberField-stepper_:last-child{border-bottom-right-radius:var(--numberField-stepper-border-radius);padding-bottom:var(--numberField-stepper-padding)}.QJPOUG_numberField_ .QJPOUG_numberField-stepperContainer_ .QJPOUG_numberField-stepper_:hover{background-color:var(--lp-color-bg-interactive-secondary-hover)}.QJPOUG_numberField_ .QJPOUG_numberField-stepperContainer_ .QJPOUG_numberField-stepper_:active{background-color:var(--lp-color-bg-interactive-secondary-active)}.QJPOUG_numberField_ .QJPOUG_numberField-stepperContainer_ .QJPOUG_numberField-stepper_ span:has(svg){color:var(--lp-color-text-ui-primary-base);width:100%}.QJPOUG_numberField_:has(input:focus) .QJPOUG_numberField-stepperContainer_{opacity:1}.QJPOUG_numberField_:hover .QJPOUG_numberField-stepperContainer_{opacity:1}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@launchpad-ui/form",
3
- "version": "0.10.12",
3
+ "version": "0.10.13",
4
4
  "status": "beta",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -28,14 +28,14 @@
28
28
  "dependencies": {
29
29
  "@react-aria/button": "3.9.1",
30
30
  "@react-aria/i18n": "3.10.0",
31
- "@react-aria/numberfield": "3.10.1",
31
+ "@react-aria/numberfield": "3.10.2",
32
32
  "@react-aria/visually-hidden": "3.8.8",
33
33
  "@react-stately/numberfield": "3.8.0",
34
34
  "classix": "2.1.17",
35
- "@launchpad-ui/button": "~0.11.10",
36
- "@launchpad-ui/icons": "~0.14.10",
35
+ "@launchpad-ui/button": "~0.11.11",
36
+ "@launchpad-ui/icons": "~0.15.0",
37
37
  "@launchpad-ui/tokens": "~0.9.3",
38
- "@launchpad-ui/tooltip": "~0.8.9"
38
+ "@launchpad-ui/tooltip": "~0.8.10"
39
39
  },
40
40
  "peerDependencies": {
41
41
  "react": "18.2.0",