@aaravpos/appointment-booking-plugin 7.0.0 → 7.0.1

package/dist/src/components/common/MainLayout.d.ts

@@ -1,2 +1,2 @@
 import { MainLayoutProps } from '../../../types';
-export default function MainLayout({ children, sidebar, renderButton, }: MainLayoutProps): import("react").JSX.Element;
+export default function MainLayout({ children, sidebar, renderButton, isConfirm, handleSidebarOpen, isSidebarOpen }: MainLayoutProps): import("react").JSX.Element;

package/dist/src/components/sidebar/OrderSidebar.d.ts

@@ -12,6 +12,7 @@ interface OrderSidebarProps {
     checkingConsent?: boolean;
     loading?: boolean;
     isBookingDisabled?: boolean;
+    handleSidebarOpen?: () => void;
 }
-export default function OrderSidebar({ buttonText, onButtonClick, showTaxesOnlyIfTime, showTip, tipPct, onTipChange, consentRequired, consentCompleted, totalConsents, checkingConsent, loading, isBookingDisabled, }: OrderSidebarProps): JSX.Element;
+export default function OrderSidebar({ buttonText, onButtonClick, showTaxesOnlyIfTime, showTip, tipPct, onTipChange, consentRequired, consentCompleted, totalConsents, checkingConsent, loading, isBookingDisabled, handleSidebarOpen, }: OrderSidebarProps): JSX.Element;
 export {};

package/dist/styles.css

@@ -954,7 +954,7 @@
   transition: all 0.2s ease;
   border-radius: 6px;
   position: absolute;
-  bottom: 15px;
+  bottom: 25px;
   z-index: 50;
   display: flex;
   align-items: center;
@@ -1096,7 +1096,7 @@
   transition: all 0.2s ease;
   border-radius: 24px;
   position: absolute;
-  bottom: 15px;
+  bottom: 8px;
   z-index: 50;
   display: flex;
   align-items: center;
@@ -1776,7 +1776,7 @@
 }
 .aaravpos-staff-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
+  grid-template-columns: repeat(2, 1fr);
   gap: 12px;
 }
 .aaravpos-display-flex {
@@ -3583,7 +3583,7 @@
   cursor: pointer;
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  font-size: 16px;
+  font-size: 12px;
   transition: all 0.2s ease;
 }
 .aaravpos-book-btn:hover {
@@ -3895,7 +3895,7 @@
     display: none;
   }
   .aaravpos-btn {
-    display: block;
+    display: flex;
   }
 }
 @media (min-width: 1024px) {
@@ -3954,6 +3954,9 @@
     flex-direction: column;
     gap: 20px;
   }
+  .aaravpos-btn {
+    display: flex;
+  }
 }
 @media (min-width: 1280px) {
   .aaravpos-title {
@@ -4267,6 +4270,20 @@
   cursor: pointer;
   user-select: none;
 }
+.booking-pro-card-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+}
+@media (max-width: 1024px) {
+  .booking-pro-card {
+    padding: 12px 8px;
+  }
+  .booking-pro-card-header {
+    gap: 8px;
+  }
+}
 .booking-pro-card:hover {
   border-color: rgba(0, 0, 0, 0.2);
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
@@ -4303,6 +4320,17 @@
   border: 1px solid rgba(0, 0, 0, 0.1);
   flex-shrink: 0;
 }
+@media (max-width: 1024px) {
+  .booking-pro-avatar-circle {
+    width: 36px;
+    height: 36px;
+    font-size: 12px;
+  }
+  .booking-pro-avatar-img {
+    width: 36px;
+    height: 36px;
+  }
+}
 .booking-pro-info {
   flex: 1;
   min-width: 0;
@@ -4853,3 +4881,256 @@
     transform: rotate(360deg);
   }
 }
