@paygreen/pgui 3.0.15 → 3.1.1

package/src/components/select/select.css

@@ -18,6 +18,19 @@
   border-color: var(--chakra-colors-border-error) !important;
 }
 
+.select-custom__placeholder {
+  color: var(--chakra-colors-fg-muted) !important;
+}
+
+.select-custom__control--is-disabled {
+  opacity: 0.5 !important;
+  cursor: not-allowed !important;
+}
+
+.select-custom__control--is-disabled .select-custom__placeholder {
+  color: var(--chakra-colors-fg-muted) !important;
+}
+
 .select-custom__single-value {
   color: var(--chakra-colors-fg) !important;
 }
@@ -28,7 +41,7 @@
 
 .select-custom__control,
 .select-custom__control--is-focused {
-  min-height: var(--chakra-sizes-10) !important;
+  min-height: var(--chakra-sizes-9) !important;
   background-color: transparent !important;
 }
 
@@ -41,6 +54,17 @@
   border-color: var(--chakra-colors-color-palette-focus-ring) !important;
 }
 
+@keyframes pgui-select-menu-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .select-custom__menu {
   z-index: 1000 !important;
   border: 1px solid var(--chakra-colors-border) !important;
@@ -49,6 +73,7 @@
     0 4px 6px -1px rgba(0, 0, 0, 0.1),
     0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
   border-radius: var(--chakra-radii-md) !important;
+  animation: pgui-select-menu-in 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .select-custom__menu-list {

package/src/styles/index.css

@@ -1,12 +1,8 @@
 /* Fonts */
 @import "@fontsource-variable/geist/index.css";
 
-/* CSS for react-datepicker */
-@import "react-datepicker/dist/react-datepicker.css";
-
 /* CSS for react-phone-number-input */
 @import "react-phone-number-input/style.css";
 
 /* Custom components styles */
-@import "../components/date-picker/date-picker.css";
 @import "../components/select/select.css";

package/src/components/date-picker/date-picker.css

@@ -1,252 +0,0 @@
-/* Base */
-.chakra-datepicker {
-  width: 100%;
-}
-
-.chakra-datepicker .react-datepicker {
-  font-size: var(--chakra-font-sizes-sm);
-  font-family: inherit;
-  border: 1px solid var(--chakra-colors-border);
-  border-radius: var(--chakra-radii-md);
-  background-color: var(--chakra-colors-white);
-  box-shadow: var(--chakra-shadows-md);
-  width: 100%;
-}
-
-.chakra-datepicker .react-datepicker-wrapper {
-  width: 100%;
-}
-
-/* Header */
-.chakra-datepicker .react-datepicker__header {
-  background-color: transparent;
-  border-bottom: 1px solid var(--chakra-colors-border);
-  padding: 0.5rem;
-}
-
-/* Month and year select */
-.chakra-datepicker .react-datepicker__month-select,
-.chakra-datepicker .react-datepicker__year-select {
-  background-color: var(--chakra-colors-white);
-  border: 1px solid var(--chakra-colors-border);
-  border-radius: var(--chakra-radii-md);
-  padding: 0.2rem;
-  margin: 0.2rem;
-}
-
-/* Time */
-.chakra-datepicker
-  .react-datepicker__time-container
-  .react-datepicker__time
-  .react-datepicker__time-box {
-  width: 80px;
-}
-
-/* Days */
-.chakra-datepicker .react-datepicker__day {
-  color: var(--chakra-colors-lm_gray-30);
-  border-radius: var(--chakra-radii-md);
-  margin: 0.1rem;
-  width: 1.75rem;
-  line-height: 1.75rem;
-}
-
-/* Days hover */
-.chakra-datepicker .react-datepicker__day:hover {
-  background-color: var(--chakra-colors-lm_gray-80);
-}
-
-/* Days keyboard selected */
-.chakra-datepicker .react-datepicker__day--keyboard-selected {
-  background-color: var(--chakra-colors-lm_cello-50) !important;
-  color: var(--chakra-colors-white) !important;
-}
-
-/* Days selected */
-.chakra-datepicker
-  .react-datepicker__day--selecting-range-start
-  .chakra-datepicker
-  .react-datepicker__day--selecting-range-end {
-  background-color: var(--chakra-colors-lm_cello-40) !important;
-  color: var(--chakra-colors-white) !important;
-}
-
-.chakra-datepicker .react-datepicker__day--in-selecting-range {
-  background-color: var(--chakra-colors-lm_cello-50) !important;
-  color: var(--chakra-colors-white) !important;
-}
-
-.chakra-datepicker .react-datepicker__day--in-range {
-  background-color: var(--chakra-colors-lm_cello-50) !important;
-  color: var(--chakra-colors-white) !important;
-}
-
-.chakra-datepicker .react-datepicker__day--range-start {
-  background-color: var(--chakra-colors-lm_cello-40) !important;
-  color: var(--chakra-colors-white) !important;
-}
-
-.chakra-datepicker .react-datepicker__day--range-end {
-  background-color: var(--chakra-colors-lm_cello-40) !important;
-  color: var(--chakra-colors-white) !important;
-}
-
-.chakra-datepicker .react-datepicker__day--selected {
-  background-color: var(--chakra-colors-lm_cello-40) !important;
-  color: var(--chakra-colors-white) !important;
-}
-
-.chakra-datepicker .react-datepicker__sr-only {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  white-space: nowrap !important;
-  border: 0 !important;
-  visibility: hidden !important;
-}
-
-/* Days disabled */
-.chakra-datepicker .react-datepicker__day--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Days in selecting range */
-.chakra-datepicker .react-datepicker__day--in-selecting-range {
-  background-color: var(--chakra-colors-brand-100);
-}
-
-/* Time container */
-.chakra-datepicker .react-datepicker__time-container {
-  border-left: 1px solid var(--chakra-colors-border);
-  width: 5rem;
-}
-
-/* Time header */
-.chakra-datepicker .react-datepicker-time__header {
-  font-size: var(--chakra-font-sizes-sm);
-}
-
-/* Time box */
-.chakra-datepicker .react-datepicker__time-box {
-  border-radius: 0;
-}
-
-/* Time list item */
-.chakra-datepicker .react-datepicker__time-list-item {
-  color: var(--chakra-colors-lm_gray-700);
-  padding: 0.25rem;
-}
-
-/* Time list item hover */
-.chakra-datepicker .react-datepicker__time-list-item:hover {
-  background-color: var(--chakra-colors-lm_gray-100);
-}
-
-/* Time list item selected */
-.chakra-datepicker .react-datepicker__time-list-item--selected {
-  background-color: var(--chakra-colors-lm_cello-40) !important;
-  color: var(--chakra-colors-white) !important;
-}
-
-/* Day name */
-.chakra-datepicker .react-datepicker__day-name {
-  color: var(--chakra-colors-lm_gray-600);
-}
-
-/* Current month */
-.chakra-datepicker .react-datepicker__current-month {
-  display: none;
-}
-
-/* Navigation */
-.chakra-datepicker .react-datepicker__navigation-icon {
-  margin-top: 1rem;
-}
-
-/* Navigation icon */
-.chakra-datepicker .react-datepicker__navigation-icon::before {
-  border-color: var(--chakra-colors-gray-600);
-}
-
-/* Triangle */
-.chakra-datepicker .react-datepicker__triangle {
-  display: none !important;
-}
-
-/* Dark mode styles */
-/* Base */
-.chakra-datepicker[data-theme="dark"] .react-datepicker {
-  background-color: var(--chakra-colors-lm_gray-20);
-  border-color: var(--chakra-colors-lm_gray-30);
-}
-
-.chakra-datepicker[data-theme="dark"] .react-datepicker__header {
-  background-color: var(--chakra-colors-lm_gray-30);
-  border-color: var(--chakra-colors-lm_gray-35);
-}
-
-.chakra-datepicker[data-theme="dark"] .react-datepicker__day {
-  color: var(--chakra-colors-lm_gray-60);
-}
-
-.chakra-datepicker[data-theme="dark"] .react-datepicker__day:hover {
-  background-color: var(--chakra-colors-lm_gray-35);
-}
-
-.chakra-datepicker[data-theme="dark"] .react-datepicker__day--in-selecting-range {
-  background-color: var(--chakra-colors-lm_cello-20);
-}
-
-.chakra-datepicker[data-theme="dark"] .react-datepicker__time-container {
-  border-color: var(--chakra-colors-lm_gray-600);
-}
-
-.chakra-datepicker[data-theme="dark"] .react-datepicker-time__header {
-  color: var(--chakra-colors-lm_gray-100);
-}
-
-.chakra-datepicker[data-theme="dark"] .react-datepicker__time-list {
-  background-color: var(--chakra-colors-lm_gray-800);
-}
-
-.chakra-datepicker[data-theme="dark"] .react-datepicker__time-list-item {
-  color: var(--chakra-colors-lm_gray-300);
-}
-
-.chakra-datepicker[data-theme="dark"] .react-datepicker__time-list-item:hover {
-  background-color: var(--chakra-colors-lm_gray-600);
-}
-
-.chakra-datepicker[data-theme="dark"] .react-datepicker__time-list-item--selected {
-  background-color: var(--chakra-colors-lm_cello-40) !important;
-  color: var(--chakra-colors-white) !important;
-}
-
-.chakra-datepicker[data-theme="dark"] .react-datepicker__time-box {
-  background-color: var(--chakra-colors-gray-800);
-}
-
-.chakra-datepicker[data-theme="dark"] .react-datepicker__day-name {
-  color: var(--chakra-colors-lm_gray-50);
-}
-
-.chakra-datepicker[data-theme="dark"] .react-datepicker__current-month {
-  color: var(--chakra-colors-lm_gray-75);
-}
-
-.chakra-datepicker[data-theme="dark"] .react-datepicker__navigation-icon::before {
-  border-color: var(--chakra-colors-lm_gray-75);
-}
-
-/* Month and year select */
-.chakra-datepicker[data-theme="dark"] .react-datepicker__month-select,
-.chakra-datepicker[data-theme="dark"] .react-datepicker__year-select {
-  background-color: var(--chakra-colors-lm_gray-700);
-  color: var(--chakra-colors-white);
-  border: 1px solid var(--chakra-colors-border-emphasized);
-}