@actabldesign/bellhop-styles 0.0.3 → 0.0.4

package/components/month-picker.css

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

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

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