+@keyframes bookingSliderFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes bookingSliderSlideUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+.booking-slider-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 998;
+  animation: bookingSliderFadeIn 0.2s ease-out forwards;
+}
+.booking-slider-sheet {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #ffffff;
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+  z-index: 999;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  border-top: 1px solid #f3f4f6;
+  padding-bottom: env(safe-area-inset-bottom, 16px);
+  animation: bookingSliderSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+@media (min-width: 1024px) {
+  .booking-slider-backdrop, .booking-slider-sheet {
+    display: none !important;
+  }
+}
+.booking-slider-drag-handle-container {
+  display: flex;
+  justify-content: center;
+  padding: 12px 0;
+}
+.booking-slider-drag-handle {
+  width: 48px;
+  height: 4px;
+  background-color: #e5e7eb;
+  border-radius: 9999px;
+}
+.booking-slider-header {
+  padding: 0 16px 12px 16px;
+  border-bottom: 1px solid #f3f4f6;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.booking-slider-header-text {
+  text-align: left;
+}
+.booking-slider-title {
+  font-family: var(--font-heading);
+  font-size: 20px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin: 0;
+  color: #111827;
+}
+.booking-slider-subtitle {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.5);
+  margin: 4px 0 0 0;
+}
+.booking-slider-close-btn {
+  padding: 6px;
+  border-radius: 9999px;
+  transition: all 0.2s ease;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #4b5563;
+}
+.booking-slider-close-btn:hover {
+  background-color: #f3f4f6;
+  color: #111827;
+}
+.booking-slider-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 16px;
+  max-height: 50vh;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.booking-slider-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 8px;
+  padding: 14px;
+  transition: all 0.2s ease;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+.booking-slider-item:hover {
+  border-color: rgba(0, 0, 0, 0.25);
+  background-color: #fcfcfc;
+}
+.booking-slider-item.active {
+  border: 2px solid var(--btn-bg);
+  background-color: rgba(215, 38, 61, 0.05);
+  padding: 13px;
+}
+.booking-slider-item-content {
+  flex: 1;
+  min-width: 0;
+  padding-right: 12px;
+  text-align: left;
+}
+.booking-slider-item-name {
+  font-weight: 700;
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  margin: 0 0 2px 0;
+  color: #111827;
+}
+.booking-slider-item-desc {
+  font-size: 11px;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.4);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  margin: 0 0 6px 0;
+}
+.booking-slider-item-meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.6);
+}
+.booking-slider-item-price {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+}
+.booking-slider-item-checkbox-wrapper {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+.booking-slider-checkbox {
+  width: 20px;
+  height: 20px;
+  accent-color: var(--btn-bg);
+  border-radius: 4px;
+  cursor: pointer;
+}
+.booking-slider-empty-text {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.4);
+  text-align: center;
+  padding: 32px 0;
+  margin: 0;
+}
+.booking-slider-footer {
+  padding: 16px;
+  border-top: 1px solid #f3f4f6;
+  background-color: #f9fafb;
+  display: flex;
+  gap: 12px;
+}
+.booking-slider-continue-btn {
+  flex: 1;
+  background-color: var(--btn-bg);
+  color: #ffffff;
+  padding: 12px;
+  border-radius: 9999px;
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: 12px;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  text-align: center;
+  border: none;
+  transition: background-color 0.2s ease, transform 0.1s ease;
+}
+.booking-slider-continue-btn:hover {
+  background-color: var(--btn-bg-hover, #1f2937);
+}
+.booking-slider-continue-btn:active {
+  transform: scale(0.98);
+}
+.aaravpos-mobile-action-wrapper {
+  position: fixed;
+  bottom: 20px;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+  padding: 0 16px;
+}
+@media (min-width: 768px) {
+  .aaravpos-mobile-action-wrapper {
+    display: none !important;
+  }
+}
+.aaravpos-cta-btn {
+  padding: 12px 34px;
+  font-size: 14px;
+  position: relative;
+  border-radius: 9999px;
+  border: none;
+  background-color: var(--btn-bg);
+  color: #ffffff;
+  font-family: var(--font-body);
+  font-weight: 700;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.aaravpos-cta-btn:hover {
+  background-color: var(--btn-bg-hover);
+  color: var(--btn-text-hover, #ffffff);
+}
+.aaravpos-cta-btn:disabled {
+  background-color: #cccccc;
+  cursor: not-allowed;
+}

package/package.json

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