@aaravpos/appointment-booking-plugin 7.0.8 → 7.0.9

package/dist/styles.css

@@ -2221,7 +2221,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: calc(100dvh - 56px);
+  height: 700px;
   background: rgba(14, 14, 14, 0.55);
   backdrop-filter: blur(4px);
 }
@@ -2530,7 +2530,7 @@
 .aaravpos-loader-wrapper {
   position: absolute;
   right: 10px;
-  top: 50%;
+  top: 37%;
   transform: translateY(-50%);
   z-index: 999;
 }
@@ -3180,7 +3180,7 @@
   flex-direction: column;
   align-items: center;
   min-width: 26px;
-  min-height: 50px;
+  min-height: 48px;
   padding: 6px 8px;
   border-radius: 2px;
   cursor: pointer;
@@ -3410,6 +3410,7 @@
   border: 1px solid rgb(0 0 0 / 10%);
   border-radius: 2px;
   overflow: hidden;
+  height: 40px;
 }
 .aaravpos-slot-section-header {
   display: flex;
@@ -3419,6 +3420,7 @@
   cursor: pointer;
   background-color: var(--surface);
   transition: background-color 0.2s ease;
+  height: 24px;
 }
 .aaravpos-slot-section-header:hover {
   background-color: rgba(var(--btn-bg), 0.08);
@@ -3607,7 +3609,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 12px 28px;
+  padding: 10px 28px;
   background: var(--btn-bg);
   color: var(--btn-text);
   border: 1px solid var(--btn-bg);
@@ -3640,6 +3642,41 @@
   border-radius: 50%;
   animation: aaravpos-spin 0.8s linear infinite;
 }
