@actabldesign/bellhop-styles 0.0.3

package/components/date-picker-content.css

@@ -0,0 +1,337 @@
+/* ==========================================================================
+   DATE PICKER CONTENT COMPONENT - REUSABLE CALENDAR CONTENT
+   ========================================================================== */
+
+@import '../tokens/bellhop-animations.css';
+
+/* Content area - reusable calendar content */
+.date-picker-content {
+  width: 100%;
+  font-family: var(--font-inter);
+  display: flex;
+  flex-direction: column;
+}
+
+/* Month Navigation */
+.month-navigation {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md);
+}
+
+/* Apply chevron rotation to button icon */
+.month-button .btn-icon-trailing .material-symbols-outlined {
+  transition: transform var(--animation-duration-fast)
+    var(--animation-ease-smooth);
+  display: inline-block;
+}
+
+.month-button.dropdown-open .btn-icon-trailing .material-symbols-outlined {
+  transform: rotate(180deg);
+}
+
+/* Inline Month Picker - constrain to container */
+.month-picker-inline {
+  /* padding: 0 var(--spacing-md) var(--spacing-md); */
+  flex: 1;
+  overflow: hidden;
+  max-height: 270px;
+  animation: fadeIn 150ms ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.month-picker-inline.animate-fade-out {
+  animation: fadeOut 150ms ease-out;
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+}
+
+.nav-button {
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+}
+
+.today-button {
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+}
+
+/* Calendar Grid */
+.calendar-grid {
+  padding: 0 var(--spacing-md) var(--spacing-md);
+  flex: 1;
+}
+
+
+.day-names {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0;
+  margin-bottom: var(--spacing-sm);
+}
+
+.day-name {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-inter);
+  font-weight: var(--weight-medium);
+  font-size: var(--text-sm-size);
+  line-height: var(--text-sm-line);
+  color: var(--color-neutral-500);
+}
+
+.date-cells {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: var(--spacing-xxs);
+  justify-items: center;
+  align-items: center;
+}
+
+/* Calendar Cell States */
+.calendar-cell {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  border-radius: var(--radius-full);
+  font-family: var(--font-inter);
+  font-weight: var(--weight-medium);
+  font-size: var(--text-sm-size);
+  line-height: var(--text-sm-line);
+  cursor: pointer;
+  transition: all var(--animation-duration-fast) var(--animation-easing-ease);
+}
+
+.calendar-cell.other-month .date-number {
+  color: var(--color-neutral-400);
+}
+
+.calendar-cell.other-month.disabled .date-number {
+  color: var(--color-neutral-300);
+}
+
+.calendar-cell.selectable .date-number {
+  color: var(--color-neutral-500);
+}
+
+.calendar-cell.selectable:hover {
+  background: var(--color-neutral-50);
+}
+
+.calendar-cell.selectable:hover .date-number {
+  color: var(--color-neutral-800);
+}
+
+.calendar-cell.today {
+  border: 2px solid var(--color-brand-600);
+}
+
+.calendar-cell.today .date-number {
+  color: var(--color-neutral-500);
+}
+
+.calendar-cell.today:hover {
+  background: var(--color-brand-100);
+}
+
+.calendar-cell.today:hover .date-number {
+  color: var(--color-brand-600);
+}
+
+.calendar-cell.selected {
+  background: var(--color-brand-600);
+}
+
+.calendar-cell.selected .date-number {
+  color: var(--color-white);
+  font-weight: var(--weight-semibold);
+}
+
+.calendar-cell.selected:hover {
+  background: var(--color-brand-800);
+}
+
+.calendar-cell.selected:hover .date-number {
+  color: var(--color-white);
+  font-weight: var(--weight-semibold);
+}
+
+.calendar-cell.range-start {
+  background: var(--color-brand-600);
+}
+
+.calendar-cell.range-start .date-number {
+  color: var(--color-white);
+  font-weight: var(--weight-semibold);
+}
+
+.calendar-cell.range-start:hover {
+  background: var(--color-brand-800);
+}
+
+.calendar-cell.range-start:hover .date-number {
+  color: var(--color-white);
+  font-weight: var(--weight-semibold);
+}
+
+.calendar-cell.range-end {
+  background: var(--color-brand-600);
+}
+
+.calendar-cell.range-end .date-number {
+  color: var(--color-white);
+  font-weight: var(--weight-semibold);
+}
+
+.calendar-cell.range-end:hover {
+  background: var(--color-brand-800);
+}
+
+.calendar-cell.range-end:hover .date-number {
+  color: var(--color-white);
+  font-weight: var(--weight-semibold);
+}
+
+.calendar-cell.in-range {
+  background: var(--color-neutral-100);
+  border-radius: 0;
+  position: relative;
+}
+
+.calendar-cell.in-range .date-number {
+  color: var(--color-neutral-800);
+  font-weight: var(--weight-medium);
+}
+
+.calendar-cell.in-range:hover {
+  background: var(--color-neutral-200);
+}
+
+/* Fill gaps before in-range cells (except first in week) */
+.calendar-cell.in-range:not(:nth-child(7n-6))::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -12px;
+  width: 12px;
+  height: 100%;
+  background: var(--color-neutral-100);
+  z-index: -1;
+}
+
+.calendar-cell.in-range:not(:nth-child(7n-6)):hover::before {
+  background: var(--color-neutral-200);
+}
+
+/* Create continuous range effect */
+.calendar-cell.range-start {
+  position: relative;
+}
+.calendar-cell.range-start::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 12px;
+  width: 32px;
+  height: 100%;
+  background: var(--color-neutral-100);
+  z-index: -1;
+}
+.calendar-cell.range-end {
+  position: relative;
+}
+.calendar-cell.range-end::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -5px;
+  width: 30px;
+  height: 100%;
+  background: var(--color-neutral-100);
+  z-index: -1;
+}
+
+/* Range start at end of week (Sunday) should have right rounded corners */
+.calendar-cell.range-start:nth-child(7n) {
+  border-top-right-radius: var(--radius-full);
+  border-bottom-right-radius: var(--radius-full);
+}
+
+/* Range end at start of week (Monday) should have left rounded corners */
+.calendar-cell.range-end:nth-child(7n-6) {
+  border-top-left-radius: var(--radius-full);
+  border-bottom-left-radius: var(--radius-full);
+}
+
+/* In-range dates at start of week should have left rounded corners */
+.calendar-cell.in-range:nth-child(7n-6) {
+  border-top-left-radius: var(--radius-full);
+  border-bottom-left-radius: var(--radius-full);
+}
+
+/* In-range dates at end of week should have right rounded corners */
+.calendar-cell.in-range:nth-child(7n) {
+  border-top-right-radius: var(--radius-full);
+  border-bottom-right-radius: var(--radius-full);
+}
+
+/* Special case: when start and end are the same day */
+.calendar-cell.range-start.range-end {
+  border-radius: var(--radius-full);
+}
+
+.calendar-cell.today.in-range {
+  background: var(--color-brand-50);
+  border: 2px solid var(--color-brand-600);
+}
+
+.calendar-cell.today.in-range .date-number {
+  color: var(--color-brand-600);
+  font-weight: var(--weight-medium);
+}
+
+.calendar-cell.today.in-range:hover {
+  background: var(--color-brand-100);
+}
+
+.calendar-cell.disabled {
+  cursor: not-allowed;
+}
+
+.calendar-cell.disabled .date-number {
+  color: var(--color-neutral-300);
+}
+
+.date-number {
+  position: relative;
+  z-index: 1;
+}

