@candidhealth/react-vitals 1.0.0-alpha.1

package/README.md

@@ -0,0 +1,25 @@
+# Core Components
+
+Our core components are a set of system-level UI components which can be used to build delightful user interfaces.
+
+In addition to core components we also maintain a set of Candid-specific components in `src/components`
+
+## Storybook
+
+Storybook is a UI component explorer which we use for developing core components in isolation.
+
+Most of our core components can be viewed in storybook.
+
+You can run Storybook with `pnpm run storybook`.
+
+## Component Library
+
+Our storybook instance is also hosted online!
+
+Visit https://www.chromatic.com/library?appId=646772265e2d5a5aee87e28b to see a library of the reusable components
+we've built for use within the app.
+
+To see components in an actual Storybook environment, click the "View Storybook"
+button at the top right of the library page.
+
+Connect using Github if this is your first time accessing the component library.

package/base.css

@@ -0,0 +1,105 @@
+/*
+  Base form reset styles for @candidhealth/react-vitals.
+
+  These styles replicate the subset of @tailwindcss/forms that our components
+  rely on, so consumers don't need to install that plugin separately.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+
+  [type="text"],
+  [type="email"],
+  [type="url"],
+  [type="password"],
+  [type="number"],
+  [type="date"],
+  [type="search"],
+  [type="tel"],
+  textarea {
+    appearance: none;
+    background-color: #fff;
+    border-width: 1px;
+    border-radius: 0;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  [type="text"]:focus,
+  [type="email"]:focus,
+  [type="url"]:focus,
+  [type="password"]:focus,
+  [type="number"]:focus,
+  [type="date"]:focus,
+  [type="search"]:focus,
+  [type="tel"]:focus,
+  textarea:focus {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    border-color: var(--color-indigo-400, #818cf8);
+    --tw-ring-color: var(--color-indigo-200, #c7d2fe);
+  }
+
+  [type="checkbox"],
+  [type="radio"] {
+    appearance: none;
+    padding: 0;
+    print-color-adjust: exact;
+    display: inline-block;
+    vertical-align: middle;
+    background-origin: border-box;
+    user-select: none;
+    flex-shrink: 0;
+    height: 1rem;
+    width: 1rem;
+    color: var(--color-indigo-600, #4f46e5);
+    background-color: #fff;
+    border-width: 1px;
+    --tw-shadow: 0 0 #0000;
+  }
+
+  [type="checkbox"] {
+    border-radius: 0.25rem;
+  }
+
+  [type="radio"] {
+    border-radius: 9999px;
+  }
+
+  [type="checkbox"]:checked,
+  [type="radio"]:checked {
+    border-color: transparent;
+    background-color: currentColor;
+    background-size: 100% 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+
+  [type="checkbox"]:checked {
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+  }
+
+  [type="radio"]:checked {
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+  }
+
+  [type="checkbox"]:indeterminate {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
+    border-color: transparent;
+    background-color: currentColor;
+    background-size: 100% 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+
+  button,
+  [role="button"] {
+    cursor: pointer;
+  }
+}

package/dist/index.css

@@ -0,0 +1,88 @@
+/* src/core/date-picker/DatePicker.css */
+@reference "../theme.css";
+.react-datepicker-popper {
+  @apply z-40 rounded-lg bg-white text-sm shadow-lg;
+}
+.react-datepicker-left {
+  @apply absolute! top-11! right-auto! left-0! transform-none!;
+}
+.react-datepicker-right {
+  @apply absolute! top-11! right-0! left-auto! transform-none!;
+}
+.react-datepicker__portal {
+  @apply absolute top-12 right-0 z-10 w-72 transform-none rounded-sm border-2 border-gray-200 bg-white px-3 py-2 text-sm shadow;
+}
+.react-datepicker__month-container {
+  @apply flex h-[320px] w-72 flex-col p-3;
+}
+.react-datepicker__month {
+  @apply flex flex-col;
+}
+.react-datepicker__current-month {
+  @apply ml-2.5 text-lg font-semibold text-gray-800;
+}
+.react-datepicker__week {
+  @apply flex justify-around;
+}
+.react-datepicker__day-names {
+  @apply flex justify-around text-center text-xs font-medium text-gray-400;
+}
+.react-datepicker__day-name {
+  @apply flex h-8 w-8 items-center justify-center rounded-full py-1;
+}
+.react-datepicker__navigation {
+  @apply absolute top-2;
+}
+.react-datepicker__navigation--previous {
+  @apply right-12 flex h-8 w-8 items-center justify-center rounded-sm transition hover:bg-gray-200;
+}
+.react-datepicker__navigation--next {
+  @apply right-4 flex h-8 w-8 items-center justify-center rounded-sm transition hover:bg-gray-200;
+}
+.react-datepicker__day {
+  @apply mb-1 flex h-8 w-8 cursor-pointer items-center justify-center rounded-sm py-1 text-sm leading-loose text-gray-700 transition;
+}
+.react-datepicker__day--disabled {
+  @apply cursor-not-allowed opacity-40 hover:bg-transparent;
+}
+.react-datepicker__day--outside-month {
+  @apply text-gray-300;
+}
+.react-datepicker__day--in-range {
+  @apply bg-gray-200;
+}
+.react-datepicker__day--in-selecting-range {
+  @apply bg-indigo-200;
+}
+.react-datepicker__day--selecting-range-start {
+  @apply border-2 border-indigo-600 bg-white;
+}
+.react-datepicker__day--selecting-range-end {
+  @apply border-2 border-indigo-600 bg-white;
+}
+.react-datepicker__day--selected {
+  @apply bg-indigo-600 text-white;
+}
+.react-datepicker__day--range-start {
+  @apply bg-indigo-600 text-white hover:bg-white hover:text-gray-700;
+}
+.react-datepicker__day--range-end {
+  @apply bg-indigo-600 text-white hover:bg-white hover:text-gray-700;
+}
+.react-datepicker__aria-live,
+.react-datepicker__triangle {
+  @apply hidden;
+}
+.react-datepicker__day--today {
+  @apply bg-indigo-200;
+}
+.react-datepicker__day--highlighted {
+  @apply bg-indigo-200;
+}
+
+/* src/core/phone-number/styles.css */
+:root {
+  --react-international-phone-height: 2.375rem;
+  --react-international-phone-border-radius: 0.375rem;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +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-gray-200 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-gray-400;\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-gray-200;\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-gray-200;\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-gray-700 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-gray-300;\n}\n\n.react-datepicker__day--in-range {\n\t@apply bg-gray-200;\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-gray-700;\n}\n\n.react-datepicker__day--range-end {\n\t@apply bg-indigo-600 text-white hover:bg-white hover:text-gray-700;\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;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,gBAAgB,SAAS,KAAK,KAAK,QAAQ;AACxH;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,cAAc;AACzH;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;;;ACzGA;AACC,sCAAoC;AACpC,6CAA2C;AAC5C;","names":[]}