@idkwebsites/components 0.1.19 → 0.1.20

package/dist/index.d.cts

@@ -443,14 +443,14 @@ interface BookingWidgetProps$1 {
 declare function BookingWidget({ className, title, subtitle, serviceSearchPlaceholder, categoryLabel, serviceListMaxHeight, serviceLayout, serviceColumns, showServicePagination, staffLayout, staffColumns, showStaffPagination, timeLayout, showFullyBookedLabel, calendarVariant, enableServiceSearch, enableCategoryFilter, enableDatePaging, disabledWeekdays, ...hookProps }: BookingWidgetProps$1): react_jsx_runtime.JSX.Element;
 
 interface BookingWidgetProps {
-    /** Navigation links shown in the mobile menu overlay. Omit to hide hamburger. */
+    /** Navigation links shown in the mobile menu overlay. Omit to hide hamburger. @deprecated Use `mobileHeader` instead. */
     navLinks?: {
         label: string;
         href: string;
     }[];
-    /** Custom icon for the mobile menu open button (default: lucide Menu) */
+    /** Custom icon for the mobile menu open button (default: lucide Menu) @deprecated Use `mobileHeader` instead. */
     menuIcon?: ReactNode;
-    /** Custom icon for the mobile menu close button (default: lucide X) */
+    /** Custom icon for the mobile menu close button (default: lucide X) @deprecated Use `mobileHeader` instead. */
     closeIcon?: ReactNode;
     /** Override the category → icon mapping (keyword → React component) */
     categoryIcons?: Record<string, typeof Scissors>;
@@ -459,6 +459,7 @@ interface BookingWidgetProps {
     /**
      * Link component for mobile nav. Defaults to a plain `<a>` tag.
      * Next.js sites should pass `Link` from `next/link` for client-side navigation.
+     * @deprecated Use `mobileHeader` instead.
      */
     linkComponent?: ComponentType<{
         href: string;
@@ -466,8 +467,14 @@ interface BookingWidgetProps {
         onClick?: () => void;
         children: ReactNode;
     }>;
+    /**
+     * Site's mobile header/navbar component. Rendered inside the widget on mobile,
+     * replacing the built-in hamburger menu. Pass your SiteHeader component here
+     * so the booking widget uses the same navigation design as the rest of the site.
+     */
+    mobileHeader?: ReactNode;
 }
-declare function BookingWidgetPanel({ navLinks, menuIcon, closeIcon, categoryIcons, stepTitles, linkComponent: LinkComp, }?: BookingWidgetProps): react_jsx_runtime.JSX.Element;
+declare function BookingWidgetPanel({ navLinks, menuIcon, closeIcon, categoryIcons, stepTitles, linkComponent: LinkComp, mobileHeader, }?: BookingWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface AvailabilityPickerProps {
     serviceId: string;

package/dist/index.d.ts

@@ -443,14 +443,14 @@ interface BookingWidgetProps$1 {
 declare function BookingWidget({ className, title, subtitle, serviceSearchPlaceholder, categoryLabel, serviceListMaxHeight, serviceLayout, serviceColumns, showServicePagination, staffLayout, staffColumns, showStaffPagination, timeLayout, showFullyBookedLabel, calendarVariant, enableServiceSearch, enableCategoryFilter, enableDatePaging, disabledWeekdays, ...hookProps }: BookingWidgetProps$1): react_jsx_runtime.JSX.Element;
 
 interface BookingWidgetProps {
-    /** Navigation links shown in the mobile menu overlay. Omit to hide hamburger. */
+    /** Navigation links shown in the mobile menu overlay. Omit to hide hamburger. @deprecated Use `mobileHeader` instead. */
     navLinks?: {
         label: string;
         href: string;
     }[];
-    /** Custom icon for the mobile menu open button (default: lucide Menu) */
+    /** Custom icon for the mobile menu open button (default: lucide Menu) @deprecated Use `mobileHeader` instead. */
     menuIcon?: ReactNode;
-    /** Custom icon for the mobile menu close button (default: lucide X) */
+    /** Custom icon for the mobile menu close button (default: lucide X) @deprecated Use `mobileHeader` instead. */
     closeIcon?: ReactNode;
     /** Override the category → icon mapping (keyword → React component) */
     categoryIcons?: Record<string, typeof Scissors>;
@@ -459,6 +459,7 @@ interface BookingWidgetProps {
     /**
      * Link component for mobile nav. Defaults to a plain `<a>` tag.
      * Next.js sites should pass `Link` from `next/link` for client-side navigation.
+     * @deprecated Use `mobileHeader` instead.
      */
     linkComponent?: ComponentType<{
         href: string;
@@ -466,8 +467,14 @@ interface BookingWidgetProps {
         onClick?: () => void;
         children: ReactNode;
     }>;
+    /**
+     * Site's mobile header/navbar component. Rendered inside the widget on mobile,
+     * replacing the built-in hamburger menu. Pass your SiteHeader component here
+     * so the booking widget uses the same navigation design as the rest of the site.
+     */
+    mobileHeader?: ReactNode;
 }
-declare function BookingWidgetPanel({ navLinks, menuIcon, closeIcon, categoryIcons, stepTitles, linkComponent: LinkComp, }?: BookingWidgetProps): react_jsx_runtime.JSX.Element;
+declare function BookingWidgetPanel({ navLinks, menuIcon, closeIcon, categoryIcons, stepTitles, linkComponent: LinkComp, mobileHeader, }?: BookingWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface AvailabilityPickerProps {
     serviceId: string;

package/dist/index.js

@@ -1747,7 +1747,8 @@ function BookingWidgetPanel({
   closeIcon,
   categoryIcons,
   stepTitles,
-  linkComponent: LinkComp = DefaultLink
+  linkComponent: LinkComp = DefaultLink,
+  mobileHeader
 } = {}) {
   const widgetRef = useRef3(null);
   const formRef = useRef3(null);
@@ -2020,10 +2021,12 @@ function BookingWidgetPanel({
       svc.id
     );
   };
+  const useLegacyNav = !mobileHeader && navLinks.length > 0;
   return /* @__PURE__ */ jsxs5("div", { className: "bw", ref: widgetRef, children: [
+    mobileHeader && /* @__PURE__ */ jsx9("div", { className: "bw-mobile-header", children: mobileHeader }),
     /* @__PURE__ */ jsxs5("div", { className: "bw-topbar", children: [
       /* @__PURE__ */ jsx9("div", { className: "bw-dots", children: Array.from({ length: 4 }, (_, i) => /* @__PURE__ */ jsx9("div", { className: `bw-dot ${mobileStep > i ? "is-filled" : ""}` }, i)) }),
-      navLinks.length > 0 && /* @__PURE__ */ jsx9(
+      useLegacyNav && /* @__PURE__ */ jsx9(
         "button",
         {
           className: "bw-topbar-menu",
@@ -2033,7 +2036,7 @@ function BookingWidgetPanel({
         }
       )
     ] }),
-    navLinks.length > 0 && /* @__PURE__ */ jsx9(AnimatePresence, { children: navOpen && /* @__PURE__ */ jsx9(
+    useLegacyNav && /* @__PURE__ */ jsx9(AnimatePresence, { children: navOpen && /* @__PURE__ */ jsx9(
       motion.div,
       {
         className: "bw-nav-overlay",