@aaravpos/appointment-barber-booking 2.0.4 → 2.0.6

package/dist/styles.css

@@ -805,6 +805,94 @@
 .aaravpos-barber-m0 {
   margin: 0px !important;
 }
+.aaravpos-barber-paymentcard-wrapper {
+  width: 100%;
+  display: flex;
+  cursor: pointer;
+}
+.aaravpos-barber-paymentcard-card.active {
+  border-color: var(--btn-bg);
+}
+.aaravpos-barber-paymentcard-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.aaravpos-barber-section-label {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 10px;
+  display: inline-block;
+}
+.aaravpos-barber-paymentcard-card {
+  background: linear-gradient(to right, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.02));
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  padding: 28px 18px;
+  flex: 1;
+  margin-bottom: 8px;
+  position: relative;
+}
+.aaravpos-barber-paymentcard-content {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  height: 100%;
+}
+.aaravpos-barber-paymentcard-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: var(--btn-bg);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 18px;
+}
+.aaravpos-barber-paymentcard-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.aaravpos-barber-paymentcard-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  height: 100%;
+}
+.aaravpos-barber-paymentcard-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+  margin-bottom: 6px;
+}
+.aaravpos-barber-paymentcard-description {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.6);
+  margin-top: 5px;
+  line-height: 1.5;
+  margin-bottom: 0px;
+}
+.aaravpos-barber-paymentcard-check {
+  background-color: var(--btn-bg);
+  color: #fff;
+  border-radius: 50%;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  font-size: 12px;
+  display: flex;
+  position: absolute;
+  right: 14px;
+  top: 50%;
+  margin-top: -12px;
+}
 .aaravpos-barber-overflow-hidden {
   overflow: hidden;
 }
@@ -1610,7 +1698,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-barber-shimmer 1.2s infinite;
 }
 .shimmer {
@@ -1625,7 +1713,7 @@
   left: -150px;
   height: 100%;
   width: 150px;
-  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.6), transparent );
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
   animation: shimmer 1.2s infinite;
 }
 @keyframes shimmer {
@@ -2278,9 +2366,6 @@
   cursor: pointer;
   transition: all 0.2s ease;
 }
-.aaravpos-barber-date-nav-btn:hover {
-  color: var(--red-color);
-}
 .aaravpos-barber-date-nav-btn:disabled {
   opacity: 0.3;
   cursor: not-allowed;
@@ -2328,17 +2413,13 @@
   background: var(--btn-bg);
   color: #fff;
 }
-.aaravpos-barber-calendar-day-disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
 .aaravpos-barber-calendar-day {
   position: relative;
 }
 .aaravpos-barber-calendar-day-disabled {
-  background: rgba(0, 0, 0, 0.03);
+  background: rgba(0, 0, 0, 0.05);
   cursor: not-allowed;
-  opacity: 0.6;
+  opacity: 0.5;
 }
 .aaravpos-barber-calendar-day-slash {
   position: absolute;
@@ -2394,7 +2475,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-barber-spinner-wrapper {
@@ -2634,8 +2715,8 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  margin-top: 12px;
-  padding-top: 12px;
+  margin-top: 8px;
+  padding-top: 8px;
   border-top: 1px solid #e5e7eb;
 }
 .aaravpos-barber-appointment-date-text {
@@ -2852,9 +2933,7 @@
   box-sizing: border-box;
 }
 .aaravpos-barber-payment-header {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 20px;
+  padding-right: 25px;
 }
 .aaravpos-barber-payment-title {
   font-size: 18px;
@@ -3310,7 +3389,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 10px;
+  padding: 12px 10px;
   cursor: pointer;
   background-color: var(--surface);
   transition: background-color 0.2s ease;
@@ -3412,7 +3491,7 @@
 .aaravpos-barber-card-box {
   background-color: #ffffff;
   border: 1px solid var(--btn-bg);
-  border-radius: 2px;
+  border-radius: 4px;
   padding: 16px;
   margin-bottom: 8px;
   font-size: 14px;
@@ -3442,8 +3521,11 @@
   background-color: transparent;
 }
 .aaravpos-barber-select-card-active {
-  border-color: var(--red);
-  background-color: rgba(255, 0, 0, 0.05);
+  border-color: var(--btn-bg);
+  background-color: var(--btn-bg);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in srgb, var(--btn-bg) 10%, transparent);
+  }
 }
 .aaravpos-barber-select-check {
   margin-left: auto;
@@ -3469,9 +3551,12 @@
   transition: all 150ms ease;
 }
 .aaravpos-barber-date-nav-btn:hover {
-  border-color: var(--red);
-  color: var(--red);
-  background-color: rgba(215, 38, 61, 0.12);
+  border-color: var(--btn-bg);
+  color: var(--btn-bg);
+  background-color: var(--btn-bg);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in srgb, var(--btn-bg) 10%, transparent);
+  }
 }
 .aaravpos-barber-loading-container {
   display: flex;
@@ -3849,7 +3934,17 @@
   }
   .aaravpos-barber-booking-grid {
     flex-direction: column;
-    gap: 20px;
+    gap: 0px;
+  }
+}
+@media (max-width: 1178px) {
+  .aaravpos-barber-paymentcard-card {
+    padding: 20px;
+  }
+}
+@media (max-width: 1280px) {
+  .aaravpos-barber-paymentcardt-card {
+    padding: 18px;
   }
 }
 @media (min-width: 1280px) {

package/package.json

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