optimized-react-component-library-xyz123 0.1.67 → 0.1.68

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.css +0 -330
  2. package/dist/index.js +76 -168
  3. package/dist/index.mjs +143 -235
  4. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -2,336 +2,6 @@
2
2
  /* src/NewInputComponentStandard/MultipleCheckboxesStandard/MultipleCheckboxesStandard.css */
3
3
  /* src/NewInputComponentStandard/TextAreaStandard/TextAreaStandard.css */
4
4
  /* src/NewInputComponentStandard/FilesUploadStandard/FilesUploadStandard.css */
5
- .files-upload {
6
- width: 100%;
7
- max-width: 800px;
8
- margin: 0 auto;
9
- font-family:
10
- "Segoe UI",
11
- Tahoma,
12
- Geneva,
13
- Verdana,
14
- sans-serif;
15
- }
16
- .files-drop-zone {
17
- border: 2px dashed #6e3282;
18
- border-radius: 12px;
19
- padding: 3rem 2rem;
20
- text-align: center;
21
- transition: all 0.3s ease;
22
- background-color: #fafafa;
23
- cursor: pointer;
24
- position: relative;
25
- overflow: hidden;
26
- }
27
- .files-drop-zone:hover {
28
- border-color: #6e3282;
29
- background-color: #f5ebf8;
30
- transform: translateY(-2px);
31
- box-shadow: 0 4px 12px rgba(220, 148, 253, 0.15);
32
- }
33
- .files-drop-zone.drag-active {
34
- border-color: #6e3282;
35
- background-color: #f5ebf8;
36
- transform: scale(1.02);
37
- box-shadow: 0 8px 25px rgba(30, 167, 253, 0.2);
38
- }
39
- .files-drop-zone:focus {
40
- border: 0.2rem solid #6e3282;
41
- }
42
- .files-drop-zone:focus-visible {
43
- outline-offset: 0 !important;
44
- outline-style: solid !important;
45
- outline-color: #fff !important;
46
- outline-width: 2px !important;
47
- box-shadow: 0 0 0 4px #000 !important;
48
- }
49
- .files-drop-content {
50
- pointer-events: none;
51
- }
52
- .files-icon {
53
- font-size: 4rem;
54
- margin-bottom: 1rem;
55
- opacity: 0.7;
56
- animation: float 3s ease-in-out infinite;
57
- }
58
- @keyframes float {
59
- 0%, 100% {
60
- transform: translateY(0px);
61
- }
62
- 50% {
63
- transform: translateY(-10px);
64
- }
65
- }
66
- .files-drop-text {
67
- font-size: 1.2rem;
68
- margin-bottom: 0.5rem;
69
- color: #333;
70
- font-weight: 500;
71
- }
72
- .files-drop-info {
73
- font-size: 0.9rem;
74
- color: #666;
75
- margin: 0;
76
- }
77
- .files-allowed-types {
78
- font-size: 0.85rem;
79
- color: #555;
80
- margin: 0.75rem 0 0 0;
81
- padding: 0.5rem;
82
- background-color: rgba(146, 64, 252, 0.1);
83
- border-radius: 6px;
84
- border-left: 3px solid #ce95e0;
85
- }
86
- .files-allowed-types strong {
87
- color: #6e3282;
88
- }
89
- .files-input-hidden {
90
- display: none;
91
- }
92
- .files-summary {
93
- margin: 1.5rem 0;
94
- padding: 1rem;
95
- background-color: #f8f9fa;
96
- border-radius: 8px;
97
- border: 1px solid #e9ecef;
98
- }
99
- .files-summary-stats {
100
- display: flex;
101
- gap: 1rem;
102
- margin-bottom: 1rem;
103
- flex-wrap: wrap;
104
- }
105
- .stat {
106
- padding: 0.5rem 1rem;
107
- border-radius: 20px;
108
- background-color: #e9ecef;
109
- font-size: 0.9rem;
110
- display: flex;
111
- align-items: center;
112
- gap: 0.5rem;
113
- }
114
- .stat.pending {
115
- background-color: #fff3cd;
116
- color: #856404;
117
- }
118
- .stat.completed {
119
- background-color: #d1e7dd;
120
- color: #0a3622;
121
- }
122
- .stat.error {
123
- background-color: #f8d7da;
124
- color: #721c24;
125
- }
126
- .files-summary-actions {
127
- display: flex;
128
- gap: 0.5rem;
129
- flex-wrap: wrap;
130
- }
131
- .action-button {
132
- padding: 0.75rem 1.5rem;
133
- border: none;
134
- border-radius: 6px;
135
- cursor: pointer;
136
- font-weight: 500;
137
- transition: all 0.2s ease;
138
- display: flex;
139
- align-items: center;
140
- gap: 0.5rem;
141
- }
142
- .action-button.primary {
143
- background-color: #1ea7fd;
144
- color: white;
145
- }
146
- .action-button.primary:hover {
147
- background-color: #1890ff;
148
- transform: translateY(-1px);
149
- }
150
- .action-button.secondary {
151
- background-color: #6c757d;
152
- color: white;
153
- }
154
- .action-button.secondary:hover {
155
- background-color: #5a6268;
156
- transform: translateY(-1px);
157
- }
158
- .files-list {
159
- margin-top: 1.5rem;
160
- }
161
- .files-list h4 {
162
- margin-bottom: 1rem;
163
- color: #333;
164
- font-size: 1.1rem;
165
- font-weight: 600;
166
- }
167
- .files-items {
168
- list-style: none;
169
- padding: 0;
170
- margin: 0;
171
- }
172
- .file-item {
173
- display: flex;
174
- align-items: center;
175
- gap: 1rem;
176
- padding: 1rem;
177
- border: 1px solid #e9ecef;
178
- border-radius: 8px;
179
- margin-bottom: 0.75rem;
180
- background-color: white;
181
- transition: all 0.2s ease;
182
- position: relative;
183
- }
184
- .file-item:hover {
185
- background-color: #f8f9fa;
186
- border-color: #dee2e6;
187
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
188
- }
189
- .file-item.uploading {
190
- background-color: #e6f7ff;
191
- border-color: #91d5ff;
192
- }
193
- .file-item.completed {
194
- background-color: #f6ffed;
195
- border-color: #b7eb8f;
196
- }
197
- .file-item.error {
198
- background-color: #fff2f0;
199
- border-color: #ffccc7;
200
- }
201
- .file-icon-status {
202
- font-size: 1.5rem;
203
- min-width: 2rem;
204
- text-align: center;
205
- }
206
- .file-info {
207
- flex: 1;
208
- min-width: 0;
209
- }
210
- .file-name {
211
- font-weight: 500;
212
- color: #333;
213
- margin-bottom: 0.5rem;
214
- word-break: break-word;
215
- }
216
- .file-details {
217
- display: flex;
218
- gap: 1rem;
219
- font-size: 0.85rem;
220
- color: #666;
221
- flex-wrap: wrap;
222
- }
223
- .file-size {
224
- color: #666;
225
- }
226
- .file-status {
227
- color: #1ea7fd;
228
- font-weight: 500;
229
- }
230
- .file-error {
231
- color: #dc3545;
232
- font-weight: 500;
233
- }
234
- .progress-bar {
235
- width: 100%;
236
- height: 4px;
237
- background-color: #e9ecef;
238
- border-radius: 2px;
239
- margin-top: 0.5rem;
240
- overflow: hidden;
241
- }
242
- .progress-fill {
243
- height: 100%;
244
- background-color: #1ea7fd;
245
- transition: width 0.3s ease;
246
- border-radius: 2px;
247
- }
248
- .file-actions {
249
- display: flex;
250
- gap: 0.5rem;
251
- }
252
- .action-btn {
253
- background: none;
254
- border: 1px solid transparent;
255
- padding: 0.5rem;
256
- border-radius: 6px;
257
- cursor: pointer;
258
- font-size: 1rem;
259
- transition: all 0.2s ease;
260
- min-width: 2.5rem;
261
- height: 2.5rem;
262
- display: flex;
263
- align-items: center;
264
- justify-content: center;
265
- }
266
- .action-btn.upload {
267
- color: #1ea7fd;
268
- border-color: #1ea7fd;
269
- }
270
- .action-btn.upload:hover {
271
- background-color: #1ea7fd;
272
- color: white;
273
- }
274
- .action-btn.retry {
275
- color: #fd7e14;
276
- border-color: #fd7e14;
277
- }
278
- .action-btn.retry:hover {
279
- background-color: #fd7e14;
280
- color: white;
281
- }
282
- .action-btn.remove {
283
- color: #6e3282;
284
- border-color: #6e3282;
285
- }
286
- .action-btn.remove:hover {
287
- background-color: #6e3282;
288
- color: white;
289
- }
290
- @media (max-width: 768px) {
291
- .files-drop-zone {
292
- padding: 2rem 1rem;
293
- }
294
- .files-icon {
295
- font-size: 3rem;
296
- }
297
- .files-drop-text {
298
- font-size: 1rem;
299
- }
300
- .files-summary-stats {
301
- flex-direction: column;
302
- gap: 0.5rem;
303
- }
304
- .files-summary-actions {
305
- flex-direction: column;
306
- }
307
- .action-button {
308
- justify-content: center;
309
- }
310
- .file-item {
311
- flex-direction: column;
312
- align-items: flex-start;
313
- gap: 0.75rem;
314
- }
315
- .file-details {
316
- flex-direction: column;
317
- gap: 0.25rem;
318
- }
319
- .file-actions {
320
- align-self: flex-end;
321
- }
322
- }
323
- @media (max-width: 480px) {
324
- .files-upload {
325
- padding: 0 0.5rem;
326
- }
327
- .files-drop-zone {
328
- padding: 1.5rem 1rem;
329
- }
330
- .file-item {
331
- padding: 0.75rem;
332
- }
333
- }
334
-
335
5
  /* src/NewInputComponentStandard/AddFilesStandard/AddFilesStandard.css */
336
6
  .invisible {
337
7
  display: none;