@candidhealth/react-vitals 1.0.0-alpha.1 → 1.0.0-alpha.11
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/README.md +7 -19
- package/dist/index.css +10 -9
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +866 -514
- package/dist/index.d.ts +866 -514
- package/dist/index.js +1937 -1291
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1858 -1203
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +187 -0
- package/dist/styles.css.map +1 -0
- package/dist/styles.d.mts +2 -0
- package/dist/styles.d.ts +2 -0
- package/package.json +69 -62
- package/theme.css +65 -144
- package/base.css +0 -105
package/README.md
CHANGED
|
@@ -1,25 +1,13 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Vitals
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Vitals is Candid Health's set of system-level UI components which can be used to build delightful user interfaces.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Component Library & Documentation
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Our component library is visible online!
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
Visit https://vitals.joincandidhealth.com to view an interactive library of the reusable components we've built.
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
## Release Notes
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
## Component Library
|
|
16
|
-
|
|
17
|
-
Our storybook instance is also hosted online!
|
|
18
|
-
|
|
19
|
-
Visit https://www.chromatic.com/library?appId=646772265e2d5a5aee87e28b to see a library of the reusable components
|
|
20
|
-
we've built for use within the app.
|
|
21
|
-
|
|
22
|
-
To see components in an actual Storybook environment, click the "View Storybook"
|
|
23
|
-
button at the top right of the library page.
|
|
24
|
-
|
|
25
|
-
Connect using Github if this is your first time accessing the component library.
|
|
13
|
+
See the [changelog](https://vitals.joincandidhealth.com/?path=/docs/docs-changelog--docs) for release notes and version history.
|
package/dist/index.css
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/* src/core/date-picker/DatePicker.css */
|
|
2
|
+
@reference "tailwindcss";
|
|
2
3
|
@reference "../theme.css";
|
|
3
4
|
.react-datepicker-popper {
|
|
4
5
|
@apply z-40 rounded-lg bg-white text-sm shadow-lg;
|
|
@@ -10,7 +11,7 @@
|
|
|
10
11
|
@apply absolute! top-11! right-0! left-auto! transform-none!;
|
|
11
12
|
}
|
|
12
13
|
.react-datepicker__portal {
|
|
13
|
-
@apply absolute top-12 right-0 z-10 w-72 transform-none rounded-sm border-2 border-
|
|
14
|
+
@apply absolute top-12 right-0 z-10 w-72 transform-none rounded-sm border-2 border-surface-neutral bg-white px-3 py-2 text-sm shadow;
|
|
14
15
|
}
|
|
15
16
|
.react-datepicker__month-container {
|
|
16
17
|
@apply flex h-[320px] w-72 flex-col p-3;
|
|
@@ -25,7 +26,7 @@
|
|
|
25
26
|
@apply flex justify-around;
|
|
26
27
|
}
|
|
27
28
|
.react-datepicker__day-names {
|
|
28
|
-
@apply flex justify-around text-center text-xs font-medium text-
|
|
29
|
+
@apply flex justify-around text-center text-xs font-medium text-placeholder;
|
|
29
30
|
}
|
|
30
31
|
.react-datepicker__day-name {
|
|
31
32
|
@apply flex h-8 w-8 items-center justify-center rounded-full py-1;
|
|
@@ -34,22 +35,22 @@
|
|
|
34
35
|
@apply absolute top-2;
|
|
35
36
|
}
|
|
36
37
|
.react-datepicker__navigation--previous {
|
|
37
|
-
@apply right-12 flex h-8 w-8 items-center justify-center rounded-sm transition hover:bg-
|
|
38
|
+
@apply right-12 flex h-8 w-8 items-center justify-center rounded-sm transition hover:bg-surface-dark;
|
|
38
39
|
}
|
|
39
40
|
.react-datepicker__navigation--next {
|
|
40
|
-
@apply right-4 flex h-8 w-8 items-center justify-center rounded-sm transition hover:bg-
|
|
41
|
+
@apply right-4 flex h-8 w-8 items-center justify-center rounded-sm transition hover:bg-surface-dark;
|
|
41
42
|
}
|
|
42
43
|
.react-datepicker__day {
|
|
43
|
-
@apply mb-1 flex h-8 w-8 cursor-pointer items-center justify-center rounded-sm py-1 text-sm leading-loose text-
|
|
44
|
+
@apply mb-1 flex h-8 w-8 cursor-pointer items-center justify-center rounded-sm py-1 text-sm leading-loose text-neutral transition;
|
|
44
45
|
}
|
|
45
46
|
.react-datepicker__day--disabled {
|
|
46
47
|
@apply cursor-not-allowed opacity-40 hover:bg-transparent;
|
|
47
48
|
}
|
|
48
49
|
.react-datepicker__day--outside-month {
|
|
49
|
-
@apply text-
|
|
50
|
+
@apply text-disabled;
|
|
50
51
|
}
|
|
51
52
|
.react-datepicker__day--in-range {
|
|
52
|
-
@apply bg-
|
|
53
|
+
@apply bg-surface-dark;
|
|
53
54
|
}
|
|
54
55
|
.react-datepicker__day--in-selecting-range {
|
|
55
56
|
@apply bg-indigo-200;
|
|
@@ -64,10 +65,10 @@
|
|
|
64
65
|
@apply bg-indigo-600 text-white;
|
|
65
66
|
}
|
|
66
67
|
.react-datepicker__day--range-start {
|
|
67
|
-
@apply bg-indigo-600 text-white hover:bg-white hover:text-
|
|
68
|
+
@apply bg-indigo-600 text-white hover:bg-white hover:text-neutral;
|
|
68
69
|
}
|
|
69
70
|
.react-datepicker__day--range-end {
|
|
70
|
-
@apply bg-indigo-600 text-white hover:bg-white hover:text-
|
|
71
|
+
@apply bg-indigo-600 text-white hover:bg-white hover:text-neutral;
|
|
71
72
|
}
|
|
72
73
|
.react-datepicker__aria-live,
|
|
73
74
|
.react-datepicker__triangle {
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../date-picker/DatePicker.css","../phone-number/styles.css"],"sourcesContent":["@reference \"../theme.css\";\n\n.react-datepicker-popper {\n\t@apply z-40 rounded-lg bg-white text-sm shadow-lg;\n}\n\n.react-datepicker-left {\n\t@apply absolute! top-11! right-auto! left-0! transform-none!;\n}\n\n.react-datepicker-right {\n\t@apply absolute! top-11! right-0! left-auto! transform-none!;\n}\n\n.react-datepicker__portal {\n\t@apply absolute top-12 right-0 z-10 w-72 transform-none rounded-sm border-2 border-
|
|
1
|
+
{"version":3,"sources":["../date-picker/DatePicker.css","../phone-number/styles.css"],"sourcesContent":["@reference \"tailwindcss\";\n@reference \"../theme.css\";\n\n.react-datepicker-popper {\n\t@apply z-40 rounded-lg bg-white text-sm shadow-lg;\n}\n\n.react-datepicker-left {\n\t@apply absolute! top-11! right-auto! left-0! transform-none!;\n}\n\n.react-datepicker-right {\n\t@apply absolute! top-11! right-0! left-auto! transform-none!;\n}\n\n.react-datepicker__portal {\n\t@apply absolute top-12 right-0 z-10 w-72 transform-none rounded-sm border-2 border-surface-neutral bg-white px-3 py-2 text-sm shadow;\n}\n\n.react-datepicker__month-container {\n\t@apply flex h-[320px] w-72 flex-col p-3;\n}\n\n.react-datepicker__month {\n\t@apply flex flex-col;\n}\n\n.react-datepicker__current-month {\n\t@apply ml-2.5 text-lg font-semibold text-gray-800;\n}\n\n.react-datepicker__week {\n\t@apply flex justify-around;\n}\n\n.react-datepicker__day-names {\n\t@apply flex justify-around text-center text-xs font-medium text-placeholder;\n}\n\n.react-datepicker__day-name {\n\t@apply flex h-8 w-8 items-center justify-center rounded-full py-1;\n}\n\n.react-datepicker__navigation {\n\t@apply absolute top-2;\n}\n\n.react-datepicker__navigation--previous {\n\t@apply right-12 flex h-8 w-8 items-center justify-center rounded-sm transition hover:bg-surface-dark;\n}\n\n.react-datepicker__navigation--next {\n\t@apply right-4 flex h-8 w-8 items-center justify-center rounded-sm transition hover:bg-surface-dark;\n}\n\n.react-datepicker__day {\n\t@apply mb-1 flex h-8 w-8 cursor-pointer items-center justify-center rounded-sm py-1 text-sm leading-loose text-neutral transition;\n}\n\n.react-datepicker__day--disabled {\n\t@apply cursor-not-allowed opacity-40 hover:bg-transparent;\n}\n\n.react-datepicker__day--outside-month {\n\t@apply text-disabled;\n}\n\n.react-datepicker__day--in-range {\n\t@apply bg-surface-dark;\n}\n\n.react-datepicker__day--in-selecting-range {\n\t@apply bg-indigo-200;\n}\n\n.react-datepicker__day--selecting-range-start {\n\t@apply border-2 border-indigo-600 bg-white;\n}\n\n.react-datepicker__day--selecting-range-end {\n\t@apply border-2 border-indigo-600 bg-white;\n}\n\n.react-datepicker__day--selected {\n\t@apply bg-indigo-600 text-white;\n}\n\n.react-datepicker__day--range-start {\n\t@apply bg-indigo-600 text-white hover:bg-white hover:text-neutral;\n}\n\n.react-datepicker__day--range-end {\n\t@apply bg-indigo-600 text-white hover:bg-white hover:text-neutral;\n}\n\n.react-datepicker__aria-live,\n.react-datepicker__triangle {\n\t@apply hidden;\n}\n\n.react-datepicker__day--today {\n\t@apply bg-indigo-200;\n}\n\n.react-datepicker__day--highlighted {\n\t@apply bg-indigo-200;\n}\n",":root {\n\t--react-international-phone-height: 2.375rem;\n\t--react-international-phone-border-radius: 0.375rem;\n}\n"],"mappings":";AAAA,WAAW;AACX,WAAW;AAEX,CAAC;AACA,SAAO,KAAK,WAAW,SAAS,QAAQ;AACzC;AAEA,CAAC;AACA,SAAO,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,cAAc;AAC5D;AAEA,CAAC;AACA,SAAO,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc;AAC5D;AAEA,CAAC;AACA,SAAO,SAAS,OAAO,QAAQ,KAAK,KAAK,eAAe,WAAW,SAAS,uBAAuB,SAAS,KAAK,KAAK,QAAQ;AAC/H;AAEA,CAAC;AACA,SAAO,KAAK,EAAE,CAAC,OAAO,KAAK,SAAS;AACrC;AAEA,CAAC;AACA,SAAO,KAAK;AACb;AAEA,CAAC;AACA,SAAO,IAAI,GAAG,QAAQ,cAAc;AACrC;AAEA,CAAC;AACA,SAAO,KAAK;AACb;AAEA,CAAC;AACA,SAAO,KAAK,eAAe,YAAY,QAAQ,YAAY;AAC5D;AAEA,CAAC;AACA,SAAO,KAAK,IAAI,IAAI,aAAa,eAAe,aAAa;AAC9D;AAEA,CAAC;AACA,SAAO,SAAS;AACjB;AAEA,CAAC;AACA,SAAO,SAAS,KAAK,IAAI,IAAI,aAAa,eAAe,WAAW,WAAW,KAAK,CAAC;AACtF;AAEA,CAAC;AACA,SAAO,QAAQ,KAAK,IAAI,IAAI,aAAa,eAAe,WAAW,WAAW,KAAK,CAAC;AACrF;AAEA,CAAC;AACA,SAAO,KAAK,KAAK,IAAI,IAAI,eAAe,aAAa,eAAe,WAAW,KAAK,QAAQ,cAAc,aAAa;AACxH;AAEA,CAAC;AACA,SAAO,mBAAmB,WAAW,KAAK,CAAC;AAC5C;AAEA,CAAC;AACA,SAAO;AACR;AAEA,CAAC;AACA,SAAO;AACR;AAEA,CAAC;AACA,SAAO;AACR;AAEA,CAAC;AACA,SAAO,SAAS,kBAAkB;AACnC;AAEA,CAAC;AACA,SAAO,SAAS,kBAAkB;AACnC;AAEA,CAAC;AACA,SAAO,cAAc;AACtB;AAEA,CAAC;AACA,SAAO,cAAc,WAAW,KAAK,CAAC,SAAS,KAAK,CAAC;AACtD;AAEA,CAAC;AACA,SAAO,cAAc,WAAW,KAAK,CAAC,SAAS,KAAK,CAAC;AACtD;AAEA,CAAC;AACD,CAAC;AACA,SAAO;AACR;AAEA,CAAC;AACA,SAAO;AACR;AAEA,CAAC;AACA,SAAO;AACR;;;AC1GA;AACC,sCAAoC;AACpC,6CAA2C;AAC5C;","names":[]}
|