package/components/date-picker.css

@@ -0,0 +1,103 @@
+/* ==========================================================================
+   DATE PICKER COMPONENT - MAIN PICKER WITH VARIANTS
+   ========================================================================== */
+
+@import '../tokens/bellhop-animations.css';
+
+.date-picker-container {
+  position: relative;
+  display: inline-block;
+}
+
+/* Chevron rotation animation for date picker buttons */
+.date-picker-trigger .btn-icon-trailing .material-symbols-outlined {
+  transition: transform var(--animation-duration-fast)
+    var(--animation-ease-smooth);
+  display: inline-block;
+}
+
+.date-picker-trigger .dropdown-open .btn-icon-trailing .material-symbols-outlined {
+  transform: rotate(180deg);
+}
+
+/* Trigger styles */
+.date-picker-trigger {
+  cursor: pointer;
+}
+
+.date-picker-trigger:disabled {
+  cursor: not-allowed;
+}
+
+/* Menu positioning */
+.date-picker-menu-container {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1000;
+  margin-top: var(--spacing-xs);
+  width: 350px; /* Fixed width to match date picker content */
+}
+
+/* Date picker menu styles */
+.date-picker-menu {
+  width: 100%;
+  position: relative;
+}
+
+/* Backdrop */
+.date-picker-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  background: transparent;
+}
+
+/* Input field container */
+.input-field-container {
+  position: relative;
+}
+
+/* Input field specific styling */
+.date-picker-trigger .input-text {
+  /* Allow input interaction */
+}
+
+.date-picker-trigger .input-text input {
+  cursor: text;
+}
+
+/* Style calendar icon when input is focused */
+.date-picker-trigger .input-text.input-focused .leading-icon {
+  color: var(--color-brand-600) !important;
+}
+
+/* Calendar icon overlay for reliable click detection */
+.calendar-icon-overlay {
+  position: absolute;
+  bottom: 8px; /* Position from bottom to account for label */
+  left: 16px; /* Adjust based on input padding */
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  z-index: 10;
+  /* Invisible overlay positioned over calendar icon */
+}
+
+/* Footer - following dropdown menu pattern with divider */
+.date-picker-footer {
+  border-top: 1px solid var(--color-neutral-200);
+  padding: var(--spacing-xl) var(--spacing-xl);
+  background: var(--color-white);
+}
+
+.date-picker-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-lg);
+}
+

