@actabldesign/bellhop-styles 0.0.3

package/components/month-picker.css

@@ -0,0 +1,83 @@
+/* ==========================================================================
+   MONTH PICKER COMPONENT - MAIN PICKER WITH VARIANTS
+   ========================================================================== */
+
+@import '../tokens/bellhop-animations.css';
+
+.month-picker-container {
+  position: relative;
+  display: inline-block;
+}
+
+/* Chevron rotation animation for month picker buttons */
+.month-picker-trigger .btn-icon-trailing .material-symbols-outlined {
+  transition: transform var(--animation-duration-fast)
+    var(--animation-ease-smooth);
+  display: inline-block;
+}
+
+.month-picker-trigger .dropdown-open .btn-icon-trailing .material-symbols-outlined {
+  transform: rotate(180deg);
+}
+
+/* Trigger styles */
+.month-picker-trigger {
+  cursor: pointer;
+}
+
+.month-picker-trigger:disabled {
+  cursor: not-allowed;
+}
+
+/* Menu positioning */
+.month-picker-menu-container {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1000;
+  margin-top: var(--spacing-xs);
+  width: fit-content !important; /* Fixed width to match month picker menu */
+}
+
+/* Backdrop */
+.month-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 */
+.month-picker-trigger .input-text {
+  /* Allow input interaction */
+}
+
+.month-picker-trigger .input-text input {
+  cursor: text;
+}
+
+/* Style calendar icon when input is focused */
+.month-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 */
+}

package/components/nav-item.css

