@aaravpos/appointment-barber-booking 1.0.9 → 2.0.1

package/dist/styles.css

@@ -834,6 +834,12 @@
 .aaravpos-barber-margin-bottom-20 {
   margin-bottom: 20px !important;
 }
+.aaravpos-barber-margin-top-10 {
+  margin-top: 10px;
+}
+.aaravpos-barber-margin-bottom-10 {
+  margin-bottom: 10px !important;
+}
 .aaravpos-barber-mt-auto {
   margin-top: auto;
 }
@@ -1633,33 +1639,32 @@
   justify-content: center;
 }
 .aaravpos-barber-professional-card {
-  background: #f6f6f6;
-  border: 1px solid #ececec;
-  padding: 16px;
+  background: white;
+  border: 1px solid #e5e5e5;
+  padding: 10px;
   transition: all 0.3s ease;
   cursor: pointer;
 }
-.aaravpos-barber-professional-card:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
 .aaravpos-barber-professional-card.active {
-  border-color: rgba(var(--btn-bg), 0.08);
+  border-color: rgba(var(--btn-bg), 0.4);
+}
+.aaravpos-barber-professional-card:hover {
+  transform: translateY(-2px);
 }
 .aaravpos-barber-professional-image-wrapper {
+  position: relative;
   width: 100%;
-  height: 180px;
+  height: 250px;
   overflow: hidden;
-  background: #111111;
-  margin-bottom: 18px;
+  background: #111;
+  margin-bottom: 6px;
 }
-.aaravpos-barber-professional-image {
+.aaravpos-barber-professional-image, .aaravpos-barber-professional-avatar {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 .aaravpos-barber-professional-avatar {
-  width: 100%;
-  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1668,28 +1673,72 @@
   font-weight: 800;
 }
 .aaravpos-barber-professional-rating {
-  font-size: 9px;
-  font-weight: 600;
-  color: #111111;
-  margin: 0px;
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  background: rgba(70, 70, 70, 0.5);
+  color: #ffffff;
+  padding: 3px 6px;
+  border-radius: 30px;
+  font-size: 10px;
+  font-weight: 700;
+  z-index: 2;
+}
+.aaravpos-barber-professional-overlay {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 10px 14px;
+  background: var(--btn-bg);
+  @supports (color: color-mix(in lab, red, red)) {
+    background: color-mix(in srgb, var(--btn-bg) 40%, transparent);
+  }
 }
 .aaravpos-barber-professional-name {
   font-size: 16px;
   line-height: 1;
   font-weight: 900;
-  color: #111111;
+  color: var(--btn-text);
   text-transform: uppercase;
-  margin-top: 6px;
-  margin-bottom: 6px;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+  margin: 0 0 4px;
 }
 .aaravpos-barber-professional-role {
-  font-size: 10px;
+  font-size: 11px;
   font-weight: 700;
-  color: #c1121f;
+  color: var(--btn-bg-hover);
   text-transform: uppercase;
   letter-spacing: 1px;
-  margin-top: 0px;
-  margin-bottom: 14px;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+  margin: 0;
+}
+.aaravpos-barber-professional-btn {
+  width: 100%;
+  height: 44px;
+  border: 1px solid #111111;
+  background: transparent;
+  color: #111111;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+.aaravpos-barber-professional-btn:hover {
+  background: #111111;
+  color: #ffffff;
 }
 .aaravpos-barber-professional-btn {
   width: 100%;
@@ -1702,6 +1751,7 @@
   letter-spacing: 2px;
   text-transform: uppercase;
   transition: all 0.3s ease;
+  cursor: pointer;
 }
 .aaravpos-barber-professional-btn:hover {
   background: var(--btn-bg-hover);
@@ -2453,6 +2503,7 @@
   font-size: 12px;
   color: rgba(0, 0, 0, 0.7);
   margin-top: 2px;
+  margin-bottom: 0px;
   line-height: 1.5;
   word-break: break-word;
 }
@@ -3662,7 +3713,7 @@
     display: none;
   }
   .aaravpos-barber-layout-wrapper {
-    grid-template-columns: minmax(0, 1fr) 360px;
+    grid-template-columns: minmax(0, 1fr) 290px;
   }
 }
 @media (max-width: 991px) {
@@ -3737,24 +3788,53 @@
   .aaravpos-barber-outlet-grid {
     grid-template-columns: repeat(4, 1fr);
   }
+  .aaravpos-barber-layout-wrapper {
+    grid-template-columns: minmax(0, 1fr) 280px;
+  }
+}
+@media (min-width: 1350px) {
+  .aaravpos-barber-layout-wrapper {
+    grid-template-columns: minmax(0, 1fr) 250px;
+  }
+}
+@media (min-width: 1440px) {
+  .aaravpos-barber-layout-wrapper {
+    grid-template-columns: minmax(0, 1fr) 200px;
+  }
 }
 @media (min-width: 1536px) {
   .aaravpos-barber-outlet-grid {
     grid-template-columns: repeat(5, 1fr);
   }
+  .aaravpos-barber-layout-wrapper {
+    grid-template-columns: minmax(0, 1fr) 150px;
+  }
+}
+@media (min-width: 1710px) {
+  .aaravpos-barber-layout-wrapper {
+    grid-template-columns: minmax(0, 1fr) 60px;
+  }
+}
+@media (min-width: 1840px) {
+  .aaravpos-barber-layout-wrapper {
+    grid-template-columns: minmax(0, 1fr);
+  }
 }
 @media (max-width: 768px) {
   .aaravpos-barber-professional-grid {
     gap: 20px;
     grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
   }
-  .aaravpos-barber-professional-name {
-    font-size: 20px;
-  }
 }
 @media (max-width: 450px) {
   .aaravpos-barber-professional-grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
+  }
+  .aaravpos-barber-professional-image-wrapper {
+    height: 200px;
+  }
+  .aaravpos-barber-professional-name {
+    font-size: 12px;
   }
 }
 @keyframes aaravpos-barber-shimmer {

package/package.json

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