@actabldesign/bellhop-styles 0.0.3 → 0.0.12

package/components/date-picker-content.css

@@ -1,337 +0,0 @@
-/* ==========================================================================
-   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

@@ -1,103 +0,0 @@
-/* ==========================================================================
-   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

@@ -1,85 +0,0 @@
-/* ==========================================================================
-   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

@@ -1,72 +0,0 @@
-/* ==========================================================================
-   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;
-  }
-}