@trackunit/react-form-components 0.0.1

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 (96) hide show
  1. package/README.md +24 -0
  2. package/index.cjs +1274 -0
  3. package/index.css +259 -0
  4. package/index.js +1210 -0
  5. package/package.json +21 -0
  6. package/src/components/ActionButton/ActionButton.d.ts +26 -0
  7. package/src/components/ActionButton/index.d.ts +1 -0
  8. package/src/components/BaseInput/BaseInput.d.ts +62 -0
  9. package/src/components/BaseInput/index.d.ts +1 -0
  10. package/src/components/Checkbox/CheckIcon.d.ts +12 -0
  11. package/src/components/Checkbox/Checkbox.d.ts +48 -0
  12. package/src/components/Checkbox/IndeterminateIcon.d.ts +10 -0
  13. package/src/components/Checkbox/index.d.ts +1 -0
  14. package/src/components/DateField/DateField.d.ts +19 -0
  15. package/src/components/DateInput/DateInput.d.ts +28 -0
  16. package/src/components/DropZone/DropZone.d.ts +34 -0
  17. package/src/components/EmailField/EmailField.d.ts +17 -0
  18. package/src/components/EmailInput/EmailInput.d.ts +13 -0
  19. package/src/components/EmailInput/index.d.ts +1 -0
  20. package/src/components/FormGroup/FormGroup.d.ts +39 -0
  21. package/src/components/Label/Label.d.ts +34 -0
  22. package/src/components/Label/index.d.ts +1 -0
  23. package/src/components/NumberField/NumberField.d.ts +19 -0
  24. package/src/components/NumberInput/NumberInput.d.ts +12 -0
  25. package/src/components/PhoneField/PhoneField.d.ts +28 -0
  26. package/src/components/PhoneInput/CountryCodeSelect.d.ts +16 -0
  27. package/src/components/PhoneInput/CountryCodes.d.ts +5 -0
  28. package/src/components/PhoneInput/PhoneInput.d.ts +25 -0
  29. package/src/components/PhoneInput/index.d.ts +1 -0
  30. package/src/components/RadioGroup/RadioGroup.d.ts +57 -0
  31. package/src/components/RadioGroup/RadioGroupContext.d.ts +11 -0
  32. package/src/components/RadioGroup/RadioItem.d.ts +23 -0
  33. package/src/components/RadioGroup/index.d.ts +2 -0
  34. package/src/components/Search/Search.d.ts +62 -0
  35. package/src/components/Search/index.d.ts +1 -0
  36. package/src/components/Select/CreatableSelect.d.ts +38 -0
  37. package/src/components/Select/FieldContainer.d.ts +20 -0
  38. package/src/components/Select/Select.d.ts +18 -0
  39. package/src/components/Select/SelectMenuItem/SelectMenuItem.d.ts +49 -0
  40. package/src/components/Select/TagWithWidth.d.ts +17 -0
  41. package/src/components/Select/TagsContainer.d.ts +45 -0
  42. package/src/components/Select/index.d.ts +7 -0
  43. package/src/components/Select/shared.d.ts +15 -0
  44. package/src/components/Select/useCustomComponents.d.ts +19 -0
  45. package/src/components/Select/useCustomStyles.d.ts +14 -0
  46. package/src/components/Select/useSelect.d.ts +143 -0
  47. package/src/components/TextArea/TextArea.d.ts +30 -0
  48. package/src/components/TextArea/index.d.ts +1 -0
  49. package/src/components/TextAreaField/TextAreaField.d.ts +18 -0
  50. package/src/components/TextAreaField/index.d.ts +1 -0
  51. package/src/components/TextField/TextField.d.ts +24 -0
  52. package/src/components/TextField/TextLenghtIndicator.d.ts +19 -0
  53. package/src/components/TextField/index.d.ts +1 -0
  54. package/src/components/TextInput/TextInput.d.ts +12 -0
  55. package/src/components/Toggle/Toggle.d.ts +57 -0
  56. package/src/components/Toggle/index.d.ts +1 -0
  57. package/src/components/UploadField/UploadField.d.ts +15 -0
  58. package/src/components/UploadInput/UploadInput.d.ts +33 -0
  59. package/src/index.d.ts +24 -0
  60. package/src/test-utils/hooks.d.ts +4 -0
  61. package/src/test-utils/test-utils.d.ts +5 -0
  62. package/src/translation.d.ts +34 -0
  63. package/translation.cjs +7 -0
  64. package/translation.js +5 -0
  65. package/translation10.cjs +7 -0
  66. package/translation10.js +5 -0
  67. package/translation11.cjs +7 -0
  68. package/translation11.js +5 -0
  69. package/translation12.cjs +7 -0
  70. package/translation12.js +5 -0
  71. package/translation13.cjs +7 -0
  72. package/translation13.js +5 -0
  73. package/translation14.cjs +7 -0
  74. package/translation14.js +5 -0
  75. package/translation15.cjs +7 -0
  76. package/translation15.js +5 -0
  77. package/translation16.cjs +7 -0
  78. package/translation16.js +5 -0
  79. package/translation17.cjs +7 -0
  80. package/translation17.js +5 -0
  81. package/translation2.cjs +7 -0
  82. package/translation2.js +5 -0
  83. package/translation3.cjs +7 -0
  84. package/translation3.js +5 -0
  85. package/translation4.cjs +7 -0
  86. package/translation4.js +5 -0
  87. package/translation5.cjs +7 -0
  88. package/translation5.js +5 -0
  89. package/translation6.cjs +7 -0
  90. package/translation6.js +5 -0
  91. package/translation7.cjs +7 -0
  92. package/translation7.js +5 -0
  93. package/translation8.cjs +7 -0
  94. package/translation8.js +5 -0
  95. package/translation9.cjs +7 -0
  96. package/translation9.js +5 -0
