@instincthub/react-ui 0.1.30 → 0.1.31

package/dist/src/assets/css/forms/date-range-picker.css

@@ -0,0 +1,184 @@
+/* DateRangePicker Component Styles */
+
+/* Wrapper */
+.ihub-daterange-picker-wrapper {
+  position: relative;
+  width: 100%;
+  font-family: var(--Nunito);
+}
+
+/* Input row: two inputs with arrow separator */
+.ihub-daterange-inputs {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Individual input container */
+.ihub-daterange-input-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border: var(--borderDefault);
+  border-radius: 6px;
+  background: var(--White, #ffffff);
+  transition: all 0.2s ease;
+  min-height: 48px;
+  flex: 1;
+  cursor: pointer;
+}
+
+.ihub-daterange-input-container:hover {
+  border-color: var(--DarkCyan, #00838f);
+}
+
+.ihub-daterange-input-container.active {
+  border-color: var(--DarkCyan, #00838f);
+  box-shadow: 0 0 0 0.2rem rgba(0, 131, 143, 0.25);
+}
+
+.ihub-daterange-input-container .ihub-datetime-input {
+  cursor: pointer;
+}
+
+/* Arrow separator */
+.ihub-daterange-separator-arrow {
+  font-size: 1.25rem;
+  color: var(--Rhythm, #69779b);
+  flex-shrink: 0;
+  user-select: none;
+}
+
+/* Constrain dropdown width within the wider range wrapper */
+.ihub-daterange-picker-wrapper .ihub-datetime-picker-dropdown {
+  right: auto;
+  max-width: 380px;
+}
+
+/* Phase indicator */
+.ihub-daterange-phase-indicator {
+  padding: 10px 16px;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--DarkCyan, #00838f);
+  background: var(--Magnolia, #f4f3fe);
+  text-align: center;
+  font-family: var(--Nunito);
+  border-bottom: 1px solid var(--LightGray, #dee2e6);
+}
+
+/* Quick preset buttons */
+.ihub-daterange-presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  justify-content: center;
+  padding: 12px 16px;
+  border-top: 1px solid var(--LightGray, #dee2e6);
+  background: var(--Gray, #f4f4f4);
+}
+
+/* Range day styles */
+.ihub-datetime-day.range-start {
+  background: var(--DarkCyan, #00838f);
+  color: var(--White, #ffffff);
+  border-radius: 6px 0 0 6px;
+}
+
+.ihub-datetime-day.range-end {
+  background: var(--DarkCyan, #00838f);
+  color: var(--White, #ffffff);
+  border-radius: 0 6px 6px 0;
+}
+
+.ihub-datetime-day.range-start.range-end {
+  border-radius: 6px;
+}
+
+.ihub-datetime-day.in-range {
+  background: rgba(0, 131, 143, 0.1);
+  color: var(--Gunmetal, #2c333a);
+  border-radius: 0;
+}
+
+.ihub-datetime-day.in-range:hover:not(:disabled) {
+  background: rgba(0, 131, 143, 0.2);
+}
+
+/* Responsive: stack inputs vertically on mobile */
+@media (max-width: 768px) {
+  .ihub-daterange-inputs {
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .ihub-daterange-separator-arrow {
+    transform: rotate(90deg);
+    font-size: 1rem;
+  }
+
+  .ihub-daterange-input-container {
+    width: 100%;
+  }
+
+  .ihub-daterange-presets {
+    gap: 4px;
+    padding: 8px 12px;
+  }
+
+  .ihub-daterange-presets .ihub-datetime-action-btn {
+    font-size: 0.6875rem;
+    padding: 5px 8px;
+  }
+}
+
+/* Dark mode via .DarkMode class */
+.DarkMode .ihub-daterange-input-container {
+  background: var(--DarkBackground, #2d3748);
+  border-color: var(--DarkBorder, #4a5568);
+}
+
+.DarkMode .ihub-daterange-input-container:hover {
+  border-color: var(--DarkCyan, #00838f);
+}
+
+.DarkMode .ihub-daterange-input-container.active {
+  border-color: var(--DarkCyan, #00838f);
+}
+
+.DarkMode .ihub-daterange-separator-arrow {
+  color: var(--DarkText, #e2e8f0);
+}
+
+.DarkMode .ihub-daterange-phase-indicator {
+  background: var(--DarkSecondary, #4a5568);
+  color: var(--TiffanyBlue, #0fabbc);
+  border-color: var(--DarkBorder, #4a5568);
+}
+
+.DarkMode .ihub-daterange-presets {
+  background: var(--DarkSecondary, #4a5568);
+  border-color: var(--DarkBorder, #4a5568);
+}
+
+.DarkMode .ihub-datetime-day.in-range {
+  background: rgba(0, 131, 143, 0.2);
+  color: var(--DarkText, #e2e8f0);
+}
+
+.DarkMode .ihub-datetime-day.in-range:hover:not(:disabled) {
+  background: rgba(0, 131, 143, 0.35);
+}
+
+/* Focus indicators for accessibility */
+.ihub-daterange-input-container:focus-within {
+  border-color: var(--DarkCyan, #00838f);
+  box-shadow: 0 0 0 0.2rem rgba(0, 131, 143, 0.25);
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .ihub-daterange-input-container {
+    transition: none;
+  }
+}

package/dist/src/assets/css/forms/datetime-picker.css

@@ -492,6 +492,9 @@
 }
 
 .ihub-datetime-link {
+  background: none;
+  border: none;
+  padding: 0;
   color: var(--Gunmetal, #2c333a);
   cursor: pointer;
   font-size: 0.875rem;
@@ -561,84 +564,82 @@
 }
 
 /* Dark mode support */
-@media (prefers-color-scheme: dark) {
-  .ihub-datetime-picker-dropdown {
-    background: var(--DarkBackground, #2d3748);
-    border-color: var(--DarkBorder, #4a5568);
-    color: var(--DarkText, #e2e8f0);
-  }
+.DarkMode .ihub-datetime-picker-dropdown {
+  background: var(--DarkBackground, #2d3748);
+  border-color: var(--DarkBorder, #4a5568);
+  color: var(--DarkText, #e2e8f0);
+}
 
-  .ihub-datetime-input-container {
-    background: var(--DarkBackground, #2d3748);
-    border-color: var(--DarkBorder, #4a5568);
-    color: var(--DarkText, #e2e8f0);
-  }
+.DarkMode .ihub-datetime-input-container {
+  background: var(--DarkBackground, #2d3748);
+  border-color: var(--DarkBorder, #4a5568);
+  color: var(--DarkText, #e2e8f0);
+}
 
-  .ihub-datetime-input {
-    color: var(--DarkText, #e2e8f0);
-  }
+.DarkMode .ihub-datetime-input {
+  color: var(--DarkText, #e2e8f0);
+}
 
-  .ihub-datetime-tabs {
-    background: var(--DarkSecondary, #4a5568);
-    border-color: var(--DarkBorder, #4a5568);
-  }
+.DarkMode .ihub-datetime-tabs {
+  background: var(--DarkSecondary, #4a5568);
+  border-color: var(--DarkBorder, #4a5568);
+}
 
-  .ihub-datetime-tab {
-    color: var(--DarkText, #e2e8f0);
-  }
+.DarkMode .ihub-datetime-tab {
+  color: var(--DarkText, #e2e8f0);
+}
 
-  .ihub-datetime-tab.active {
-    background: var(--DarkBackground, #2d3748);
-  }
+.DarkMode .ihub-datetime-tab.active {
+  background: var(--DarkBackground, #2d3748);
+}
 
-  .ihub-datetime-day {
-    color: var(--DarkText, #e2e8f0);
-  }
+.DarkMode .ihub-datetime-day {
+  color: var(--DarkText, #e2e8f0);
+}
 
-  .ihub-datetime-day:hover:not(:disabled) {
-    background: var(--DarkHover, #4a5568);
-  }
+.DarkMode .ihub-datetime-day:hover:not(:disabled) {
+  background: var(--DarkHover, #4a5568);
+}
 
-  .ihub-datetime-time-input {
-    background: var(--DarkBackground, #2d3748);
-    border-color: var(--DarkBorder, #4a5568);
-    color: var(--DarkText, #e2e8f0);
-  }
+.DarkMode .ihub-datetime-time-input {
+  background: var(--DarkBackground, #2d3748);
+  border-color: var(--DarkBorder, #4a5568);
+  color: var(--DarkText, #e2e8f0);
+}
 
-  .ihub-datetime-time-option {
-    background: var(--DarkBackground, #2d3748);
-    border-color: var(--DarkBorder, #4a5568);
-    color: var(--DarkText, #e2e8f0);
-  }
+.DarkMode .ihub-datetime-time-option {
+  background: var(--DarkBackground, #2d3748);
+  border-color: var(--DarkBorder, #4a5568);
+  color: var(--DarkText, #e2e8f0);
+}
 
-  .ihub-datetime-time-option:hover {
-    background: var(--DarkHover, #4a5568);
-  }
+.DarkMode .ihub-datetime-time-option:hover {
+  background: var(--DarkHover, #4a5568);
+}
 
-  .ihub-datetime-action-btn {
-    background: var(--DarkBackground, #2d3748);
-    border-color: var(--DarkBorder, #4a5568);
-    color: var(--DarkText, #e2e8f0);
-  }
+.DarkMode .ihub-datetime-action-btn {
+  background: var(--DarkBackground, #2d3748);
+  border-color: var(--DarkBorder, #4a5568);
+  color: var(--DarkText, #e2e8f0);
+}
 
-  .ihub-datetime-action-btn:hover {
-    background: var(--DarkHover, #4a5568);
-  }
+.DarkMode .ihub-datetime-action-btn:hover {
+  background: var(--DarkHover, #4a5568);
+}
 
-  .ihub-datetime-actions {
-    background: var(--DarkSecondary, #4a5568);
-    border-color: var(--DarkBorder, #4a5568);
-  }
+.DarkMode .ihub-datetime-actions {
+  background: var(--DarkSecondary, #4a5568);
+  border-color: var(--DarkBorder, #4a5568);
+}
 
-  .ihub-datetime-ampm-btn {
-    background: var(--DarkBackground, #2d3748);
-    border-color: var(--DarkBorder, #4a5568);
-    color: var(--DarkText, #e2e8f0);
-  }
+.DarkMode .ihub-datetime-ampm-btn {
+  background: var(--DarkBackground, #2d3748);
+  border-color: var(--DarkBorder, #4a5568);
+  color: var(--DarkText, #e2e8f0);
+}
 
-  .ihub-datetime-ampm-btn:hover {
-    background: var(--DarkHover, #4a5568);
-  }
+.DarkMode .ihub-datetime-ampm-btn:hover {
+  background: var(--DarkHover, #4a5568);
 }
 
 /* Focus indicators for accessibility */
@@ -875,62 +876,60 @@
 }
 
 /* Dark mode support for separate fields */
-@media (prefers-color-scheme: dark) {
-  .ihub-datetime-field {
-    background: var(--DarkBackground, #2d3748);
-    border-color: var(--DarkBorder, #4a5568);
-    color: var(--DarkText, #e2e8f0);
-  }
+.DarkMode .ihub-datetime-field {
+  background: var(--DarkBackground, #2d3748);
+  border-color: var(--DarkBorder, #4a5568);
+  color: var(--DarkText, #e2e8f0);
+}
 
-  .ihub-datetime-field:focus {
-    border-color: var(--DarkCyan, #00838f);
-    box-shadow: 0 0 0 0.2rem rgba(0, 131, 143, 0.25);
-  }
+.DarkMode .ihub-datetime-field:focus {
+  border-color: var(--DarkCyan, #00838f);
+  box-shadow: 0 0 0 0.2rem rgba(0, 131, 143, 0.25);
+}
 
-  .ihub-datetime-field:disabled {
-    background: var(--DarkSecondary, #4a5568);
-    color: var(--DarkTextDisabled, #a0aec0);
-  }
+.DarkMode .ihub-datetime-field:disabled {
+  background: var(--DarkSecondary, #4a5568);
+  color: var(--DarkTextDisabled, #a0aec0);
+}
 
-  .ihub-datetime-field::placeholder {
-    color: var(--DarkTextSecondary, #a0aec0);
-  }
+.DarkMode .ihub-datetime-field::placeholder {
+  color: var(--DarkTextSecondary, #a0aec0);
+}
 
-  .ihub-datetime-separate-fields .ihub-datetime-separator {
-    color: var(--DarkText, #e2e8f0);
-  }
+.DarkMode .ihub-datetime-separate-fields .ihub-datetime-separator {
+  color: var(--DarkText, #e2e8f0);
+}
 
-  .ihub-datetime-ampm-toggle {
-    background: var(--DarkBackground, #2d3748);
-    border-color: var(--DarkBorder, #4a5568);
-    color: var(--DarkText, #e2e8f0);
-  }
+.DarkMode .ihub-datetime-ampm-toggle {
+  background: var(--DarkBackground, #2d3748);
+  border-color: var(--DarkBorder, #4a5568);
+  color: var(--DarkText, #e2e8f0);
+}
 
-  .ihub-datetime-ampm-toggle:hover:not(:disabled) {
-    background: var(--DarkSecondary, #4a5568);
-    border-color: var(--DarkCyan, #00838f);
-    color: var(--DarkCyan, #00838f);
-  }
+.DarkMode .ihub-datetime-ampm-toggle:hover:not(:disabled) {
+  background: var(--DarkSecondary, #4a5568);
+  border-color: var(--DarkCyan, #00838f);
+  color: var(--DarkCyan, #00838f);
+}
 
-  .ihub-datetime-ampm-toggle:focus {
-    border-color: var(--DarkCyan, #00838f);
-    box-shadow: 0 0 0 0.2rem rgba(0, 131, 143, 0.25);
-  }
+.DarkMode .ihub-datetime-ampm-toggle:focus {
+  border-color: var(--DarkCyan, #00838f);
+  box-shadow: 0 0 0 0.2rem rgba(0, 131, 143, 0.25);
+}
 
-  .ihub-datetime-ampm-toggle:active {
-    background: var(--DarkCyan, #00838f);
-    color: var(--White, #ffffff);
-  }
+.DarkMode .ihub-datetime-ampm-toggle:active {
+  background: var(--DarkCyan, #00838f);
+  color: var(--White, #ffffff);
+}
 
-  .ihub-datetime-ampm-toggle:disabled {
-    background: var(--DarkSecondary, #4a5568);
-    color: var(--DarkTextDisabled, #a0aec0);
-    border-color: var(--DarkBorder, #4a5568);
-  }
+.DarkMode .ihub-datetime-ampm-toggle:disabled {
+  background: var(--DarkSecondary, #4a5568);
+  color: var(--DarkTextDisabled, #a0aec0);
+  border-color: var(--DarkBorder, #4a5568);
+}
 
-  .ihub-datetime-ampm-toggle:disabled:hover {
-    background: var(--DarkSecondary, #4a5568);
-    color: var(--DarkTextDisabled, #a0aec0);
-    border-color: var(--DarkBorder, #4a5568);
-  }
+.DarkMode .ihub-datetime-ampm-toggle:disabled:hover {
+  background: var(--DarkSecondary, #4a5568);
+  color: var(--DarkTextDisabled, #a0aec0);
+  border-color: var(--DarkBorder, #4a5568);
 }

package/dist/src/assets/css/forms/forms-index.css

@@ -12,4 +12,5 @@
 @import url("./radio-button.css");
 @import url("./time-picker.css");
 @import url("./datetime-picker.css");
+@import url("./date-range-picker.css");
 @import url("./icon-btn.css");