@@ -0,0 +1,110 @@
+/* ==========================================================================
+   NAV ITEM COMPONENT
+   Navigation item for sidebar navigation
+   ========================================================================== */
+
+.nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  flex-shrink: 0;
+  width: 100%;
+  max-width: 52px;
+  height: fit-content;
+}
+
+.nav-item-button {
+  background-color: var(--color-white);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: var(--spacing-md);
+  position: relative;
+  border-radius: var(--radius-sm);
+  flex-shrink: 0;
+  transition: background-color 0.2s ease;
+  cursor: pointer;
+  border: none;
+  outline: none;
+}
+
+.nav-item-button:hover {
+  background-color: var(--color-neutral-50);
+}
+
+.nav-item-button:focus-visible {
+  box-shadow: 0 0 0 2px var(--color-brand-100);
+}
+
+.nav-item.active .nav-item-button {
+  background-color: var(--color-brand-50);
+}
+
+.nav-item-button .icon {
+  width: 20px;
+  height: 20px;
+  display: block;
+  flex-shrink: 0;
+  color: var(--color-neutral-500);
+  transition: color 0.2s ease;
+  font-size: 20px;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
+}
+
+.nav-item-button:hover .icon {
+  color: var(--color-neutral-700);
+}
+
+.nav-item.active .nav-item-button .icon {
+  color: var(--color-brand-600);
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
+}
+
+.nav-item-label {
+  font-family: var(--font-inter);
+  font-weight: var(--weight-medium);
+  height: 18px;
+  line-height: 18px;
+  font-style: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  position: relative;
+  flex-shrink: 0;
+  color: var(--color-neutral-700);
+  font-size: 10px;
+  text-align: center;
+  white-space: nowrap;
+  width: 100%;
+  max-width: 100%;
+  margin: var(--spacing-none);
+  margin-top: var(--spacing-xxs);
+  box-sizing: border-box;
+  direction: ltr;
+}
+
+.nav-item.active .nav-item-label {
+  color: var(--color-neutral-700);
+  font-weight: var(--weight-semibold);
+}
+
+/* Disabled state */
+.nav-item.disabled .nav-item-button {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.nav-item.disabled .nav-item-button:hover {
+  background-color: var(--color-white);
+}
+
+.nav-item.disabled .nav-item-button .icon {
+  color: var(--color-neutral-400);
+}
+
+.nav-item.disabled .nav-item-label {
+  color: var(--color-neutral-400);
+}

package/components/notification.css

@@ -0,0 +1,262 @@
+/* Base notification styles */
+.notification {
+  position: relative;
+  display: flex;
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-modal);
+  overflow: hidden;
+  font-family: var(--font-inter);
+}
+
+/* Animation classes */
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideOutRight {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+
+.notification-animated {
+  animation: slideInRight 0.3s ease-out forwards;
+}
+
+.notification-closing {
+  animation: slideOutRight 0.3s ease-in forwards;
+}
+
+/* Notification container for positioning */
+.notification-container {
+  position: fixed;
+  top: var(--spacing-3xl);
+  right: var(--spacing-3xl);
+  z-index: 1000;
+  pointer-events: none;
+}
+
+.notification-container .notification {
+  pointer-events: auto;
+  margin-bottom: var(--spacing-xl);
+}
+
+/* Desktop variant */
+.notification-desktop {
+  padding: var(--spacing-3xl);
+  max-width: 400px;
+}
+
+/* Mobile variant */
+.notification-mobile {
+  width: 100%;
+  max-width: 343px;
+}
+
+.notification-mobile .notification-content {
+  padding: var(--spacing-3xl);
+}
+
+/* Image container for mobile */
+.notification-image-container {
+  width: 100%;
+  height: 160px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.notification-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* Notification with image should have no top padding on mobile */
+.notification-mobile.notification-image .notification-content {
+  padding-top: var(--spacing-xl);
+  padding-bottom: var(--spacing-xl);
+}
+
+/* Content area */
+.notification-content {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-xl);
+  flex: 1;
+  padding-right: var(--spacing-4xl);
+}
+
+.notification-mobile .notification-content {
+  flex-direction: column;
+  padding-right: var(--spacing-4xl);
+}
+
+/* Icon wrapper */
+.notification-icon-wrapper {
+  position: relative;
+  flex-shrink: 0;
+}
+
+/* Featured icon adjustments for notification context */
+.notification-icon-wrapper .featured-icon {
+  flex-shrink: 0;
+}
+
+/* Avatar */
+.notification-avatar {
+  width: var(--spacing-5xl);
+  height: var(--spacing-5xl);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.notification-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Progress indicator */
+.notification-progress {
+  width: var(--spacing-5xl);
+  height: var(--spacing-5xl);
+}
+
+.progress-ring {
+  transform: rotate(-90deg);
+}
+
+.progress-ring-circle-bg {
+  stroke: var(--color-neutral-200);
+}
+
+.progress-ring-circle {
+  stroke: var(--color-brand-600);
+  transition: stroke-dashoffset 0.3s ease;
+}
+
+/* Text content */
+.notification-text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+  padding-top: var(--spacing-xxs);
+}
+
+.notification-text-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.notification-title {
+  font-size: var(--text-sm-size);
+  font-weight: var(--weight-semibold);
+  line-height: var(--text-sm-line);
+  color: var(--color-neutral-800);
+  margin: 0;
+}
+
+.notification-description {
+  font-size: var(--text-sm-size);
+  font-weight: var(--weight-regular);
+  line-height: var(--text-sm-line);
+  color: var(--color-neutral-600);
+  margin: 0;
+}
+
+/* Actions */
+.notification-actions {
+  display: flex;
+  gap: var(--spacing-lg);
+}
+
+.notification-button {
+  padding: 0;
+  border: none;
+  background: none;
+  font-family: var(--font-inter);
+  font-size: var(--text-sm-size);
+  font-weight: var(--weight-semibold);
+  line-height: var(--text-sm-line);
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+
+.notification-button:hover {
+  opacity: 0.8;
+}
+
+.notification-button:focus-visible {
+  outline: 2px solid var(--color-brand-500);
+  outline-offset: var(--spacing-xxs);
+  border-radius: var(--radius-xs);
+}
+
+.notification-button-primary {
+  color: var(--color-brand-600);
+}
+
+.notification-button-secondary {
+  color: var(--color-neutral-600);
+}
+
+/* Close button */
+.notification-close {
+  position: absolute;
+  top: var(--spacing-md);
+  right: var(--spacing-md);
+  width: var(--spacing-4xl);
+  height: var(--spacing-4xl);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  color: var(--color-neutral-400);
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.notification-close-icon {
+  font-size: 20px !important;
+  width: 20px;
+  height: 20px;
+  line-height: 1;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}
+
+.notification-close:hover {
+  background-color: var(--color-neutral-50);
+  color: var(--color-neutral-600);
+}
+
+.notification-close:focus-visible {
+  outline: 2px solid var(--color-brand-500);
+  outline-offset: var(--spacing-xxs);
+}
+
+/* Responsive adjustments */
+@media (max-width: 480px) {
+  .notification-desktop {
+    max-width: 100%;
+  }
+}