package/index.css ADDED
@@ -0,0 +1,259 @@
1
+ /* CSS related to the Label component */
2
+
3
+ .tu-label {
4
+ @apply text-base
5
+ text-slate-700
6
+ overflow-hidden
7
+ whitespace-nowrap
8
+ text-ellipsis
9
+ hover:text-slate-800
10
+ group-hover:text-slate-800
11
+ active:text-slate-800
12
+ group-active:text-slate-800;
13
+
14
+ &--invalid {
15
+ @apply text-red-600
16
+ hover:text-red-700
17
+ group-hover:text-red-700
18
+ active:text-red-700
19
+ group-active:text-red-700;
20
+ }
21
+
22
+ &--disabled {
23
+ @apply text-slate-400
24
+ hover:text-slate-400
25
+ group-hover:text-slate-400;
26
+ }
27
+ }
28
+
29
+ /* CSS related to the RadioGroup component */
30
+ .tu-radiogroup {
31
+ @apply flex
32
+ gap-2
33
+ flex-col
34
+ items-start;
35
+
36
+ &--inline {
37
+ @apply flex
38
+ gap-3
39
+ flex-row
40
+ items-center;
41
+ }
42
+ }
43
+
44
+ .tu-radioitem {
45
+ @apply w-4
46
+ h-4
47
+ appearance-none
48
+ rounded-3xl
49
+ bg-white
50
+ border-solid
51
+ border
52
+ border-slate-300
53
+ shadow-sm
54
+ shrink-0
55
+ transition
56
+ box-border
57
+ hover:cursor-pointer
58
+ hover:bg-slate-100
59
+ focus:ring-2
60
+ focus:ring-offset-2
61
+ focus:ring-blue-700;
62
+
63
+ &__wrapper {
64
+ @apply flex
65
+ gap-2
66
+ items-center;
67
+ }
68
+
69
+ &--checked {
70
+ @apply border-solid
71
+ border-4
72
+ border-blue-600
73
+ bg-white
74
+ hover:bg-slate-100
75
+ hover:cursor-pointer
76
+ outline-0
77
+ active:bg-slate-200
78
+ active:ring-2
79
+ active:ring-offset-2
80
+ active:ring-blue-700
81
+ focus:bg-slate-200
82
+ focus:ring-2
83
+ focus:ring-offset-2
84
+ focus:ring-blue-700
85
+ group-active:ring-2
86
+ group-active:ring-offset-2
87
+ group-active:ring-blue-700;
88
+ }
89
+
90
+ &--invalid {
91
+ @apply border-red-600
92
+ active:ring-red-700
93
+ focus:ring-red-700
94
+ group-focus:ring-2
95
+ group-focus:ring-offset-2;
96
+ }
97
+
98
+ &--disabled {
99
+ @apply bg-slate-400
100
+ border-slate-300
101
+ cursor-not-allowed
102
+ group-hover:bg-slate-400
103
+ group-focus:bg-slate-400
104
+ hover:bg-slate-400
105
+ focus:bg-slate-400
106
+ active:bg-slate-400
107
+ focus:ring-0
108
+ focus:ring-offset-0
109
+ group-active:ring-0
110
+ group-active:ring-offset-0;
111
+ }
112
+
113
+ &--disabled.tu-radioitem--checked {
114
+ @apply bg-white;
115
+ }
116
+
117
+ &__label-container {
118
+ @apply gap-y-1
119
+ grid;
120
+ }
121
+
122
+ &__description {
123
+ @apply text-sm
124
+ font-normal
125
+ text-slate-500
126
+ text-left
127
+ whitespace-nowrap
128
+ text-ellipsis
129
+ overflow-hidden;
130
+
131
+ &--disabled {
132
+ @apply text-slate-400
133
+ hover:text-slate-400
134
+ group-hover:text-slate-400;
135
+ }
136
+ }
137
+ }
138
+
139
+ /* CSS related to the toggle component */
140
+ .tu-toggle {
141
+ @apply rounded-full
142
+ bg-white
143
+ h-full
144
+ aspect-square
145
+ translate-x-0
146
+ transition-all;
147
+
148
+ &__wrapper {
149
+ @apply flex
150
+ gap-2;
151
+ }
152
+
153
+ &__input-container {
154
+ @apply flex
155
+ self-start
156
+ w-fit
157
+ active:shadow
158
+ rounded-full
159
+ cursor-pointer
160
+ focus-within:ring
161
+ focus-within:ring-offset-2
162
+ focus-within:ring-blue-700;
163
+ }
164
+
165
+ &__input {
166
+ @apply absolute
167
+ opacity-0
168
+ -z-10;
169
+ }
170
+
171
+ &__switch-container {
172
+ @apply flex
173
+ items-center
174
+ p-1
175
+ cursor-pointer
176
+ rounded-full
177
+ bg-slate-300
178
+ focus:bg-slate-400
179
+ hover:bg-slate-400
180
+ active:bg-slate-500;
181
+ }
182
+
183
+ &__switch {
184
+ @apply bg-white
185
+ rounded-full
186
+ h-full
187
+ w-5/12
188
+ aspect-square
189
+ translate-x-4
190
+ transition-all;
191
+ }
192
+
193
+ &--medium {
194
+ @apply flex
195
+ items-center
196
+ p-1
197
+ cursor-pointer
198
+ w-9
199
+ h-5;
200
+ }
201
+
202
+ &--small {
203
+ @apply flex
204
+ items-center
205
+ p-1
206
+ cursor-pointer
207
+ w-8
208
+ h-4;
209
+
210
+ .tu-toggle__switch {
211
+ @apply w-4/12;
212
+ }
213
+ }
214
+
215
+ &--toggled {
216
+ @apply flex
217
+ items-center
218
+ p-1
219
+ cursor-pointer
220
+ bg-blue-600
221
+ focus:bg-blue-700
222
+ hover:bg-blue-700
223
+ active:bg-blue-800;
224
+ }
225
+
226
+ &--disabled {
227
+ @apply flex
228
+ items-center
229
+ p-1
230
+ cursor-not-allowed
231
+ pointer-events-none
232
+ bg-slate-200;
233
+ }
234
+
235
+ &--disabled.tu-toggle--toggled {
236
+ @apply bg-slate-400;
237
+ }
238
+
239
+ &__label-container {
240
+ @apply gap-y-1
241
+ grid;
242
+ }
243
+
244
+ &__description {
245
+ @apply text-sm
246
+ font-normal
247
+ text-slate-500
248
+ text-left
249
+ whitespace-nowrap
250
+ text-ellipsis
251
+ overflow-hidden;
252
+
253
+ &--disabled {
254
+ @apply text-slate-400
255
+ hover:text-slate-400
256
+ group-hover:text-slate-400;
257
+ }
258
+ }
259
+ }