@colisweb/rescript-toolkit 4.12.1 → 4.14.0

package/src/ui/styles.css

@@ -1,11 +1,10 @@
 /* purgecss start ignore */
+@import url("./tailwind-init.css");
 @import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700");
 @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700");
 @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap");
-@import url("@colisweb/react-day-picker/lib/style.css");
-@tailwind base;
-@tailwind components;
+@import url("react-day-picker/dist/style.css");
 
 @layer components {
   .cw-tab-list {
@@ -23,7 +22,6 @@
   }
 }
 
-@tailwind utilities;
 :root {
   --reach-dialog: 1;
 }
@@ -43,8 +41,6 @@ body,
   @apply h-full flex flex-col justify-between;
 }
 
-/* Reach UI */
-
 /* Animations */
 @keyframes spin {
   from {
@@ -65,6 +61,7 @@ select:not([disabled]):not([tabindex="-1"]):focus,
 textarea:not([disabled]):not([tabindex="-1"]):focus,
 button:not([disabled]):not([tabindex="-1"]):focus,
 iframe:not([tabindex="-1"]):focus,
+[tabindex]:not([tabindex="-1"]):focus,
 [contentEditable="true"]:not([tabindex="-1"]):focus,
 .focus {
   outline: none !important;
@@ -88,41 +85,6 @@ iframe:not([tabindex="-1"]):focus,
   @apply bg-info-500;
 }
 
-.input-range
-  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(
-    .DayPicker-Day--end
-  ):not(.DayPicker-Day--outside) {
-  background-color: #f0f8ff !important;
-  color: #4a90e2;
-}
-
-.input-range .DayPicker-Day {
-  border-radius: 0 !important;
-}
-
-.input-range .DayPicker-Day--start {
-  border-top-left-radius: 50% !important;
-  border-bottom-left-radius: 50% !important;
-}
-
-.input-range .DayPicker-Day--end {
-  border-top-right-radius: 50% !important;
-  border-bottom-right-radius: 50% !important;
-}
-
-.input-range .DayPickerInput-Overlay {
-  width: 580px;
-  z-index: 31;
-}
-
-.input-range-to .DayPickerInput-Overlay {
-  margin-left: -198px;
-}
-
-.input-range .DayPickerInput input {
-  @apply p-2 border rounded-sm cursor-pointer;
-}
-
 .react-select__control {
   @apply border-gray-300 !important;
 }
@@ -147,26 +109,46 @@ iframe:not([tabindex="-1"]):focus,
   @apply shadow-none !important;
 }
 
-.Selectable
-  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(
-    .DayPicker-Day--end
-  ):not(.DayPicker-Day--outside) {
-  background-color: #f0f8ff !important;
-  color: #4a90e2;
+.cw-Tabs {
+  @apply flex flex-row bg-gray-200 rounded-full h-6 text-sm mb-2;
+}
+
+.cw-Tabs [data-selected] {
+  background: linear-gradient(270deg, #11a3b6 0%, #27d0dc 100%);
+  color: white;
+}
+
+.cw-Tabs [data-selected]:hover {
+  color: white;
+  @apply bg-primary-500;
+}
+
+.cw-Tabs [data-reach-tab] {
+  @apply flex items-center justify-center w-full py-3 rounded-full font-display;
 }
 
-.Selectable .DayPicker-Day {
-  border-radius: 0 !important;
+.cw-Tabs [data-reach-tab]:hover {
+  @apply bg-primary-300;
+}
+
+.cw-Tabs.cw-Tabs--big {
+  @apply h-10 text-xl;
+}
+
+.cw-ButtonGroup > button {
+  @apply whitespace-nowrap h-full px-3 md:px-4 flex items-center justify-center rounded-3xl py-3;
+}
+.cw-ButtonGroup > button:hover {
+  @apply bg-primary-300;
 }
 
-.Selectable .DayPicker-Day--start {
-  border-top-left-radius: 50% !important;
-  border-bottom-left-radius: 50% !important;
+.cw-ButtonGroup > button.selected {
+  background: linear-gradient(270deg, #11a3b6 0%, #27d0dc 100%);
+  color: white;
 }
 
-.Selectable .DayPicker-Day--end {
-  border-top-right-radius: 50% !important;
-  border-bottom-right-radius: 50% !important;
+.cw-Checkbox > input:checked + .checkmark > * {
+  @apply opacity-100;
 }
 
 code {
@@ -203,7 +185,6 @@ code {
     visibility: visible;
     opacity: 100%;
   }
-
   .sidenav.sidenav--closed .sidenav-link .sidenav-link-tooltip:before {
     content: "";
     position: absolute;
@@ -220,85 +201,55 @@ input::-webkit-inner-spin-button {
   margin: 0;
 }
 
-/* Firefox */
-input[type="number"] {
-  -moz-appearance: textfield;
-}
+/* React day picker */
 
-/* Day picker */
-.DayPicker .DayPicker-Day {
-  width: 40px !important;
-  height: 40px !important;
-}
-.DayPicker .DayPicker-Day--selected {
-  border-radius: 0 !important;
-}
-.DayPicker
-  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end) {
-  background-color: #e7edf3 !important;
-  color: #15373a;
-}
-.DayPicker .DayPicker-Day--selected.DayPicker-Day--start {
-  border-top-left-radius: 50% !important;
-  border-bottom-left-radius: 50% !important;
-  background-color: #15cbe3 !important;
-  color: #fff;
-}
-.DayPicker .DayPicker-Day--selected.DayPicker-Day--end {
-  border-top-right-radius: 50% !important;
-  border-bottom-right-radius: 50% !important;
-  background-color: #15cbe3 !important;
-  color: #fff;
-}
-.DayPicker .DayPicker-Day--closed {
-  border-radius: 0 !important;
-}
-.DayPicker
-  .DayPicker-Day--closed:not(.DayPicker-Day--start):not(.DayPicker-Day--end) {
-  background-color: #ff634b !important;
-  color: #15373a;
-}
-.DayPicker
-  .DayPicker-Day--closed.DayPicker-Day--start:not(.DayPicker-Day--end) {
-  border-top-left-radius: 50% !important;
-  border-bottom-left-radius: 50% !important;
-  border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-  background-color: #ff904b !important;
-  color: #15373a;
-}
-.DayPicker
-  .DayPicker-Day--closed.DayPicker-Day--end:not(.DayPicker-Day--start) {
-  border-top-right-radius: 50% !important;
-  border-bottom-right-radius: 50% !important;
-  border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
-  background-color: #ff904b !important;
-  color: #15373a;
-}
-.DayPicker .DayPicker-Day--closed.DayPicker-Day--start.DayPicker-Day--end {
-  background-color: #ff904b !important;
-  color: #15373a;
+.rdp-caption_label {
+  @apply text-neutral-700 capitalize;
 }
 
-.cw-ButtonGroup > button {
-  @apply whitespace-nowrap h-full px-3 md:px-4 flex items-center justify-center rounded-3xl py-3;
+.rdp-caption_label {
+  @apply text-neutral-700;
 }
-.cw-ButtonGroup > button:hover {
-  @apply bg-primary-300;
+.rdp-day {
+  @apply text-neutral-700;
 }
-
-.cw-ButtonGroup > button.selected {
-  background: linear-gradient(270deg, #11a3b6 0%, #27d0dc 100%);
-  color: white;
+.rdp-day_today {
+  @apply text-danger-700;
+}
+.rdp-head_cell {
+  @apply text-neutral-600;
+}
+.rdp-day_selected,
+.rdp-day_selected:hover {
+  @apply bg-primary-500 text-white;
+}
+.rdp-day_range_middle,
+.rdp-day_range_middle:hover {
+  @apply bg-gray-300 text-black;
+}
+.rdp-day_selected.rdp-day_range_start:not(.rdp-day_range_end),
+.rdp-day_range_middle:hover {
+  @apply !rounded-tr-none !rounded-br-none;
 }
 
-.cw-Checkbox > input:checked + .checkmark > * {
-  @apply opacity-100;
+.rdp-day_closed,
+.rdp-day_closed:hover {
+  @apply !bg-[#ff904b] !text-black;
+}
+.rdp-day_closed:not(.rdp-day_range_start):not(.rdp-day_range_end),
+.rdp-day_closed:not(.rdp-day_range_start):not(.rdp-day_range_end):hover {
+  @apply !bg-[#ff634b] !text-black !rounded-none;
+}
+.rdp-button[disabled].rdp-day_closed {
+  @apply !opacity-100;
+}
+.rdp-button[disabled] {
+  @apply cursor-not-allowed;
 }
 
-.cw-Datepicker.DayPicker .DayPicker-Day.DayPicker-Day--selected {
-  @apply !bg-primary-500 !rounded-full text-white;
+/* Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
 }
 
 /* purgecss end ignore */

package/src/ui/tailwind-init.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/vendors/Browser.res

@@ -46,6 +46,8 @@ module DomElement = {
     bottom: float,
   }
   @send external getBoundingClientRect: Dom.element => rect = "getBoundingClientRect"
+
+  @send external focus: Dom.element => unit = "focus"
 }
 
 @val

package/src/vendors/Browser.resi

@@ -33,6 +33,7 @@ module DomElement: {
     bottom: float,
   }
   let getBoundingClientRect: Dom.element => rect
+  let focus: Dom.element => unit
 }
 
 let innerWidth: int