@aaravpos/appointment-booking-plugin 7.0.7 → 7.0.9

package/dist/styles.css

@@ -1520,7 +1520,7 @@
 }
 .aaravpos-search-clear {
   position: absolute;
-  right: 12px;
+  right: 2px;
   top: 50%;
   transform: translateY(-50%);
   border: none;
@@ -1557,11 +1557,13 @@
   text-transform: capitalize;
 }
 .aaravpos-supercategory-btn:hover {
-  border-color: rgba(0, 0, 0, 0.5);
+  border-color: var(--app-bg-hover);
+  background-color: var(--app-bg-hover);
+  color: #fff;
 }
 .aaravpos-supercategory-btn.active {
-  border-color: rgba(0, 0, 0, 0.4);
-  background: rgba(0, 0, 0, 0.8);
+  border-color: var(--app-bg);
+  background: var(--app-bg);
   color: #fff;
 }
 .aaravpos-supercategory-btn.active .aaravpos-supercategory-count {
@@ -1759,7 +1761,7 @@
 }
 .aaravpos-skeleton-card {
   position: relative;
-  height: 134px;
+  height: 89px;
   overflow: hidden;
   border-radius: 4px;
   background: #e0e0e0;
@@ -2219,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);
 }
@@ -2391,7 +2393,7 @@
 }
 .aaravpos-professional-skeleton {
   position: relative;
-  height: 82px;
+  height: 89px;
   overflow: hidden;
   border-radius: 4px;
   background: #e0e0e0;
@@ -2528,7 +2530,7 @@
 .aaravpos-loader-wrapper {
   position: absolute;
   right: 10px;
-  top: 50%;
+  top: 37%;
   transform: translateY(-50%);
   z-index: 999;
 }
@@ -2684,7 +2686,6 @@
   margin-bottom: 24px;
 }
 .aaravpos-success-title {
-  font-family: "Bebas Neue", sans-serif;
   font-size: 20px;
   margin-bottom: 8px;
 }
@@ -3179,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;
@@ -3409,6 +3410,7 @@
   border: 1px solid rgb(0 0 0 / 10%);
   border-radius: 2px;
   overflow: hidden;
+  height: 40px;
 }
 .aaravpos-slot-section-header {
   display: flex;
@@ -3418,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);
@@ -3606,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);
@@ -3630,7 +3633,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 610px;
 }
 .aaravpos-loader {
   width: 24px;
@@ -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,3 +5231,146 @@
   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: #000000;
+  border-color: #2d3139;
+  color: #F2F0EC;
+}
+.aaravpos-loader-wrapper.dark {
+  background-color: #000000;
+  color: #F2F0EC;
+}
+.dark .aaravpos-date-modal , .dark .aaravpos-date-modal-header, .dark .aaravpos-sidebar-mobile {
+  background: #000000 !important;
+}
+.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: #000000;
+  border: 1px solid #2d3139;
+  color: #F2F0EC;
+}
+.dark .aaravpos-skeleton-divider, .dark .aaravpos-divider {
+  background-color: #2d3139;
+}
+.dark .aaravpos-order-header, .dark .aaravpos-success-row, .dark .aaravpos-services-list {
+  border-bottom-color: #2d3139;
+}
+.dark .aaravpos-step-btn {
+  background-color: var(--btn-bg);
+  color: #F2F0EC;
+}
+.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-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, .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-cta-btn, .dark .aaravpos-common-btn, .dark .aaravpos-book-btn {
+  border-color: var(--app-bg-hover);
+  background-color: var(--app-bg-hover);
+  color: #F2F0EC;
+}
+.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.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-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: #000000;
+  border-color: #2d3139;
+  color: #F2F0EC;
+}
+.dark .aaravpos-professional-dropdown-item:hover {
+  background-color: rgb(42 42 42 / 59%);
+}
+.dark .aaravpos-slot-card-disabled {
+  background-color: rgb(19 19 19 / 98%);
+  border-color: #202020ba;
+}
+.dark .aaravpos-professional-dropdown-item-border {
+  border-color: #2d3139 !important;
+}
+.dark .aaravpos-calendar-day {
+  border: 1px solid #2d3139 !important;
+}
+.dark .aaravpos-calendar-day.aaravpos-calendar-day-disabled.aaravpos-calendar-day-disabled {
+  background-color: #2f2f2fad;
+}
+.dark .aaravpos-calendar-day-slash::after, .dark .aaravpos-skeleton-card {
+  background: #686868;
+}
+.dark .aaravpos-date-modal {
+  box-shadow: 0 20px 45px rgb(49 49 49 / 51%);
+}
+.dark .aaravpos-appointment-date {
+  border-color: #2d3139 !important;
+}
+.dark .aaravpos-step-btn {
+  background-color: transparent !important;
+}
+.dark .aaravpos-skeleton-block {
+  background-color: #494949;
+}
+.dark .aaravpos-professional-skeleton {
+  background: linear-gradient(86deg, #000000b5, rgb(0 0 0 / 75%), #000000de);
+}
+.dark .booking-confirm-input.PhoneInput input.PhoneInputInput, .dark .booking-confirm-input {
+  background-color: #000000 !important;
+}
+.dark .aaravpos-order-section-title, .dark .aaravpos-search-clear:hover, .dark .skeleton-header .aaravpos-sidebar-close-btn {
+  color: #b0b0b0;
+}
+.dark .aaravpos-outlet-card.closed {
+  border-color: #fd000091 !important;
+}
+.dark .aaravpos-status-closed {
+  color: #fe0000;
+}
+.dark .aaravpos-outlet-card .aaravpos-loader {
+  border-top-color: var(--app-bg-hover) !important;
+  width: 12px;
+  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.7",
+  "version": "7.0.9",
   "description": "A React component library built with Tailwind CSS v4 and TypeScript",
   "type": "module",
   "packageManager": "pnpm@10.33.0",