best-react-datepicker 0.2.1 → 0.2.3

package/dist/styles.css

@@ -193,6 +193,61 @@
   flex-shrink: 0;
 }
 
+/* === Unified Range Input (antd-style) === */
+.brdp-unified {
+  display: flex;
+  align-items: center;
+  height: var(--brdp-input-height);
+  border: 1px solid var(--brdp-color-border-input);
+  border-radius: var(--brdp-radius-input);
+  background: var(--brdp-color-bg);
+  transition: border-color var(--brdp-transition-duration) var(--brdp-transition-timing),
+              box-shadow var(--brdp-transition-duration) var(--brdp-transition-timing);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.brdp-unified:hover {
+  border-color: var(--brdp-color-border-input-focus);
+}
+
+.brdp-unified--focused {
+  border-color: var(--brdp-color-border-input-focus);
+  box-shadow: var(--brdp-shadow-input-focus);
+}
+
+.brdp-unified__input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  padding: 0 var(--brdp-spacing-md);
+  border: none;
+  background: transparent;
+  color: var(--brdp-color-text);
+  font-family: var(--brdp-font-family);
+  font-size: var(--brdp-font-size);
+  outline: none;
+  box-sizing: border-box;
+  text-align: center;
+}
+
+.brdp-unified__input::placeholder {
+  color: var(--brdp-color-text-placeholder);
+}
+
+.brdp-unified__separator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--brdp-color-text-disabled);
+  padding: 0 2px;
+}
+
+.brdp-unified__arrow-icon {
+  display: block;
+}
+
 /* === Footer === */
 .brdp-footer {
   display: flex;
@@ -309,14 +364,15 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: var(--brdp-cell-size);
+  height: var(--brdp-cell-size);
   padding: 0;
   border: none;
   border-radius: var(--brdp-radius-full);
   background: none;
   color: var(--brdp-color-text-muted);
   cursor: pointer;
+  flex-shrink: 0;
   transition: background var(--brdp-transition-duration) var(--brdp-transition-timing),
               color var(--brdp-transition-duration) var(--brdp-transition-timing);
 }
@@ -331,56 +387,129 @@
   cursor: not-allowed;
 }
 
-/* === Month/Year Dropdowns === */
+/* === Month/Year Dropdown Triggers === */
 .brdp-header__selects {
   display: flex;
   align-items: center;
   gap: 2px;
+  min-width: 0;
+  overflow: visible;
 }
 