+.shimmer {
+  position: relative;
+  overflow: hidden;
+  background: #3a3a3a;
+}
+.shimmer::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -150px;
+  height: 100%;
+  width: 150px;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
+  animation: shimmer 1.2s infinite;
+}
+.aaravpos-slot-skeleton-title {
+  width: 140px;
+  height: 20px;
+  border-radius: 6px;
+}
+.aaravpos-slot-skeleton-arrow {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+}
+@keyframes shimmer {
+  100% {
+    left: 100%;
+  }
+}
+@keyframes aaravpos-shimmer {
+  100% {
+    left: 100%;
+  }
+}
 @media (min-width: 640px) {
   .custom-container {
     padding-left: 32px;
@@ -5194,23 +5231,32 @@
   background-color: #cccccc;
   cursor: not-allowed;
 }
+.skeleton-header {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+.dark .aaravpos-layout,.dark .aaravpos-container,.dark .aaravpos-sidebar {
+  background-color: #000000;
+}
 .dark .aaravpos-desktop-back-btn,.dark .aaravpos-sidebar, .dark .aaravpos-pro-card, .dark .aaravpos-success-card, .dark .aaravpos-outlet-card {
-  background-color: #1c1c1f;
+  background-color: #000000;
   border-color: #2d3139;
   color: #F2F0EC;
 }
 .aaravpos-loader-wrapper.dark {
-  background-color: #1c1c1f;
+  background-color: #000000;
   color: #F2F0EC;
 }
-.dark .aaravpos-container {
-  background-color: #1c1c1f;
+.dark .aaravpos-date-modal , .dark .aaravpos-date-modal-header, .dark .aaravpos-sidebar-mobile {
+  background: #000000 !important;
 }
-.dark .aaravpos-layout , .dark .aaravpos-date-modal , .dark .aaravpos-date-modal-header {
-  background-color: #151517;
+.dark .aaravpos-slot-section {
+  border-color: #2d3139 !important;
 }
 .dark .aaravpos-supercategory-btn, .dark .aaravpos-outlet-info, .dark .aaravpos-card-box , .dark .booking-confirm-input {
-  background-color: #151517;
+  background-color: #000000;
   border: 1px solid #2d3139;
   color: #F2F0EC;
 }
@@ -5227,14 +5273,14 @@
 .dark .aaravpos-outlet-divider {
   background: var(--app-bg-hover);
 }
-.dark .aaravpos-step-btn, .dark .aaravpos-date-modal , .dark .aaravpos-date-modal-header , .dark .aaravpos-outlet-info .aaravpos-outlet-name, .dark .aaravpos-card-box .aaravpos-appointment-header .aaravpos-appointment-content .aaravpos-appointment-name, .dark .aaravpos-appointment-date-text, .dark .aaravpos-date-time-label, .dark .aaravpos-date-time-empty, .dark .aaravpos-summary-label, .dark .aaravpos-order-subtotal-label, .dark .aaravpos-title, .dark .aaravpos-outlet-card-title {
+.dark .aaravpos-step-btn, .dark .aaravpos-date-modal , .dark .aaravpos-date-modal-header , .dark .aaravpos-outlet-info .aaravpos-outlet-name, .dark .aaravpos-card-box .aaravpos-appointment-header .aaravpos-appointment-content .aaravpos-appointment-name, .dark .aaravpos-appointment-date-text, .dark .aaravpos-date-time-label, .dark .aaravpos-date-time-empty, .dark .aaravpos-summary-label, .dark .aaravpos-order-subtotal-label, .dark .aaravpos-title, .dark .aaravpos-outlet-card-title, .dark .aaravpos-mobile-step-label, .dark .aaravpos-mobile-back-btn, .dark .aaravpos-order-title {
   color: #F2F0EC;
 }
-.dark .aaravpos-service-card, .dark .aaravpos-cart-btn, .dark .booking-pro-card, .dark .aaravpos-professional-dropdown-btn, .dark .aaravpos-professional-dropdown-menu, .dark .aaravpos-calendar-btn , .dark .aaravpos-date-nav-btn , .dark .aaravpos-date-card, .dark .aaravpos-selected-professional, .dark .aaravpos-slot-section-content, .dark .aaravpos-slot-section-header, .dark .aaravpos-slot-card.aaravpos-slot-card-default, .dark .aaravpos-paymentcard-card.active, .dark .booking-confirm-info-box {
-  background-color: #1c1c1f;
+.dark .aaravpos-service-card, .dark .aaravpos-cart-btn, .dark .booking-pro-card, .dark .aaravpos-professional-dropdown-btn, .dark .aaravpos-professional-dropdown-menu, .dark .aaravpos-calendar-btn , .dark .aaravpos-date-nav-btn , .dark .aaravpos-date-card, .dark .aaravpos-selected-professional, .dark .aaravpos-slot-section-content, .dark .aaravpos-slot-section-header, .dark .aaravpos-slot-card.aaravpos-slot-card-default, .dark .aaravpos-paymentcard-card.active, .dark .booking-confirm-info-box, .dark .aaravpos-slot-section-header {
+  background-color: #000000;
   border-color: #2d3139;
 }
-.dark .aaravpos-supercategory-btn:hover , .dark .aaravpos-desktop-back-btn:hover, .dark .aaravpos-count, .dark .aaravpos-supercategory-btn.active, .dark .aaravpos-date-card-active, .dark .aaravpos-slot-grid .aaravpos-slot-card.aaravpos-slot-card-selected,.dark .aaravpos-paymentcard-card.active .aaravpos-paymentcard-icon, .dark .aaravpos-paymentcard-check, .dark .aaravpos-success-icon {
+.dark .aaravpos-supercategory-btn:hover , .dark .aaravpos-desktop-back-btn:hover, .dark .aaravpos-count, .dark .aaravpos-supercategory-btn.active, .dark .aaravpos-date-card-active, .dark .aaravpos-slot-grid .aaravpos-slot-card.aaravpos-slot-card-selected,.dark .aaravpos-paymentcard-card.active .aaravpos-paymentcard-icon, .dark .aaravpos-paymentcard-check, .dark .aaravpos-success-icon, .dark .aaravpos-cta-btn, .dark .aaravpos-common-btn, .dark .aaravpos-book-btn {
   border-color: var(--app-bg-hover);
   background-color: var(--app-bg-hover);
   color: #F2F0EC;
@@ -5242,25 +5288,29 @@
 .dark .aaravpos-step-btn.active , .dark .aaravpos-step-icon.active, .dark .aaravpos-order-detail.right, .dark .aaravpos-summary-value, .dark .aaravpos-order-subtotal-price {
   color: var(--app-bg-hover);
 }
-.dark .aaravpos-step-btn.inactive:hover , .dark .aaravpos-count, .dark .aaravpos-cart-btn, .dark .aaravpos-service-title, .dark .booking-pro-card .booking-pro-name, .dark .aaravpos-professional-dropdown-btn, .dark .aaravpos-page-title, .dark .aaravpos-professional-dropdown-menu .aaravpos-professional-dropdown-name, .dark .aaravpos-calendar-btn,.dark .aaravpos-date-nav-btn, .dark .aaravpos-date-card, .dark .aaravpos-selected-professional, .dark .aaravpos-slot-section .aaravpos-slot-section-header .aaravpos-slot-section-title, .dark .aaravpos-slot-card.aaravpos-slot-card-default .aaravpos-slot-time, .dark .aaravpos-calendar-day.aaravpos-calendar-day-disabled.aaravpos-calendar-day-disabled:hover, .dark .aaravpos-paymentcard-title, .dark .aaravpos-text-bold, .dark .aaravpos-slot-section-arrow,.dark .PhoneInput input.PhoneInputInput, .dark .aaravpos-order-service-name, .dark .aaravpos-success-title, .dark .aaravpos-label , .dark .aaravpos-service-name, .dark .aaravpos-empty-title {
+.dark .aaravpos-step-btn.active {
+  border-bottom-color: var(--app-bg-hover);
+}
+.dark .aaravpos-step-btn.inactive:hover , .dark .aaravpos-count, .dark .aaravpos-cart-btn, .dark .aaravpos-service-title, .dark .booking-pro-card .booking-pro-name, .dark .aaravpos-professional-dropdown-btn, .dark .aaravpos-page-title, .dark .aaravpos-professional-dropdown-menu .aaravpos-professional-dropdown-name, .dark .aaravpos-calendar-btn,.dark .aaravpos-date-nav-btn, .dark .aaravpos-date-card, .dark .aaravpos-selected-professional, .dark .aaravpos-slot-section .aaravpos-slot-section-header .aaravpos-slot-section-title, .dark .aaravpos-slot-card.aaravpos-slot-card-default .aaravpos-slot-time, .dark .aaravpos-calendar-day.aaravpos-calendar-day-disabled.aaravpos-calendar-day-disabled:hover, .dark .aaravpos-paymentcard-title, .dark .aaravpos-text-bold, .dark .aaravpos-slot-section-arrow,.dark .PhoneInput input.PhoneInputInput, .dark .aaravpos-order-service-name, .dark .aaravpos-success-title, .dark .aaravpos-label , .dark .aaravpos-service-name, .dark .aaravpos-empty-title, .dark .aaravpos-common-btn:hover, .dark .aaravpos-sidebar-close-btn , .dark .aaravpos-step-btn .aaravpos-step-icon.inactive, .dark .aaravpos-empty-services-title {
   color: #F2F0EC;
 }
-.dark .aaravpos-service-description, .dark .aaravpos-service-price > span, .dark .booking-pro-card .booking-pro-role, .dark .aaravpos-professional-dropdown-menu .aaravpos-professional-dropdown-type, .dark .aaravpos-selected-professional .aaravpos-selected-professional-services, .dark .aaravpos-slot-card.aaravpos-slot-card-default .aaravpos-slot-status, .dark .aaravpos-outlet-info .aaravpos-outlet-address, .dark .aaravpos-sub-title, .dark .aaravpos-card-box .aaravpos-appointment-header .aaravpos-appointment-content .aaravpos-appointment-services, .dark .aaravpos-section-label, .dark .aaravpos-paymentcard-description, .dark .aaravpos-order-subtitle, .dark .aaravpos-order-detail.center, .dark .aaravpos-date-time-value,.dark .aaravpos-success-description, .dark .aaravpos-value, .dark .aaravpos-outlet-card-address, .dark .aaravpos-empty-text,.dark .booking-confirm-form-title {
+.dark .aaravpos-service-description, .dark .aaravpos-service-price > span, .dark .booking-pro-card .booking-pro-role, .dark .aaravpos-professional-dropdown-menu .aaravpos-professional-dropdown-type, .dark .aaravpos-selected-professional .aaravpos-selected-professional-services, .dark .aaravpos-slot-card.aaravpos-slot-card-default .aaravpos-slot-status, .dark .aaravpos-outlet-info .aaravpos-outlet-address, .dark .aaravpos-sub-title, .dark .aaravpos-card-box .aaravpos-appointment-header .aaravpos-appointment-content .aaravpos-appointment-services, .dark .aaravpos-section-label, .dark .aaravpos-paymentcard-description, .dark .aaravpos-order-subtitle, .dark .aaravpos-order-detail.center, .dark .aaravpos-date-time-value,.dark .aaravpos-success-description, .dark .aaravpos-value, .dark .aaravpos-outlet-card-address, .dark .aaravpos-empty-text,.dark .booking-confirm-form-title, .dark .aaravpos-page-subtitle, .dark .aaravpos-date-close-btn, .dark .aaravpos-empty-services-text {
   color: #797877;
 }
 .dark span.aaravpos-service-price-right , .dark .aaravpos-price, .dark .aaravpos-total-price {
   color: var(--app-bg-hover);
 }
 .dark .aaravpos-search-input {
-  background-color: #1c1c1f;
+  background-color: #000000;
   border-color: #2d3139;
   color: #F2F0EC;
 }
 .dark .aaravpos-professional-dropdown-item:hover {
-  background-color: #2a2a2a;
+  background-color: rgb(42 42 42 / 59%);
 }
 .dark .aaravpos-slot-card-disabled {
-  background-color: #2f2f2fad;
+  background-color: rgb(19 19 19 / 98%);
+  border-color: #202020ba;
 }
 .dark .aaravpos-professional-dropdown-item-border {
   border-color: #2d3139 !important;
@@ -5275,7 +5325,7 @@
   background: #686868;
 }
 .dark .aaravpos-date-modal {
-  box-shadow: 0 20px 45px rgb(0 0 0);
+  box-shadow: 0 20px 45px rgb(49 49 49 / 51%);
 }
 .dark .aaravpos-appointment-date {
   border-color: #2d3139 !important;
@@ -5290,9 +5340,9 @@
   background: linear-gradient(86deg, #000000b5, rgb(0 0 0 / 75%), #000000de);
 }
 .dark .booking-confirm-input.PhoneInput input.PhoneInputInput, .dark .booking-confirm-input {
-  background-color: #151517 !important;
+  background-color: #000000 !important;
 }
-.dark .aaravpos-order-section-title, .dark .aaravpos-search-clear:hover {
+.dark .aaravpos-order-section-title, .dark .aaravpos-search-clear:hover, .dark .skeleton-header .aaravpos-sidebar-close-btn {
   color: #b0b0b0;
 }
 .dark .aaravpos-outlet-card.closed {
@@ -5307,3 +5357,20 @@
   height: 12px;
   border: 3px solid #e5e5e5;
 }
+.dark .booking-pro-card.disabled {
+  opacity: 0.6;
+  background: rgb(34 34 34 / 66%) !important;
+}
+.dark .aaravpos-common-btn:disabled {
+  background-color: #2f2f2fad !important;
+}
+.dark .aaravpos-success-card {
+  background-color: rgb(19 19 19 / 98%);
+  border: 1px solid #202020ba;
+}
+.dark .aaravpos-calendar-btn {
+  border: 1px solid #2d3139;
+}
+.dark .aaravpos-loader {
+  border-top-color: var(--app-bg-hover) !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aaravpos/appointment-booking-plugin",
-  "version": "7.0.8",
+  "version": "7.0.9",
   "description": "A React component library built with Tailwind CSS v4 and TypeScript",
   "type": "module",
   "packageManager": "pnpm@10.33.0",