@launchpad-ui/form 0.6.5-alpha.0 → 0.6.5-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/dist/Checkbox.d.ts +19 -0
  2. package/dist/Checkbox.d.ts.map +1 -0
  3. package/dist/CompactTextField.d.ts +20 -0
  4. package/dist/CompactTextField.d.ts.map +1 -0
  5. package/dist/FieldError.d.ts +12 -0
  6. package/dist/FieldError.d.ts.map +1 -0
  7. package/dist/FieldSet.d.ts +9 -0
  8. package/dist/FieldSet.d.ts.map +1 -0
  9. package/dist/Form.d.ts +11 -0
  10. package/dist/Form.d.ts.map +1 -0
  11. package/dist/FormField.d.ts +20 -0
  12. package/dist/FormField.d.ts.map +1 -0
  13. package/dist/FormGroup.d.ts +12 -0
  14. package/dist/FormGroup.d.ts.map +1 -0
  15. package/dist/FormHint.d.ts +9 -0
  16. package/dist/FormHint.d.ts.map +1 -0
  17. package/dist/IconField.d.ts +12 -0
  18. package/dist/IconField.d.ts.map +1 -0
  19. package/dist/Label.d.ts +12 -0
  20. package/dist/Label.d.ts.map +1 -0
  21. package/dist/Radio.d.ts +11 -0
  22. package/dist/Radio.d.ts.map +1 -0
  23. package/dist/RadioGroup.d.ts +42 -0
  24. package/dist/RadioGroup.d.ts.map +1 -0
  25. package/dist/RequiredAsterisk.d.ts +9 -0
  26. package/dist/RequiredAsterisk.d.ts.map +1 -0
  27. package/dist/Select.d.ts +9 -0
  28. package/dist/Select.d.ts.map +1 -0
  29. package/dist/TextArea.d.ts +11 -0
  30. package/dist/TextArea.d.ts.map +1 -0
  31. package/dist/TextField.d.ts +17 -0
  32. package/dist/TextField.d.ts.map +1 -0
  33. package/dist/index.d.ts +33 -0
  34. package/dist/index.d.ts.map +1 -0
  35. package/dist/index.es.js +468 -0
  36. package/dist/index.es.js.map +1 -0
  37. package/dist/index.js +468 -0
  38. package/dist/index.js.map +1 -0
  39. package/dist/style.css +402 -0
  40. package/dist/utils/index.d.ts +5 -0
  41. package/dist/utils/index.d.ts.map +1 -0
  42. package/package.json +2 -2