package/components/date-range-picker-content.css

@@ -0,0 +1,85 @@
+/* ==========================================================================
+   DATE RANGE PICKER CONTENT COMPONENT - DUAL CALENDAR LAYOUT
+   ========================================================================== */
+
+@import '../tokens/bellhop-animations.css';
+
+.month-picker-content.scrollable {
+  padding: 0 !important;
+}
+
+/* Main container */
+.date-range-picker-content {
+  display: flex;
+  flex-direction: column;
+  font-family: var(--font-inter);
+  width: fit-content; /* Fixed width for dual calendars */
+}
+
+/* Date pickers container - side by side layout */
+.date-range-picker-content .date-pickers {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  position: relative;
+  gap: var(--spacing-2xl);
+}
+
+/* Left picker - 328px width */
+.date-range-picker-content .left-picker {
+  display: flex;
+  flex-direction: column;
+  width: 345px;
+}
+
+/* Right picker - 328px width */
+.date-range-picker-content .right-picker {
+  display: flex;
+  flex-direction: column;
+  width: 345px;
+}
+
+/* Vertical divider between calendars */
+.date-range-picker-content .date-pickers::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  width: 1px;
+  height: 100%;
+  background: var(--color-neutral-200);
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* Override date-picker-content for proper alignment in dual layout */
+.date-range-picker-content .date-picker-content {
+  width: 100%;
+  
+}
+
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .date-range-picker-content {
+    width: 350px;
+  }
+
+  .date-range-picker-content .date-pickers {
+    flex-direction: column;
+  }
+
+  .date-range-picker-content .left-picker {
+    width: 100%;
+  }
+
+  .date-range-picker-content .right-picker {
+    width: 100%;
+  }
+
+  /* Hide vertical divider on mobile */
+  .date-range-picker-content .date-pickers::after {
+    display: none;
+  }
+}

package/components/date-range-picker.css

@@ -0,0 +1,72 @@
+/* ==========================================================================
+   DATE RANGE PICKER COMPONENT
+   ========================================================================== */
+
+@import '../tokens/bellhop-animations.css';
+
+.picker-menu {
+  width: fit-content !important;
+}
+
+.date-range-picker-container {
+  position: relative;
+  display: inline-block;
+}
+
+/* Trigger styles */
+.date-range-picker-trigger {
+  cursor: pointer;
+}
+
+.date-range-picker-trigger:disabled {
+  cursor: not-allowed;
+}
+
+/* Date range inputs container */
+.date-range-inputs {
+  display: flex;
+  gap: var(--spacing-md);
+  align-items: flex-start;
+  cursor: pointer;
+}
+
+.date-range-inputs input {
+  cursor: pointer;
+}
+
+/* Menu positioning */
+.date-range-picker-menu-container {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1000;
+  margin-top: var(--spacing-xs);
+  width: auto;
+}
+
+/* Backdrop */
+.date-range-picker-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  background: transparent;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .date-range-inputs {
+    flex-direction: column;
+    gap: var(--spacing-sm);
+  }
+
+  .date-range-picker-menu-container {
+    left: 0;
+    transform: none;
+    width: 100vw;
+    max-width: 100vw;
+  }
+}