-.brdp-header__select-wrapper {
+.brdp-header__dropdown-anchor {
   position: relative;
-  display: inline-flex;
-  align-items: center;
 }
 
-.brdp-header__select {
+.brdp-header__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
   font-size: var(--brdp-font-size);
   font-weight: var(--brdp-font-weight-bold);
   font-family: var(--brdp-font-family);
   color: var(--brdp-color-text-header);
   background: transparent;
-  border: 1px solid transparent;
+  border: none;
   border-radius: var(--brdp-radius-md);
-  padding: 4px 20px 4px 8px;
+  padding: var(--brdp-spacing-xs) var(--brdp-spacing-sm);
   cursor: pointer;
   outline: none;
   transition: background var(--brdp-transition-duration) var(--brdp-transition-timing),
-              border-color var(--brdp-transition-duration) var(--brdp-transition-timing);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
+              color var(--brdp-transition-duration) var(--brdp-transition-timing);
   line-height: 1.4;
+  white-space: nowrap;
 }
 
-.brdp-header__select:hover {
+.brdp-header__trigger:hover {
   background: var(--brdp-color-bg-hover);
 }
 
-.brdp-header__select:focus {
-  border-color: var(--brdp-color-accent);
+.brdp-header__trigger--open {
   background: var(--brdp-color-bg-hover);
+  color: var(--brdp-color-accent);
 }
 
-.brdp-header__select-chevron {
+/* === Dropdown Panel === */
+.brdp-dropdown {
   position: absolute;
-  right: 6px;
-  top: 50%;
-  transform: translateY(-50%);
-  pointer-events: none;
-  color: var(--brdp-color-text-muted);
+  top: calc(100% + 4px);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+  background: var(--brdp-color-bg-popover);
+  border: 1px solid var(--brdp-color-border-popover);
+  border-radius: var(--brdp-radius-lg);
+  box-shadow: var(--brdp-shadow-popover);
+  padding: var(--brdp-spacing-sm);
+  animation: brdp-dropdown-in var(--brdp-transition-duration) var(--brdp-transition-timing);
+}
+
+@keyframes brdp-dropdown-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+/* === Dropdown Grid === */
+.brdp-dropdown__grid {
+  display: grid;
+  gap: 2px;
+}
+
+.brdp-dropdown__grid--months {
+  grid-template-columns: repeat(3, 1fr);
+  width: 180px;
+}
+
+.brdp-dropdown__grid--years {
+  grid-template-columns: repeat(4, 1fr);
+  width: 220px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+/* === Dropdown Item === */
+.brdp-dropdown__item {
   display: flex;
   align-items: center;
+  justify-content: center;
+  padding: 6px 4px;
+  border: none;
+  border-radius: var(--brdp-radius-sm);
+  background: transparent;
+  color: var(--brdp-color-text);
+  font-family: var(--brdp-font-family);
+  font-size: var(--brdp-font-size-sm);
+  font-weight: var(--brdp-font-weight-normal);
+  cursor: pointer;
+  transition: background var(--brdp-transition-duration) var(--brdp-transition-timing),
+              color var(--brdp-transition-duration) var(--brdp-transition-timing);
+  white-space: nowrap;
+}
+
+.brdp-dropdown__item:hover {
+  background: var(--brdp-color-bg-hover);
+}
+
+.brdp-dropdown__item--active {
+  background: var(--brdp-color-accent);
+  color: var(--brdp-color-text-selected);
+  font-weight: var(--brdp-font-weight-medium);
+}
+
+.brdp-dropdown__item--active:hover {
+  background: var(--brdp-color-accent-dark);
+}
+
+.brdp-dropdown__item--disabled {
+  color: var(--brdp-color-text-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
 }
 
 /* === Calendar === */
@@ -394,13 +523,17 @@
 }
 
 .brdp-calendar__month {
-  min-width: calc(var(--brdp-cell-size) * 7 + var(--brdp-cell-gap) * 6);
+  min-width: max(
+    calc(var(--brdp-cell-size) * 7 + var(--brdp-cell-gap) * 6),
+    280px
+  );
 }
 
 /* === Grid === */
 .brdp-grid {
   border-collapse: separate;
   border-spacing: var(--brdp-cell-gap);
+  width: 100%;
 }
 
 .brdp-grid__weekdays {
@@ -517,15 +650,25 @@
 .brdp-day--range-start .brdp-day__btn {
   background: var(--brdp-color-bg-selected);
   color: var(--brdp-color-text-selected);
+  font-weight: var(--brdp-font-weight-medium);
   border-radius: var(--brdp-radius-day) 0 0 var(--brdp-radius-day);
 }
 
+.brdp-day--range-start .brdp-day__btn:hover {
+  background: var(--brdp-color-bg-selected-hover);
+}
+
 .brdp-day--range-end .brdp-day__btn {
   background: var(--brdp-color-bg-selected);
   color: var(--brdp-color-text-selected);
+  font-weight: var(--brdp-font-weight-medium);
   border-radius: 0 var(--brdp-radius-day) var(--brdp-radius-day) 0;
 }
 
+.brdp-day--range-end .brdp-day__btn:hover {
+  background: var(--brdp-color-bg-selected-hover);
+}
+
 .brdp-day--range-start.brdp-day--range-end .brdp-day__btn {
   border-radius: var(--brdp-radius-day);
 }
@@ -540,12 +683,40 @@
   background: var(--brdp-color-bg-range-hover);
 }
 
+/* Preview range (hover while picking second date) */
 .brdp-day--range-preview .brdp-day__btn {
   background: var(--brdp-color-bg-range);
+  color: var(--brdp-color-text-range);
   border-radius: 0;
   opacity: 0.6;
 }
 
+/* Range start must always stay solid during preview — never dim */
+.brdp-day--range-start.brdp-day--range-preview .brdp-day__btn,
+.brdp-day--range-start .brdp-day__btn {
+  background: var(--brdp-color-bg-selected);
+  color: var(--brdp-color-text-selected);
+  opacity: 1;
+  border-radius: var(--brdp-radius-day);
+}
+
+.brdp-day--range-end.brdp-day--range-preview .brdp-day__btn,
+.brdp-day--range-end .brdp-day__btn {
+  background: var(--brdp-color-bg-selected);
+  color: var(--brdp-color-text-selected);
+  opacity: 1;
+  border-radius: var(--brdp-radius-day);
+}
+
+/* When both start and end exist, use directional radius */
+.brdp-day--range-start:not(.brdp-day--range-end) .brdp-day__btn {
+  border-radius: var(--brdp-radius-day) 0 0 var(--brdp-radius-day);
+}
+
+.brdp-day--range-end:not(.brdp-day--range-start) .brdp-day__btn {
+  border-radius: 0 var(--brdp-radius-day) var(--brdp-radius-day) 0;
+}
+
 /* === Time Picker === */
 .brdp-time {
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "best-react-datepicker",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "The most customizable, accessible, zero-dependency React date picker",
   "license": "MIT",
   "type": "module",