@candidhealth/react-vitals 1.0.0-alpha.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.
package/package.json ADDED
@@ -0,0 +1,63 @@
1
+ {
2
+ "name": "@candidhealth/react-vitals",
3
+ "version": "1.0.0-alpha.1",
4
+ "type": "module",
5
+ "exports": {
6
+ ".": {
7
+ "import": {
8
+ "types": "./dist/index.d.mts",
9
+ "default": "./dist/index.mjs"
10
+ },
11
+ "require": {
12
+ "types": "./dist/index.d.ts",
13
+ "default": "./dist/index.js"
14
+ }
15
+ },
16
+ "./theme.css": "./theme.css",
17
+ "./base.css": "./base.css",
18
+ "./styles.css": "./dist/index.css"
19
+ },
20
+ "main": "./dist/index.js",
21
+ "module": "./dist/index.mjs",
22
+ "types": "./dist/index.d.ts",
23
+ "files": [
24
+ "dist",
25
+ "theme.css",
26
+ "base.css"
27
+ ],
28
+ "sideEffects": false,
29
+ "peerDependencies": {
30
+ "react": "^18.0.0",
31
+ "react-dom": "^18.0.0",
32
+ "react-hook-form": "^7.0.0",
33
+ "zod": "^3.0.0",
34
+ "@tanstack/react-table": "^8.0.0",
35
+ "@tanstack/react-query": "^5.0.0",
36
+ "@fortawesome/fontawesome-svg-core": "^6.0.0",
37
+ "@fortawesome/react-fontawesome": "^0.2.0 || ^3.0.0",
38
+ "@fortawesome/free-solid-svg-icons": "^6.0.0"
39
+ },
40
+ "dependencies": {
41
+ "@radix-ui/react-accordion": "^0.1.6",
42
+ "@radix-ui/react-collapsible": "^1.0.3",
43
+ "@radix-ui/react-dialog": "1.1.6",
44
+ "@radix-ui/react-dropdown-menu": "2.1.6",
45
+ "@radix-ui/react-popover": "1.1.6",
46
+ "@radix-ui/react-slot": "^1.0.2",
47
+ "@radix-ui/react-switch": "^0.1.5",
48
+ "@radix-ui/react-tabs": "^0.1.5",
49
+ "@radix-ui/react-toggle-group": "^1.1.11",
50
+ "@radix-ui/react-tooltip": "1.0.7",
51
+ "@hookform/resolvers": "3.3.1",
52
+ "@dnd-kit/core": "6.1.0",
53
+ "@dnd-kit/sortable": "^8.0.0",
54
+ "@dnd-kit/utilities": "^3.2.2",
55
+ "@floating-ui/react": "^0.26.28",
56
+ "react-datepicker": "^7.5.0",
57
+ "date-fns": "^2.28.0",
58
+ "react-international-phone": "^4.3.0",
59
+ "tailwind-merge": "^3.3.0",
60
+ "lodash-es": "^4.17.21",
61
+ "type-fest": "^3.10.0"
62
+ }
63
+ }
package/theme.css ADDED
@@ -0,0 +1,456 @@
1
+ @theme {
2
+ --spacing: 0.25rem;
3
+ --spacing-xs: 1.625rem;
4
+ --spacing-sm: 2rem;
5
+ --spacing-md: 2.375rem;
6
+ --spacing-lg: 3.125rem;
7
+
8
+ /*
9
+ Setting the --radius variables overwrites the defaults for tailwind rounded (sm-3xl)
10
+
11
+ Candid Rebrand (reduced by 2px) vs. Original Tailwind Defaults
12
+ --radius: 0.125rem (2px) vs. 0.25rem (4px)
13
+ --radius-sm: 0rem (0px) vs. 0.125rem (2px)
14
+ --radius-md: 0.25rem (4px) vs. 0.375rem (6px)
15
+ --radius-lg: 0.375rem (6px) vs. 0.5rem (8px)
16
+ --radius-xl: 0.625rem (10px) vs. 0.75rem (12px)
17
+ --radius-2xl: 0.875rem (14px) vs. 1rem (16px)
18
+ --radius-3xl: 1.375rem (22px) vs. 1.5rem (24px)
19
+ */
20
+
21
+ --radius: 0.125rem;
22
+ --radius-sm: 0rem;
23
+ --radius-md: 0.25rem;
24
+ --radius-lg: 0.375rem;
25
+ --radius-xl: 0.625rem;
26
+ --radius-2xl: 0.875rem;
27
+ --radius-3xl: 1.375rem;
28
+
29
+ --max-width-xs: 20rem;
30
+ --max-width-sm: 24rem;
31
+ --max-width-md: 28rem;
32
+ --max-width-lg: 32rem;
33
+
34
+ --text-xxs: 0.5rem;
35
+ --text-xxs--line-height: 0.75rem;
36
+ --text-xs: 0.625rem;
37
+ --text-xs--line-height: 1rem;
38
+ --text-sm: 0.75rem;
39
+ --text-sm--line-height: 1rem;
40
+ --text-base: 0.875rem;
41
+ --text-base--line-height: 1.25rem;
42
+ --text-lg: 1rem;
43
+ --text-lg--line-height: 1.5rem;
44
+ --text-xl: 1.125rem;
45
+ --text-xl--line-height: 1.75rem;
46
+ --text-2xl: 1.25rem;
47
+ --text-2xl--line-height: 1.75rem;
48
+ --text-3xl: 1.5rem;
49
+ --text-3xl--line-height: 2rem;
50
+ --text-4xl: 1.875rem;
51
+ --text-4xl--line-height: 2.25rem;
52
+
53
+ /* ---------------------------------------------------- */
54
+ /* MARKETING & HEADLINE TOKENS (Inter, Light/300) */
55
+ /* ---------------------------------------------------- */
56
+
57
+ /* Marketing Headline (3.75rem / 60px) */
58
+ --text-marketing-headline: 3.75rem;
59
+ --text-marketing-headline--line-height: 4.5rem;
60
+ --text-marketing-headline--letter-spacing: -0.0625rem;
61
+ --text-marketing-headline--font-weight: 300;
62
+
63
+ /* Headline 1 (3rem / 48px) */
64
+ --text-headline-1: 3rem;
65
+ --text-headline-1--line-height: 3.75rem;
66
+ --text-headline-1--letter-spacing: -0.0625rem;
67
+ --text-headline-1--font-weight: 300;
68
+
69
+ /* Headline 2 (2.5rem / 40px) */
70
+ --text-headline-2: 2.5rem;
71
+ --text-headline-2--line-height: 3rem;
72
+ --text-headline-2--letter-spacing: -0.05rem;
73
+ --text-headline-2--font-weight: 300;
74
+
75
+ /* Headline 3 (2rem / 32px) */
76
+ --text-headline-3: 2rem;
77
+ --text-headline-3--line-height: 2.5rem;
78
+ --text-headline-3--letter-spacing: -0.0375rem;
79
+ --text-headline-3--font-weight: 300;
80
+
81
+ /* Headline 4 (1.5rem / 24px) */
82
+ --text-headline-4: 1.5rem;
83
+ --text-headline-4--line-height: 2rem;
84
+ --text-headline-4--letter-spacing: -0.0375rem;
85
+ --text-headline-4--font-weight: 300;
86
+
87
+ /* ---------------------------------------------------- */
88
+ /* TITLE TOKENS (Inter, Medium/500) */
89
+ /* ---------------------------------------------------- */
90
+
91
+ /* Title 1 (1.5rem / 24px) */
92
+ --text-title-1: 1.5rem;
93
+ --text-title-1--line-height: 2rem;
94
+ --text-title-1--letter-spacing: -0.0375rem;
95
+ --text-title-1--font-weight: 500;
96
+
97
+ /* Title 2 (1.125rem / 18px) */
98
+ --text-title-2: 1.125rem;
99
+ --text-title-2--line-height: 1.5rem;
100
+ --text-title-2--letter-spacing: -0.025rem;
101
+ --text-title-2--font-weight: 500;
102
+
103
+ /* Title 3 (0.875rem / 14px) */
104
+ --text-title-3: 0.875rem;
105
+ --text-title-3--line-height: 1.25rem;
106
+ --text-title-3--letter-spacing: -0.025rem;
107
+ --text-title-3--font-weight: 500;
108
+
109
+ /* ---------------------------------------------------- */
110
+ /* BODY TOKENS (Inter, Regular/400) */
111
+ /* ---------------------------------------------------- */
112
+
113
+ /* Body 1 (0.875rem / 14px) */
114
+ --text-body-1: 0.875rem;
115
+ --text-body-1--line-height: 1.25rem;
116
+ --text-body-1--letter-spacing: -0.0125rem;
117
+ --text-body-1--font-weight: 400;
118
+
119
+ /* Body 2 (0.75rem / 12px) */
120
+ --text-body-2: 0.75rem;
121
+ --text-body-2--line-height: 1.125rem;
122
+ --text-body-2--letter-spacing: -0.0125rem;
123
+ --text-body-2--font-weight: 400;
124
+
125
+ /* ---------------------------------------------------- */
126
+ /* LABEL, FOOTNOTE & SMALLCAPS TOKENS */
127
+ /* ---------------------------------------------------- */
128
+
129
+ /* Label (0.75rem / 12px, Medium/500) */
130
+ --text-label: 0.75rem;
131
+ --text-label--line-height: 1.125rem;
132
+ --text-label--letter-spacing: -0.0125rem;
133
+ --text-label--font-weight: 500;
134
+
135
+ /* Footnote (0.625rem / 10px, Regular/400) */
136
+ --text-footnote: 0.625rem;
137
+ --text-footnote--line-height: 1rem;
138
+ --text-footnote--letter-spacing: -0.0125rem;
139
+ --text-footnote--font-weight: 400;
140
+
141
+ /* Small Caps (0.625rem / 10px, Medium/500) */
142
+ --text-smallcaps: 0.625rem;
143
+ --text-smallcaps--line-height: 1rem;
144
+ --text-smallcaps--letter-spacing: 0.0375rem;
145
+ --text-smallcaps--font-weight: 500;
146
+
147
+ --color-indigo-50: #ebf0ff;
148
+ --color-indigo-100: #dbe3ff;
149
+ --color-indigo-200: #b5bfff;
150
+ --color-indigo-300: #93a0f9;
151
+ --color-indigo-400: #7081f2;
152
+ --color-indigo-500: #5164f4;
153
+ --color-indigo-600: #3c43ee;
154
+ --color-indigo-700: #2e04e8;
155
+ --color-indigo-800: #26129d;
156
+ --color-indigo-900: #190b5b;
157
+
158
+ --color-gray-50: #fafafa;
159
+ --color-gray-100: #f4f4f6;
160
+ --color-gray-200: #e8e8eb;
161
+ --color-gray-300: #c0c0c6;
162
+ --color-gray-400: #91919c;
163
+ --color-gray-500: #72727f;
164
+ --color-gray-600: #54545e;
165
+ --color-gray-700: #3d3e45;
166
+ --color-gray-800: #252529;
167
+ --color-gray-900: #141415;
168
+
169
+ --color-dark-gray-500: #2c3244;
170
+ --color-dark-gray-600: #1b2433;
171
+
172
+ --color-yellow-50: #fefce7;
173
+ --color-yellow-100: #fef9c6;
174
+ --color-yellow-200: #fef08c;
175
+ --color-yellow-300: #fde247;
176
+ --color-yellow-400: #f1c805;
177
+ --color-yellow-500: #d7ac0a;
178
+ --color-yellow-600: #b5890b;
179
+ --color-yellow-700: #906f0f;
180
+ --color-yellow-800: #7e5c11;
181
+ --color-yellow-900: #63430c;
182
+
183
+ --color-green-50: #ecfdf5;
184
+ --color-green-100: #d1fae5;
185
+ --color-green-200: #a7f3d0;
186
+ --color-green-300: #6ee7b7;
187
+ --color-green-400: #34d399;
188
+ --color-green-500: #10b981;
189
+ --color-green-600: #0d9e71;
190
+ --color-green-700: #148261;
191
+ --color-green-800: #0c654c;
192
+ --color-green-900: #064e3b;
193
+
194
+ --color-red-50: #fef5f4;
195
+ --color-red-100: #fee4e2;
196
+ --color-red-200: #fececa;
197
+ --color-red-300: #fca5a5;
198
+ --color-red-400: #f87e71;
199
+ --color-red-500: #ea533f;
200
+ --color-red-600: #d4361e;
201
+ --color-red-700: #bd2f1d;
202
+ --color-red-800: #99301b;
203
+ --color-red-900: #7f311d;
204
+
205
+ --color-inherit: inherit;
206
+
207
+ /* ---------------------------------------------------- */
208
+ /* SEMANTIC COLOR TOKENS */
209
+ /* ---------------------------------------------------- */
210
+
211
+ /* Text/Icon Semantic Colors */
212
+ --color-dark: var(--color-gray-900);
213
+ --color-default: var(--color-gray-700);
214
+ --color-muted: var(--color-gray-500);
215
+ --color-disabled: var(--color-gray-300);
216
+ --color-placeholder: var(--color-gray-400);
217
+ --color-primary: var(--color-indigo-700);
218
+ --color-warning: var(--color-yellow-700);
219
+ --color-success: var(--color-green-700);
220
+ --color-danger: var(--color-red-600);
221
+ --color-white: #ffffff;
222
+
223
+ /* Background Semantic Colors */
224
+ --background-color-primary: var(--color-indigo-50);
225
+ --background-color-success: var(--color-green-100);
226
+ --background-color-danger: var(--color-red-100);
227
+ --background-color-warning: var(--color-yellow-100);
228
+
229
+ /* Border Semantic Colors */
230
+ --border-color-default: var(--color-gray-200);
231
+ --border-color-light: var(--color-gray-100);
232
+ --border-color-dark: var(--color-gray-300);
233
+ --border-color-primary: var(--color-indigo-100);
234
+ --border-color-success: var(--color-green-200);
235
+ --border-color-danger: var(--color-red-200);
236
+ --border-color-warning: var(--color-yellow-200);
237
+
238
+ --background-image-gray-hashed: linear-gradient(
239
+ 45deg,
240
+ #f4f4f6 5%,
241
+ #e8e8eb 5%,
242
+ #e8e8eb 10%,
243
+ #f4f4f6 10%,
244
+ #f4f4f6 15%,
245
+ #e8e8eb 15%,
246
+ #e8e8eb 20%,
247
+ #f4f4f6 20%,
248
+ #f4f4f6 25%,
249
+ #e8e8eb 25%,
250
+ #e8e8eb 30%,
251
+ #f4f4f6 30%,
252
+ #f4f4f6 35%,
253
+ #e8e8eb 35%,
254
+ #e8e8eb 40%,
255
+ #f4f4f6 40%,
256
+ #f4f4f6 45%,
257
+ #e8e8eb 45%,
258
+ #e8e8eb 50%,
259
+ #f4f4f6 50%,
260
+ #f4f4f6 55%,
261
+ #e8e8eb 55%,
262
+ #e8e8eb 60%,
263
+ #f4f4f6 60%,
264
+ #f4f4f6 65%,
265
+ #e8e8eb 65%,
266
+ #e8e8eb 70%,
267
+ #f4f4f6 70%,
268
+ #f4f4f6 75%,
269
+ #e8e8eb 75%,
270
+ #e8e8eb 80%,
271
+ #f4f4f6 80%,
272
+ #f4f4f6 85%,
273
+ #e8e8eb 85%,
274
+ #e8e8eb 90%,
275
+ #f4f4f6 90%,
276
+ #f4f4f6 95%,
277
+ #e8e8eb 95%,
278
+ #e8e8eb 100%
279
+ );
280
+ --background-image-indigo-hashed: linear-gradient(
281
+ 45deg,
282
+ #d5ddfb 5%,
283
+ #e8edfd 5%,
284
+ #e8edfd 10%,
285
+ #d5ddfb 10%,
286
+ #d5ddfb 15%,
287
+ #e8edfd 15%,
288
+ #e8edfd 20%,
289
+ #d5ddfb 20%,
290
+ #d5ddfb 25%,
291
+ #e8edfd 25%,
292
+ #e8edfd 30%,
293
+ #d5ddfb 30%,
294
+ #d5ddfb 35%,
295
+ #e8edfd 35%,
296
+ #e8edfd 40%,
297
+ #d5ddfb 40%,
298
+ #d5ddfb 45%,
299
+ #e8edfd 45%,
300
+ #e8edfd 50%,
301
+ #d5ddfb 50%,
302
+ #d5ddfb 55%,
303
+ #e8edfd 55%,
304
+ #e8edfd 60%,
305
+ #d5ddfb 60%,
306
+ #d5ddfb 65%,
307
+ #e8edfd 65%,
308
+ #e8edfd 70%,
309
+ #d5ddfb 70%,
310
+ #d5ddfb 75%,
311
+ #e8edfd 75%,
312
+ #e8edfd 80%,
313
+ #d5ddfb 80%,
314
+ #d5ddfb 85%,
315
+ #e8edfd 85%,
316
+ #e8edfd 90%,
317
+ #d5ddfb 90%,
318
+ #d5ddfb 95%,
319
+ #e8edfd 95%,
320
+ #e8edfd 100%
321
+ );
322
+
323
+ --default-font-family: "Inter";
324
+ --font-weight-inherit: inherit;
325
+
326
+ --width-120: 30rem;
327
+ --width-144: 36rem;
328
+ --width-176: 44rem;
329
+ --width-208: 52rem;
330
+
331
+ --height-120: 30rem;
332
+
333
+ --transition-property-width: width;
334
+ --transition-property-height: height;
335
+
336
+ --flex-2: 2 2 0%;
337
+
338
+ --shadow-sm: 0px 0px 0px 1px rgba(0, 0, 0, 0.02), 0px 0px 1px rgba(0, 0, 0, 0.05);
339
+ --shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.02), 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
340
+ --shadow-md:
341
+ 0px 0px 0px 1px rgba(0, 0, 0, 0.02), 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
342
+ --shadow-lg:
343
+ 0px 0px 12px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
344
+ --shadow-xl:
345
+ 0px 0px 12px rgba(0, 0, 0, 0.05), 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 10px 10px -5px rgba(0, 0, 0, 0.04);
346
+
347
+ --backdrop-blur-xs: 2px;
348
+
349
+ --animate-quick-spin: spin 500ms linear infinite;
350
+ --animate-fade-in: fade-in 150ms ease-in;
351
+ --animate-fade-out: fade-out 150ms ease-out;
352
+ --animate-fade-in-custom-easing: fade-in 150ms ease-[cubic-bezier(0.16, 1, 0.3, 1)];
353
+ --animate-fade-in-subtle-movement: fade-in-subtle-movement 150ms ease-[cubic-bezier(0.16, 1, 0.3, 1)];
354
+ --animate-skeleton-pulse: skeleton-pulse 2s ease-in-out infinite;
355
+ --animate-loading-pulse: loading-pulse 2s ease-in-out infinite;
356
+ --animate-collapsible-up: collapsibleSlideUp 200ms ease;
357
+ --animate-collapsible-down: collapsibleSlideDown 200ms ease;
358
+ --animate-bounce-pulse: bounce-pulse 1000ms ease-in-out infinite;
359
+ --animate-loading-slide: loading-slide 2s linear infinite;
360
+
361
+ --z-index-drawer-header: 40;
362
+ --z-index-drawer: 48;
363
+ --z-index-full-content-modal: 49;
364
+ --z-index-sidebar: 50;
365
+ --z-index-max: 9001;
366
+
367
+ --grid-template-columns-post-insurance-service-line-header: 1fr 1fr 2fr 95px;
368
+ --grid-template-columns-post-insurance-form-two-column-left-grow: 1fr 90px;
369
+ --grid-template-columns-post-insurance-form-two-column-right-grow: 90px 1fr;
370
+ --grid-template-columns-post-insurance-form-four-column: 90px repeat(2, minmax(0, 1fr)) 90px;
371
+
372
+ @keyframes loading-slide {
373
+ 0% {
374
+ transform: translateX(-90%);
375
+ }
376
+ 100% {
377
+ transform: translateX(200%);
378
+ }
379
+ }
380
+ @keyframes fade-in {
381
+ from {
382
+ opacity: 0;
383
+ }
384
+ to {
385
+ opacity: 1;
386
+ }
387
+ }
388
+ @keyframes fade-out {
389
+ from {
390
+ opacity: 1;
391
+ }
392
+ to {
393
+ opacity: 0;
394
+ }
395
+ }
396
+ @keyframes fade-in-subtle-movement {
397
+ from {
398
+ opacity: 0;
399
+ transform: translate(-50%, -48%) scale(0.96);
400
+ }
401
+ to {
402
+ opacity: 1;
403
+ transform: translate(-50%, -50%) scale(1);
404
+ }
405
+ }
406
+ @keyframes loading-pulse {
407
+ 0%,
408
+ 100% {
409
+ opacity: 0.5;
410
+ }
411
+ 50% {
412
+ opacity: 0.3;
413
+ }
414
+ }
415
+ @keyframes skeleton-pulse {
416
+ 0% {
417
+ background-color: #eee;
418
+ }
419
+ 50% {
420
+ background-color: #f4f4f4;
421
+ }
422
+ 100% {
423
+ background-color: #eee;
424
+ }
425
+ }
426
+ @keyframes collapsibleSlideDown {
427
+ from {
428
+ height: 0;
429
+ }
430
+ to {
431
+ height: var(--radix-collapsible-content-height);
432
+ }
433
+ }
434
+ @keyframes collapsibleSlideUp {
435
+ from {
436
+ height: var(--radix-collapsible-content-height);
437
+ }
438
+ to {
439
+ height: 0;
440
+ }
441
+ }
442
+
443
+ @keyframes bounce-pulse {
444
+ 0%,
445
+ 100% {
446
+ transform: translateY(0);
447
+ background-color: #595aff;
448
+ animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
449
+ }
450
+ 50% {
451
+ transform: translateY(-0.5rem);
452
+ background-color: #e8e8eb;
453
+ animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
454
+ }
455
+ }
456
+ }