package/dist/style.css ADDED
@@ -0,0 +1,402 @@
1
+ .RequiredAsterisk {
2
+ color: var(--color-system-red-700);
3
+ }
4
+ .Form-group {
5
+ margin: 2rem 0;
6
+ }
7
+
8
+ /* The margin for .Form-group and the min-height of .Form-fieldError
9
+ should be equal to avoid content shift when errors are shown */
10
+
11
+ .Form--increasedErrorMargin .Form-group {
12
+ margin: 2.8rem 0;
13
+ }
14
+
15
+ .Form--inline .Form-group {
16
+ display: inline-block;
17
+ vertical-align: middle;
18
+ margin: 0;
19
+ }
20
+
21
+ .Form .Form-group:first-child {
22
+ margin-top: 0;
23
+ }
24
+
25
+ .Form .Form-group:last-child {
26
+ margin-bottom: 0;
27
+ }
28
+
29
+ .Form--inline .Form-group + .Form-group,
30
+ .Form--inline .Form-group + .Button {
31
+ margin-left: 1rem;
32
+ }
33
+
34
+ .Form-label {
35
+ font-size: 1.3rem;
36
+ font-family: var(--font-family-base);
37
+ word-break: break-word;
38
+ }
39
+
40
+ .Form-label--disabled {
41
+ color: var(--color-gray-800);
42
+ }
43
+
44
+ .Form-labelOptional {
45
+ margin-left: 0.4em;
46
+ color: var(--color-text-subtle-primary);
47
+ fill: var(--color-text-subtle-primary);
48
+ }
49
+
50
+ .Form-group .Form-label {
51
+ display: flex;
52
+ align-items: center;
53
+ margin-bottom: 0.2rem;
54
+ }
55
+
56
+ .u-d-inline .Form-label + .Form-label {
57
+ margin-left: 1rem;
58
+ }
59
+
60
+ .Form-group .Form-label + .Form-label {
61
+ margin-top: 0.5rem;
62
+ }
63
+
64
+ .Form .Form-error {
65
+ background: var(--color-system-red-600);
66
+ color: var(--color-white);
67
+ font-weight: var(--font-weight-regular);
68
+ padding: 0.7rem 1.4rem;
69
+ border-radius: var(--border-radius);
70
+ }
71
+
72
+ .Form-fieldError {
73
+ color: var(--color-system-red-600);
74
+ font-size: 1.3rem;
75
+ }
76
+
77
+ /* The margin for .Form-group and the min-height of .Form-fieldError
78
+ should be equal to avoid content shift when errors are shown */
79
+
80
+ .Form--increasedErrorMargin .Form-fieldError {
81
+ min-height: 2.8rem;
82
+ }
83
+
84
+ .Form-label .Form-fieldError {
85
+ float: right;
86
+ }
87
+
88
+ .Form:not(.Form--inline) .Form-fieldError {
89
+ display: block;
90
+ padding-top: 0.5rem;
91
+ text-align: left;
92
+ }
93
+
94
+ .Form--increasedErrorMargin:not(.Form--inline) .Form-fieldError {
95
+ padding-top: 0.1rem;
96
+ padding-bottom: 0.5rem;
97
+ }
98
+
99
+ .Form .is-invalid .Form-label {
100
+ color: var(--color-system-red-600);
101
+ }
102
+
103
+ ::-moz-placeholder {
104
+ color: var(--color-gray-600);
105
+ }
106
+
107
+ ::placeholder {
108
+ color: var(--color-gray-600);
109
+ }
110
+
111
+ .Form .is-invalid .Select-control,
112
+ .Form .is-invalid .CustomSelect > div,
113
+ .Form .is-invalid .FormInput {
114
+ border-color: var(--color-system-red-600);
115
+ }
116
+
117
+ .Form--increasedErrorMargin .Form-group.is-invalid {
118
+ margin-bottom: 0;
119
+ }
120
+
121
+ .Form--increasedErrorMargin .Form-group.is-invalid + .Form-group {
122
+ margin-top: 0;
123
+ }
124
+
125
+ .Form--increasedErrorMargin .Form-group.is-invalid + .Form-hint {
126
+ margin-top: 0;
127
+ }
128
+ /* stylelint-disable no-descending-specificity */
129
+
130
+ .FormInput {
131
+ display: block;
132
+ width: 100%;
133
+ padding: 0.6rem 1rem;
134
+ font-size: 1.3rem;
135
+ font-family: var(--font-family-base);
136
+ line-height: var(--line-height-base);
137
+ background-color: var(--color-background-field);
138
+ color: var(--color-text);
139
+ border: 1px solid var(--color-gray-500);
140
+ border-radius: var(--border-radius);
141
+ transition: all 100ms linear;
142
+ }
143
+
144
+ .FormInput:-moz-placeholder-shown {
145
+ overflow: hidden;
146
+ text-overflow: ellipsis;
147
+ }
148
+
149
+ .FormInput:placeholder-shown {
150
+ overflow: hidden;
151
+ text-overflow: ellipsis;
152
+ }
153
+
154
+ input.FormInput,
155
+ select.FormInput {
156
+ height: 3.2rem;
157
+ }
158
+
159
+ input.FormInput:-moz-read-only {
160
+ background-color: var(--color-white-100);
161
+ }
162
+
163
+ .FormInput.is-disabled,
164
+ input.FormInput:disabled,
165
+ select.FormInput:disabled,
166
+ input.FormInput:read-only {
167
+ background-color: var(--color-white-100);
168
+ }
169
+
170
+ .FormInput.is-disabled:hover,
171
+ .FormInput:disabled:hover {
172
+ cursor: not-allowed;
173
+ }
174
+
175
+ textarea.FormInput {
176
+ min-height: 2.5em;
177
+ resize: none;
178
+ }
179
+
180
+ textarea.FormInput:-moz-read-only {
181
+ background-color: var(--color-white-100);
182
+ }
183
+
184
+ textarea.FormInput:disabled,
185
+ textarea.FormInput:read-only {
186
+ background-color: var(--color-white-100);
187
+ }
188
+
189
+ input.FormInput::-webkit-autofill {
190
+ box-shadow: 0 0 0 50px var(--color-background-field) inset;
191
+ }
192
+
193
+ /* Hide the type=search cancel button in Webkit for consistency */
194
+
195
+ input[type='search']::-webkit-search-decoration,
196
+ input[type='search']::-webkit-search-cancel-button,
197
+ input[type='search']::-webkit-search-results-button,
198
+ input[type='search']::-webkit-search-results-decoration {
199
+ display: none;
200
+ }
201
+
202
+ /* Hide the type=search cancel button in IE for consistency */
203
+
204
+ input[type='text']::-ms-clear,
205
+ input[type='text']::-ms-reveal {
206
+ display: none;
207
+ width: 0;
208
+ height: 0;
209
+ }
210
+
211
+ input[type='search']::-ms-clear,
212
+ input[type='search']::-ms-reveal {
213
+ display: none;
214
+ width: 0;
215
+ height: 0;
216
+ }
217
+
218
+ input[type='checkbox']:disabled {
219
+ pointer-events: none;
220
+ }
221
+
222
+ input.FormInput--tiny {
223
+ padding: 0.1rem 0.6rem;
224
+ height: 2.4rem;
225
+ }
226
+
227
+ .FormInput.is-focused,
228
+ .FormInput:focus {
229
+ outline: 0;
230
+ border-color: var(--color-focus);
231
+ box-shadow: 0 0 0 3px hsla(231.5, 100%, 62.5%, 0.1);
232
+ }
233
+
234
+ .FormInput[readonly],
235
+ .FormInput[readonly]:focus {
236
+ color: var(--color-text-subtle-primary);
237
+ border-color: var(--color-gray-500);
238
+ box-shadow: none;
239
+ }
240
+
241
+ .Form-checkbox {
242
+ align-self: flex-start; /* Default for .Form-label is center, but this looks bad on multi-line checkbox labels */
243
+ flex-shrink: 0; /* Make sure the input itself doesn't shrink in flex layouts */
244
+ margin-right: 0.5rem;
245
+ margin-top: 0.4rem;
246
+ }
247
+
248
+ .Form-radio {
249
+ margin-right: 0.5rem;
250
+ }
251
+
252
+ .FormInput-select {
253
+ -webkit-appearance: none;
254
+ -moz-appearance: none;
255
+ appearance: none;
256
+ background: transparent;
257
+ 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>');
258
+ background-size: 2rem;
259
+ background-repeat: no-repeat;
260
+ background-position: right 0.4em top 50%, 0 0;
261
+ padding-right: 2rem;
262
+ }
263
+
264
+ .FormInput-number {
265
+ min-width: 4.5rem;
266
+ }
267
+
268
+ .FormInput-suffixContainer {
269
+ display: inline-flex;
270
+ border: 1px solid var(--color-gray-500);
271
+ border-radius: var(--border-radius);
272
+ overflow: hidden;
273
+ transition: all 0.1s linear;
274
+ }
275
+
276
+ .FormInput-suffixContainer[focus-within] {
277
+ border-color: var(--color-focus);
278
+ box-shadow: 0 0 0 3px hsla(231.5, 100%, 62.5%, 0.1);
279
+ }
280
+
281
+ .FormInput-suffixContainer[focus-within] {
282
+ border-color: var(--color-focus);
283
+ box-shadow: 0 0 0 3px hsla(231.5, 100%, 62.5%, 0.1);
284
+ }
285
+
286
+ .FormInput-suffixContainer:focus-within {
287
+ border-color: var(--color-focus);
288
+ box-shadow: 0 0 0 3px hsla(231.5, 100%, 62.5%, 0.1);
289
+ }
290
+
291
+ .FormInput-suffixContainer .FormInput {
292
+ border: none;
293
+ border-radius: var(--border-radius) 0 0 var(--border-radius);
294
+ }
295
+
296
+ .FormInput-suffixContainer .FormInput:focus {
297
+ box-shadow: none;
298
+ }
299
+
300
+ .FormInput-suffixContainer label.FormInput-suffix {
301
+ padding: 0 2px;
302
+ background-color: var(--color-gray-100);
303
+ color: var(--color-gray-500);
304
+ cursor: text;
305
+ display: inline-flex;
306
+ align-items: center;
307
+ position: static;
308
+ position: initial;
309
+ }
310
+
311
+ input.FormInput-suffix::-webkit-outer-spin-button,
312
+ input.FormInput-suffix::-webkit-inner-spin-button {
313
+ -webkit-appearance: none;
314
+ appearance: none;
315
+ margin: 0;
316
+ }
317
+
318
+ /* Firefox */
319
+
320
+ input.FormInput-suffix[type='number'] {
321
+ -webkit-appearance: textfield;
322
+ -moz-appearance: textfield;
323
+ appearance: textfield;
324
+ }
325
+
326
+ /* stylelint-enable no-descending-specificity */
327
+ .CompactTextField {
328
+ position: relative;
329
+ width: 100%;
330
+ }
331
+
332
+ .CompactTextField .Form-label {
333
+ position: absolute;
334
+ top: -2px;
335
+ left: 10px;
336
+ padding: 0 3px;
337
+ color: var(--color-text);
338
+ opacity: 0;
339
+ pointer-events: none;
340
+ background-color: var(--color-background);
341
+ transform-origin: 0 0; /* preserve left alignment after scaling */
342
+ transition: all 100ms ease-in-out;
343
+ z-index: 1; /* Fixes layout issue in Firefox */
344
+ }
345
+
346
+ .CompactTextField.is-active .Form-label {
347
+ border-radius: var(--border-radius);
348
+ opacity: 1;
349
+ pointer-events: auto;
350
+ transform: translate(0, -8px) scale(0.9); /* 2d transform to avoid webkit blurry text */
351
+ }
352
+ .FieldSet {
353
+ border: none;
354
+ margin: 2rem 0;
355
+ padding: 0;
356
+ }
357
+ .Form-hint {
358
+ display: block;
359
+ margin-top: 0.3rem;
360
+ font-size: 1.3rem;
361
+ font-weight: var(--font-weight-regular);
362
+ color: var(--color-text-subtle-primary);
363
+ }
364
+ .FormField-hint {
365
+ margin: 0;
366
+ font-size: 1.3rem;
367
+ color: var(--color-text-subtle-primary);
368
+ fill: var(--color-text-subtle-primary);
369
+ }
370
+
371
+ .Form .FormField .Form-label,
372
+ .Form .FormField .is-invalid .Form-label {
373
+ color: var(--color-text);
374
+ }
375
+
376
+ .FormField-errorMessage {
377
+ color: var(--color-system-red-600);
378
+ font-size: 1.3rem;
379
+ }
380
+
381
+ .FormField.Form-group {
382
+ margin: 1rem 0;
383
+ }
384
+
385
+ .FormField.Form-group:first-child {
386
+ margin-top: 0;
387
+ }
388
+ .IconField {
389
+ position: relative;
390
+ }
391
+
392
+ .IconField .FormInput {
393
+ padding-left: 3rem;
394
+ }
395
+
396
+ .FormInput ~ .Icon {
397
+ position: absolute;
398
+ fill: var(--color-gray-600);
399
+ top: 50%;
400
+ transform: translateY(-50%);
401
+ left: 1rem;
402
+ }
@@ -0,0 +1,5 @@
1
+ declare type FieldPath = string | string[];
2
+ declare const createFieldErrorId: (fieldIdentifier?: FieldPath) => string | undefined;
3
+ export { createFieldErrorId };
4
+ export type { FieldPath };
5
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,aAAK,SAAS,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;AAEnC,QAAA,MAAM,kBAAkB,qBAAsB,SAAS,uBACe,CAAC;AAEvE,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@launchpad-ui/form",
3
- "version": "0.6.5-alpha.0",
3
+ "version": "0.6.5-alpha.2",
4
4
  "status": "beta",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -26,7 +26,7 @@
26
26
  },
27
27
  "source": "src/index.ts",
28
28
  "dependencies": {
29
- "@launchpad-ui/icons": "~0.5.4-alpha.0",
29
+ "@launchpad-ui/icons": "~0.5.4-alpha.2",
30
30
  "@launchpad-ui/tokens": "~0.1.5",
31
31
  "@react-aria/visually-hidden": "^3.4.0",
32
32
  "classix": "^2.1.13"