@aaravpos/appointment-booking-plugin 2.0.3 → 2.0.5

package/dist/styles.css

@@ -805,6 +805,13 @@
 .arravpos-m0 {
   margin: 0px !important;
 }
+.aaravpos-overflow-hidden {
+  overflow: hidden;
+}
+.aaravpos-text-bold {
+  font-weight: 600;
+  color: #000;
+}
 .aaravpos-tab-enabled {
   cursor: pointer;
 }
@@ -819,7 +826,7 @@
   width: 100%;
   box-sizing: border-box;
   margin: 0 auto;
-  height: 580px;
+  max-height: 700px;
 }
 .aaravpos-margin-top-20 {
   margin-top: 20px;
@@ -831,12 +838,8 @@
   margin-top: auto;
 }
 .aaravpos-btn {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
   gap: 8px;
-  padding: 12px 32px;
+  padding: 8px 16px;
   border: none;
   background: var(--btn-bg, #000);
   color: var(--btn-text, #fff);
@@ -846,7 +849,17 @@
   letter-spacing: 1.5px;
   cursor: pointer;
   transition: all 0.2s ease;
-  border-radius: 20px;
+  border-radius: 6px;
+  position: absolute;
+  bottom: 12px;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  left: 50%;
+  transform: translateX(-50%);
+  width: max-content;
+  display: none;
 }
 .aaravpos-btn:hover {
   background: var(--btn-bg-hover, #222);
@@ -874,7 +887,7 @@
   padding: 9px 8px !important;
 }
 .aaravpos-layout {
-  height: 580px;
+  max-height: 700px;
   display: flex;
   flex-direction: column;
   background: var(--canvas, #ffffff);
@@ -884,10 +897,10 @@
 .aaravpos-layout-content {
   flex: 1;
   position: relative;
-  height: 580px;
+  max-height: 700px;
 }
 .aaravpos-layout-page {
-  height: 580px;
+  max-height: 700px;
 }
 .aaravpos-title {
   font-size: 22px;
@@ -902,7 +915,7 @@
 .aaravpos-main-layout {
   display: flex;
   flex-direction: column;
-  height: 580px;
+  max-height: 700px;
 }
 .aaravpos-layout-wrapper {
   flex: 1;
@@ -914,12 +927,11 @@
 .aaravpos-main-content {
   padding: 16px;
   position: relative;
-  height: 550px;
   min-width: 0;
 }
 .aaravpos-mobile-button {
   position: absolute;
-  bottom: 10px;
+  bottom: 12px;
   left: 0;
   right: 0;
   z-index: 50;
@@ -928,27 +940,6 @@
   align-items: center;
   justify-content: center;
 }
-.aaravpos-view-order-btn {
-  padding: 12px 34px;
-  font-size: 14px;
-  border-radius: 999px;
-  background: var(--btn-bg);
-  color: #ffffff;
-  border: none;
-  font-family: var(--font-dm-sans);
-  font-weight: 700;
-  letter-spacing: 1.5px;
-  text-transform: uppercase;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-.aaravpos-view-order-btn:hover {
-  opacity: 0.9;
-}
-.aaravpos-view-order-btn:disabled {
-  background: #cccccc;
-  cursor: not-allowed;
-}
 .aaravpos-sidebar {
   flex-direction: column;
   background: var(--surface-bg, #ffffff);
@@ -1018,22 +1009,6 @@
   justify-content: center;
   pointer-events: none;
 }
-.aaravpos-search-input {
-  width: 100%;
-  height: 32px;
-  border-radius: 6px;
-  border: 1px solid #d1d5db;
-  background: #ffffff;
-  padding-left: 40px;
-  padding-right: 80px;
-  font-size: 14px;
-  outline: none;
-  transition: all 0.3s ease;
-  box-sizing: border-box;
-}
-.aaravpos-search-input:focus {
-  border-color: #9ca3af;
-}
 .aaravpos-search-actions {
   position: absolute;
   right: 12px;
@@ -1060,7 +1035,7 @@
 .aaravpos-outlet-list-wrapper {
   padding-top: 8px;
   padding-bottom: 8px;
-  max-height: 485px;
+  max-height: 570px;
   overflow: auto;
   scrollbar-width: none;
 }
@@ -1071,6 +1046,7 @@
   display: grid;
   grid-template-columns: 1fr;
   gap: 16px;
+  padding-bottom: 50px;
 }
 .aaravpos-empty-state {
   display: flex;
@@ -1271,6 +1247,11 @@
 .aaravpos-step-icon.inactive {
   color: var(--btn-bg-hover);
 }
+.aaravpos-navbar-form {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
 .aaravpos-page-title {
   font-size: 22px;
   font-weight: 900;
@@ -1382,6 +1363,7 @@
   cursor: pointer;
   transition: all 0.3s ease;
   font-size: 14px;
+  border-radius: 4px;
 }
 .aaravpos-supercategory-btn:hover {
   border-color: rgba(0, 0, 0, 0.5);
@@ -1411,10 +1393,10 @@
 }
 .aaravpos-services-wrapper {
   overflow-y: auto;
-  padding-bottom: 80px;
+  padding-bottom: 75px;
   scrollbar-width: none;
   -ms-overflow-style: none;
-  height: 240px;
+  max-height: 318px;
 }
 .aaravpos-services-wrapper::-webkit-scrollbar {
   display: none;
@@ -1564,7 +1546,7 @@
   left: -100%;
   width: 100%;
   height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
+  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.5), transparent );
   animation: aaravpos-shimmer 1.2s infinite;
 }
 .aaravpos-available-badge {
@@ -1797,6 +1779,7 @@
   letter-spacing: 1.5px;
   cursor: pointer;
   transition: all 0.2s ease;
+  border-radius: 6px;
 }
 .aaravpos-common-btn:hover {
   background: var(--btn-bg-hover);
@@ -1988,7 +1971,7 @@
 .aaravpos-date-modal-overlay {
   position: fixed;
   inset: 0;
-  z-index: 200;
+  z-index: 1026;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2015,7 +1998,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 16px;
+  padding: 10px 16px;
   background: var(--canvas-bg);
   border-bottom: 1px solid var(--border-color);
 }
@@ -2045,7 +2028,7 @@
 }
 .aaravpos-date-modal-body {
   overflow-y: auto;
-  padding: 10px 28px 20px 28px;
+  padding: 10px 15px 15px 15px;
 }
 .aaravpos-date-nav {
   display: flex;
@@ -2085,7 +2068,8 @@
   color: var(--text-muted);
 }
 .aaravpos-calendar-day {
-  min-height: 34px;
+  height: 34px;
+  width: 34px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2175,7 +2159,7 @@
   left: -100%;
   width: 100%;
   height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
+  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.5), transparent );
   animation: aaravposShimmer 1.2s infinite;
 }
 .aaravpos-spinner-wrapper {
@@ -2211,10 +2195,11 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 64px 24px;
+  padding: 24px;
   text-align: center;
   border: 1px dashed rgba(0, 0, 0, 0.2);
   border-radius: 8px;
+  height: 160px;
 }
 .aaravpos-empty-services-title {
   margin-bottom: 8px;
@@ -2235,7 +2220,7 @@
   overflow-y: auto;
   padding-bottom: 80px;
   scrollbar-width: none;
-  height: 415px;
+  max-height: 515px;
 }
 .arravpos-details-scroll::-webkit-scrollbar {
   display: none;
@@ -2301,6 +2286,7 @@
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
+  z-index: 999;
 }
 .arravpos-loader {
   width: 16px;
@@ -2359,7 +2345,8 @@
 .arravpos-booking-scroll {
   overflow-y: auto;
   scrollbar-width: none;
-  height: 325px;
+  max-height: 470px;
+  padding-bottom: 25px;
 }
 .arravpos-booking-scroll::-webkit-scrollbar {
   display: none;
@@ -2431,7 +2418,7 @@
 .arravpos-success-motion {
   display: flex;
   flex-direction: column;
-  height: 580px;
+  max-height: 580px;
   align-items: center;
   justify-content: center;
   background: var(--canvas);
@@ -3053,7 +3040,8 @@
   overflow-y: auto;
   padding-bottom: 80px;
   scrollbar-width: none;
-  height: 290px;
+  max-height: 362px;
+  position: relative;
 }
 .arravpos-scroll-area::-webkit-scrollbar {
   display: none;
@@ -3162,7 +3150,7 @@
   padding-bottom: 80px;
   scrollbar-width: none;
   -ms-overflow-style: none;
-  height: 350px;
+  max-height: 504px;
 }
 .aaravpos-staff-wrapper::-webkit-scrollbar {
   display: none;
@@ -3253,7 +3241,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 100vh;
+  height: 600px;
 }
 .aaravpos-loading-text {
   font-size: 14px;
@@ -3264,7 +3252,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 100vh;
+  height: 600px;
   padding: 20px;
   text-align: center;
 }
@@ -3302,11 +3290,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 580px;
+  min-height: 580px;
 }
 .aaravpos-loader {
-  width: 36px;
-  height: 36px;
+  width: 24px;
+  height: 24px;
   border: 4px solid #e5e5e5;
   border-top-color: var(--btn-bg);
   border-radius: 50%;
@@ -3338,14 +3326,7 @@
   }
   .aaravpos-date-modal {
     height: fit-content;
-    border-top-left-radius: 18px;
-    border-top-right-radius: 18px;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-  .aaravpos-date-modal-header {
-    padding-left: 16px;
-    padding-right: 16px;
+    border-radius: 12px;
   }
   .aaravpos-date-modal-title {
     font-size: 18px;
@@ -3353,9 +3334,6 @@
   .aaravpos-calendar-grid {
     gap: 8px;
   }
-  .aaravpos-calendar-day {
-    min-height: 40px;
-  }
   .arravpos-date-nav-btn svg {
     width: 18px;
     height: 18px;
@@ -3380,9 +3358,6 @@
     padding: 14px;
     font-size: 13px;
   }
-  .arravpos-booking-scroll {
-    height: calc(100dvh - 200px);
-  }
   .arravpos-calendar-btn {
     font-size: 12px;
   }
@@ -3409,6 +3384,33 @@
   .aaravpos-sidebar {
     display: none;
   }
+  .aaravpos-page-title {
+    font-size: 16px;
+  }
+  .aaravpos-topbar {
+    gap: 10px;
+  }
+  .aaravpos-btn-content {
+    gap: 4px;
+  }
+  .aaravpos-margin-top-20 {
+    margin-top: 14px;
+  }
+  .aaravpos-mobile-step-label {
+    font-size: 14px;
+  }
+  .aaravpos-btn {
+    display: block;
+  }
+  .aaravpos-outlet-card-title {
+    font-size: 16px;
+  }
+  .aaravpos-title {
+    font-size: 18px;
+  }
+  .aaravpos-outlet-grid {
+    gap: 10px;
+  }
 }
 @media (min-width: 768px) {
   .arravpos-section-label {
@@ -3448,10 +3450,10 @@
     padding-right: 24px;
   }
   .aaravpos-order-list {
-    height: calc(100dvh - 235px);
+    height: calc(100dvh - 225px);
   }
   .aaravpos-pro-order-list {
-    height: calc(100dvh - 265px);
+    height: calc(100dvh - 250px);
   }
   .aaravpos-sidebar-close-btn {
     display: none;
@@ -3466,7 +3468,7 @@
 }
 @media (max-width: 480px) {
   .arravpos-date-nav-btn {
-    width: 30px;
+    width: 23px;
     padding: 6px;
   }
   .arravpos-date-nav-btn svg {
@@ -3477,10 +3479,14 @@
     gap: 4px;
   }
   .arravpos-date-card {
-    min-width: 26px;
-    min-height: 40px;
+    min-width: 24px;
+    min-height: 38px;
     padding: 8px 4px;
   }
+  .arravpos-calendar-btn {
+    margin-left: 2px;
+    padding: 6px;
+  }
   .arravpos-date-week {
     font-size: 8px;
     margin-bottom: 3px;
@@ -3530,6 +3536,13 @@
   .arravpos-appointment-date-text {
     font-size: 13px;
   }
+  .aaravpos-date-modal {
+    width: 290px;
+  }
+  .aaravpos-calendar-day {
+    height: 24px;
+    width: 24px;
+  }
 }
 @media (min-width: 1024px) {
   .arravpos-date-strip {
@@ -3579,6 +3592,10 @@
   }
 }
 @media (max-width: 1024px) {
+  .aaravpos-navbar-form {
+    flex-direction: column;
+    margin-bottom: 10px;
+  }
   .arravpos-booking-grid {
     flex-direction: column;
     gap: 20px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aaravpos/appointment-booking-plugin",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "description": "A React component library built with Tailwind CSS v4 and TypeScript",
   "type": "module",
   "packageManager": "pnpm@10.33.0",
@@ -65,7 +65,6 @@
   "dependencies": {
     "@reduxjs/toolkit": "2.11.2",
     "@tailwindcss/postcss": "4.2.4",
-    "framer-motion": "12.38.0",
     "libphonenumber-js": "1.13.1",
     "lodash": "4.18.1",
     "lucide-react": "1.14.0",