@idkwebsites/components 0.1.7 → 0.1.8

package/dist/index.js

@@ -97,29 +97,97 @@ function useTenant() {
 }
 
 // src/core/hooks/useServices.ts
+import { useMemo } from "react";
 import { useQuery as useQuery2 } from "@tanstack/react-query";
-function useServices() {
+function buildQuery(params) {
+  if (!params) return "";
+  const searchParams = new URLSearchParams();
+  const categories = Array.isArray(params.category) ? params.category : params.category ? [params.category] : [];
+  if (categories.length) searchParams.set("category", categories.join(","));
+  if (params.staffId) searchParams.set("staffId", params.staffId);
+  if (typeof params.isActive === "boolean") searchParams.set("isActive", String(params.isActive));
+  if (typeof params.minPrice === "number") searchParams.set("minPrice", String(params.minPrice));
+  if (typeof params.maxPrice === "number") searchParams.set("maxPrice", String(params.maxPrice));
+  if (params.search) searchParams.set("search", params.search);
+  if (params.ids?.length) searchParams.set("ids", params.ids.join(","));
+  if (typeof params.limit === "number") searchParams.set("limit", String(params.limit));
+  if (params.sort) searchParams.set("sort", params.sort);
+  if (params.order) searchParams.set("order", params.order);
+  return searchParams.toString();
+}
+function useServices(params) {
   const config = usePlatformConfig();
+  const queryString = useMemo(() => buildQuery(params), [
+    params?.category,
+    params?.staffId,
+    params?.isActive,
+    params?.minPrice,
+    params?.maxPrice,
+    params?.search,
+    params?.ids,
+    params?.limit,
+    params?.sort,
+    params?.order
+  ]);
+  const enabled = params?.enabled ?? true;
   return useQuery2({
-    queryKey: ["idk", "services"],
-    queryFn: () => apiRequest(config, "/services")
+    queryKey: ["idk", "services", queryString],
+    queryFn: () => apiRequest(
+      config,
+      queryString ? `/services?${queryString}` : "/services"
+    ),
+    enabled
   });
 }
 
 // src/core/hooks/useTeam.ts
+import { useMemo as useMemo2 } from "react";
 import { useQuery as useQuery3 } from "@tanstack/react-query";
-function useTeam() {
+function buildQuery2(params) {
+  if (!params) return "";
+  const searchParams = new URLSearchParams();
+  const roles = Array.isArray(params.role) ? params.role : params.role ? [params.role] : [];
+  if (roles.length) searchParams.set("role", roles.join(","));
+  if (typeof params.isActive === "boolean") searchParams.set("isActive", String(params.isActive));
+  if (typeof params.acceptsNewBookings === "boolean") {
+    searchParams.set("acceptsNewBookings", String(params.acceptsNewBookings));
+  }
+  if (params.search) searchParams.set("search", params.search);
+  if (params.ids?.length) searchParams.set("ids", params.ids.join(","));
+  if (params.serviceId) searchParams.set("serviceId", params.serviceId);
+  if (typeof params.limit === "number") searchParams.set("limit", String(params.limit));
+  if (params.sort) searchParams.set("sort", params.sort);
+  if (params.order) searchParams.set("order", params.order);
+  return searchParams.toString();
+}
+function useTeam(params) {
   const config = usePlatformConfig();
+  const queryString = useMemo2(() => buildQuery2(params), [
+    params?.role,
+    params?.isActive,
+    params?.acceptsNewBookings,
+    params?.search,
+    params?.ids,
+    params?.serviceId,
+    params?.limit,
+    params?.sort,
+    params?.order
+  ]);
+  const enabled = params?.enabled ?? true;
   return useQuery3({
-    queryKey: ["idk", "team"],
-    queryFn: () => apiRequest(config, "/team")
+    queryKey: ["idk", "team", queryString],
+    queryFn: () => apiRequest(
+      config,
+      queryString ? `/team?${queryString}` : "/team"
+    ),
+    enabled
   });
 }
 
 // src/core/hooks/useAvailability.ts
-import { useMemo } from "react";
+import { useMemo as useMemo3 } from "react";
 import { useQuery as useQuery4 } from "@tanstack/react-query";
-function buildQuery(params) {
+function buildQuery3(params) {
   const searchParams = new URLSearchParams();
   searchParams.set("serviceId", params.serviceId);
   if (params.staffId) searchParams.set("staffId", params.staffId);
@@ -131,8 +199,8 @@ function buildQuery(params) {
 }
 function useAvailability(params) {
   const config = usePlatformConfig();
-  const queryString = useMemo(
-    () => buildQuery(params),
+  const queryString = useMemo3(
+    () => buildQuery3(params),
     [params.serviceId, params.staffId, params.startDate, params.endDate, params.date, params.days]
   );
   const enabled = params.enabled ?? Boolean(params.serviceId);
@@ -182,6 +250,7 @@ function ServiceCard({
   className,
   showDescription = true,
   showPrice = true,
+  showImage = false,
   onSelect
 }) {
   const handleClick = () => {
@@ -195,6 +264,7 @@ function ServiceCard({
       role: onSelect ? "button" : void 0,
       tabIndex: onSelect ? 0 : void 0,
       children: [
+        showImage && service.image?.url ? /* @__PURE__ */ jsx2("div", { className: "idk-card__media", children: /* @__PURE__ */ jsx2("img", { src: service.image.url, alt: service.name }) }) : null,
         /* @__PURE__ */ jsxs("div", { className: "idk-card__header", children: [
           /* @__PURE__ */ jsx2("h3", { className: "idk-card__title", children: service.name }),
           showPrice && typeof service.price === "number" && service.price > 0 ? /* @__PURE__ */ jsxs("span", { className: "idk-card__price", children: [
@@ -223,14 +293,31 @@ function ServicesList({
   className,
   showDescription,
   showPrice,
+  showImage,
+  query,
+  filter,
+  sort,
+  limit,
+  emptyMessage = "No services available.",
+  loadingMessage = "Loading services...",
   onSelect
 }) {
-  const { data, isLoading, error } = useServices();
+  const { data, isLoading, error } = useServices(query);
   if (isLoading) {
-    return /* @__PURE__ */ jsx3("div", { className: "idk-state", children: "Loading services..." });
+    return /* @__PURE__ */ jsx3("div", { className: "idk-state", children: loadingMessage });
   }
-  if (error || !data?.services?.length) {
-    return /* @__PURE__ */ jsx3("div", { className: "idk-state", children: "No services available." });
+  let services = data?.services ? [...data.services] : [];
+  if (filter) {
+    services = services.filter(filter);
+  }
+  if (sort) {
+    services = services.sort(sort);
+  }
+  if (typeof limit === "number") {
+    services = services.slice(0, Math.max(0, limit));
+  }
+  if (error || services.length === 0) {
+    return /* @__PURE__ */ jsx3("div", { className: "idk-state", children: emptyMessage });
   }
   const gridStyle = layout === "grid" ? { gridTemplateColumns: `repeat(${Math.max(1, columns)}, minmax(0, 1fr))` } : void 0;
   return /* @__PURE__ */ jsx3(
@@ -242,12 +329,13 @@ function ServicesList({
         className
       ].filter(Boolean).join(" "),
       style: gridStyle,
-      children: data.services.map((service) => /* @__PURE__ */ jsx3(
+      children: services.map((service) => /* @__PURE__ */ jsx3(
         ServiceCard,
         {
           service,
           showDescription,
           showPrice,
+          showImage,
           onSelect
         },
         service.id
@@ -262,14 +350,31 @@ function TeamMember({
   member,
   className,
   showRole = true,
-  showEmail = false
+  showEmail = false,
+  showBio = false,
+  layout = "card",
+  imagePosition = "left"
 }) {
   const initials = member.name?.split(" ").map((part) => part[0]).slice(0, 2).join("").toUpperCase();
+  const avatar = /* @__PURE__ */ jsx4("div", { className: "idk-team__avatar", children: member.photo?.url ? /* @__PURE__ */ jsx4("img", { src: member.photo.url, alt: member.name }) : /* @__PURE__ */ jsx4("span", { children: initials }) });
+  if (layout === "profile") {
+    return /* @__PURE__ */ jsxs2("div", { className: ["idk-team__profile", className].filter(Boolean).join(" "), children: [
+      imagePosition === "left" ? avatar : null,
+      /* @__PURE__ */ jsxs2("div", { className: "idk-team__info", children: [
+        /* @__PURE__ */ jsx4("h3", { className: "idk-card__title", children: member.name }),
+        showRole ? /* @__PURE__ */ jsx4("p", { className: "idk-card__description", children: member.role || "Staff" }) : null,
+        showBio && member.bio ? /* @__PURE__ */ jsx4("p", { className: "idk-team__bio", children: member.bio }) : null,
+        showEmail ? /* @__PURE__ */ jsx4("p", { className: "idk-card__meta", children: member.email }) : null
+      ] }),
+      imagePosition === "right" ? avatar : null
+    ] });
+  }
   return /* @__PURE__ */ jsxs2("div", { className: ["idk-card", className].filter(Boolean).join(" "), children: [
     /* @__PURE__ */ jsx4("div", { className: "idk-team__avatar", children: member.photo?.url ? /* @__PURE__ */ jsx4("img", { src: member.photo.url, alt: member.name }) : /* @__PURE__ */ jsx4("span", { children: initials }) }),
     /* @__PURE__ */ jsxs2("div", { className: "idk-team__info", children: [
       /* @__PURE__ */ jsx4("h3", { className: "idk-card__title", children: member.name }),
       showRole ? /* @__PURE__ */ jsx4("p", { className: "idk-card__description", children: member.role || "Staff" }) : null,
+      showBio && member.bio ? /* @__PURE__ */ jsx4("p", { className: "idk-team__bio", children: member.bio }) : null,
       showEmail ? /* @__PURE__ */ jsx4("p", { className: "idk-card__meta", children: member.email }) : null
     ] })
   ] });
@@ -281,14 +386,33 @@ function TeamGrid({
   columns = 3,
   className,
   showRole,
-  showEmail
+  showEmail,
+  showBio,
+  layout = "card",
+  imagePosition = "left",
+  query,
+  filter,
+  sort,
+  limit,
+  emptyMessage = "No team members available.",
+  loadingMessage = "Loading team..."
 }) {
-  const { data, isLoading, error } = useTeam();
+  const { data, isLoading, error } = useTeam(query);
   if (isLoading) {
-    return /* @__PURE__ */ jsx5("div", { className: "idk-state", children: "Loading team..." });
+    return /* @__PURE__ */ jsx5("div", { className: "idk-state", children: loadingMessage });
+  }
+  let members = data?.team ? [...data.team] : [];
+  if (filter) {
+    members = members.filter(filter);
+  }
+  if (sort) {
+    members = members.sort(sort);
   }
-  if (error || !data?.team?.length) {
-    return /* @__PURE__ */ jsx5("div", { className: "idk-state", children: "No team members available." });
+  if (typeof limit === "number") {
+    members = members.slice(0, Math.max(0, limit));
+  }
+  if (error || members.length === 0) {
+    return /* @__PURE__ */ jsx5("div", { className: "idk-state", children: emptyMessage });
   }
   const gridStyle = { gridTemplateColumns: `repeat(${Math.max(1, columns)}, minmax(0, 1fr))` };
   return /* @__PURE__ */ jsx5(
@@ -296,12 +420,15 @@ function TeamGrid({
     {
       className: ["idk-team", className].filter(Boolean).join(" "),
       style: gridStyle,
-      children: data.team.map((member) => /* @__PURE__ */ jsx5(
+      children: members.map((member) => /* @__PURE__ */ jsx5(
         TeamMember,
         {
           member,
           showRole,
-          showEmail
+          showEmail,
+          showBio,
+          layout,
+          imagePosition
         },
         member.id
       ))
@@ -421,215 +548,674 @@ function ContactForm({
 }
 
 // src/components/BookingWidget.tsx
-import { useMemo as useMemo2, useState as useState3 } from "react";
+import { useCallback, useEffect, useMemo as useMemo4, useRef, useState as useState3 } from "react";
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function BookingWidget({
   className,
   showStaffSelection = true,
-  onSuccess
+  onSuccess,
+  services,
+  servicesQuery,
+  teamQuery,
+  serviceFilter,
+  teamFilter,
+  title = "Book an Appointment",
+  subtitle,
+  autoAdvanceOnSelect = false,
+  scrollToStep = true,
+  scrollOffset = 96,
+  enableServiceSearch = true,
+  serviceSearchPlaceholder = "Search services",
+  enableCategoryFilter = false,
+  categoryLabel = "All categories",
+  serviceListMaxHeight,
+  serviceLayout = "list",
+  serviceColumns = 2,
+  servicePageSize = 10,
+  showServicePagination,
+  staffLayout = "grid",
+  staffColumns = 2,
+  showAnyStaffOption = true,
+  timeLayout = "split"
 }) {
-  const { data: servicesData, isLoading: servicesLoading } = useServices();
-  const { data: teamData } = useTeam();
+  const resolvedServicesQuery = useMemo4(
+    () => services ? { ...servicesQuery, enabled: false } : servicesQuery,
+    [services, servicesQuery]
+  );
+  const { data: servicesData, isLoading: servicesLoading } = useServices(resolvedServicesQuery);
+  const { data: teamData } = useTeam(teamQuery);
   const createBooking = useCreateBooking();
+  const widgetRef = useRef(null);
   const [step, setStep] = useState3("service");
   const [selectedService, setSelectedService] = useState3(null);
   const [selectedStaff, setSelectedStaff] = useState3(null);
   const [selectedDate, setSelectedDate] = useState3(null);
   const [selectedTime, setSelectedTime] = useState3(null);
   const [selectedEndTime, setSelectedEndTime] = useState3(null);
+  const [serviceSearch, setServiceSearch] = useState3("");
+  const [categoryFilter, setCategoryFilter] = useState3("all");
+  const [servicePage, setServicePage] = useState3(1);
+  const [bookingError, setBookingError] = useState3(null);
   const [details, setDetails] = useState3({
     name: "",
     email: "",
     phone: "",
     notes: ""
   });
-  const staffOptions = useMemo2(() => {
+  const servicesList = useMemo4(() => {
+    const list = services ? [...services] : servicesData?.services ? [...servicesData.services] : [];
+    return serviceFilter ? list.filter(serviceFilter) : list;
+  }, [services, servicesData, serviceFilter]);
+  const categories = useMemo4(() => {
+    const set = /* @__PURE__ */ new Set();
+    servicesList.forEach((service) => {
+      if (service.category) {
+        set.add(service.category);
+      }
+    });
+    return Array.from(set).sort();
+  }, [servicesList]);
+  const filteredServices = useMemo4(() => {
+    const search = serviceSearch.trim().toLowerCase();
+    return servicesList.filter((service) => {
+      const matchesSearch = !search || service.name.toLowerCase().includes(search) || (service.description || "").toLowerCase().includes(search) || (service.category || "").toLowerCase().includes(search);
+      const matchesCategory = categoryFilter === "all" ? true : service.category === categoryFilter;
+      return matchesSearch && matchesCategory;
+    });
+  }, [servicesList, serviceSearch, categoryFilter]);
+  useEffect(() => {
+    setServicePage(1);
+  }, [serviceSearch, categoryFilter]);
+  const pagedServices = useMemo4(() => {
+    const pageSize = Math.max(1, servicePageSize);
+    return filteredServices.slice(0, pageSize * servicePage);
+  }, [filteredServices, servicePage, servicePageSize]);
+  const hasMoreServices = filteredServices.length > pagedServices.length;
+  const shouldPaginate = showServicePagination ?? hasMoreServices;
+  const staffOptions = useMemo4(() => {
     if (!selectedService) return [];
     if (selectedService.assignedStaff && selectedService.assignedStaff.length > 0) {
-      return selectedService.assignedStaff;
+      const assigned = selectedService.assignedStaff;
+      return teamFilter ? assigned.filter(teamFilter) : assigned;
     }
-    return teamData?.team || [];
-  }, [selectedService, teamData]);
+    const teamList = teamData?.team || [];
+    return teamFilter ? teamList.filter(teamFilter) : teamList;
+  }, [selectedService, teamData, teamFilter]);
   const availability = useAvailability({
     serviceId: selectedService?.id || "",
     staffId: selectedStaff?.id,
     days: 7,
     enabled: Boolean(selectedService)
   });
+  const timeZone = availability.data?.timeZone || "America/Chicago";
+  const safeTimeZone = useMemo4(() => {
+    if (!timeZone) return void 0;
+    try {
+      new Intl.DateTimeFormat("en-US", { timeZone }).format(/* @__PURE__ */ new Date());
+      return timeZone;
+    } catch {
+      return void 0;
+    }
+  }, [timeZone]);
+  const timeZoneLabel = useMemo4(() => {
+    if (timeZone) return timeZone;
+    try {
+      return Intl.DateTimeFormat().resolvedOptions().timeZone;
+    } catch {
+      return "Local time";
+    }
+  }, [timeZone]);
+  const dateLabelFormatter = useMemo4(
+    () => new Intl.DateTimeFormat("en-US", {
+      weekday: "short",
+      month: "short",
+      day: "numeric"
+    }),
+    []
+  );
+  const dateHeadingFormatter = useMemo4(
+    () => new Intl.DateTimeFormat("en-US", {
+      weekday: "long",
+      month: "long",
+      day: "numeric"
+    }),
+    []
+  );
+  const timeFormatter = useMemo4(
+    () => new Intl.DateTimeFormat("en-US", {
+      timeZone: safeTimeZone,
+      hour: "numeric",
+      minute: "2-digit"
+    }),
+    [safeTimeZone]
+  );
   const requiresStaff = showStaffSelection || selectedService?.requiresStaffSelection || selectedService?.schedulingType === "customer-choice";
+  const canSkipStaff = !selectedService?.requiresStaffSelection;
+  const totalSteps = requiresStaff ? 4 : 3;
+  const stepNumber = (() => {
+    if (step === "service") return 1;
+    if (step === "staff") return 2;
+    if (step === "time") return requiresStaff ? 3 : 2;
+    if (step === "details") return requiresStaff ? 4 : 3;
+    return totalSteps;
+  })();
+  const scrollToTop = useCallback(() => {
+    if (!scrollToStep || !widgetRef.current) return;
+    const top = widgetRef.current.getBoundingClientRect().top + window.scrollY;
+    window.scrollTo({
+      top: Math.max(0, top - scrollOffset),
+      behavior: "smooth"
+    });
+  }, [scrollToStep, scrollOffset]);
+  const resetSelections = () => {
+    setSelectedStaff(null);
+    setSelectedDate(null);
+    setSelectedTime(null);
+    setSelectedEndTime(null);
+    setBookingError(null);
+  };
+  useEffect(() => {
+    if (step !== "time") return;
+    if (!availability.data?.dates?.length) return;
+    if (selectedDate) return;
+    setSelectedDate(availability.data.dates[0].date);
+  }, [step, availability.data, selectedDate]);
+  const parseDateOnly = (value) => {
+    if (!value) return null;
+    const normalized = value.includes("T") ? value.split("T")[0] : value;
+    const parsed = /* @__PURE__ */ new Date(`${normalized}T00:00:00`);
+    return Number.isNaN(parsed.getTime()) ? null : parsed;
+  };
+  const parseDateTime = (value, fallbackDate) => {
+    if (!value) return null;
+    const direct = new Date(value);
+    if (!Number.isNaN(direct.getTime())) return direct;
+    if (fallbackDate) {
+      const normalized = fallbackDate.includes("T") ? fallbackDate.split("T")[0] : fallbackDate;
+      const combined = /* @__PURE__ */ new Date(`${normalized}T${value}`);
+      if (!Number.isNaN(combined.getTime())) return combined;
+    }
+    return null;
+  };
+  const formatDateLabel = (date) => {
+    const parsed = parseDateOnly(date);
+    if (!parsed) return date;
+    try {
+      return dateLabelFormatter.format(parsed);
+    } catch {
+      return date;
+    }
+  };
+  const formatDateHeading = (date) => {
+    const parsed = parseDateOnly(date);
+    if (!parsed) return date;
+    try {
+      return dateHeadingFormatter.format(parsed);
+    } catch {
+      return date;
+    }
+  };
+  const formatTimeLabel = (iso) => {
+    const parsed = parseDateTime(iso, selectedDate);
+    if (!parsed) return iso;
+    try {
+      return timeFormatter.format(parsed);
+    } catch {
+      return parsed.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" });
+    }
+  };
+  const formatDuration = (minutes) => {
+    if (!Number.isFinite(minutes)) return "";
+    if (minutes < 60) return `${minutes} min`;
+    const hours = Math.floor(minutes / 60);
+    const remaining = minutes % 60;
+    return remaining === 0 ? `${hours} hr${hours > 1 ? "s" : ""}` : `${hours} hr ${remaining} min`;
+  };
+  const handleBack = () => {
+    if (step === "service") return;
+    if (step === "staff") {
+      setStep("service");
+    } else if (step === "time") {
+      if (requiresStaff) {
+        setStep("staff");
+      } else {
+        setStep("service");
+      }
+    } else if (step === "details") {
+      setStep("time");
+    } else if (step === "done") {
+      setStep("details");
+    }
+    setBookingError(null);
+    scrollToTop();
+  };
+  const handleServiceContinue = () => {
+    if (!selectedService) return;
+    if (requiresStaff) {
+      setStep("staff");
+    } else {
+      setStep("time");
+    }
+    scrollToTop();
+  };
+  const handleStaffContinue = () => {
+    if (!canSkipStaff && !selectedStaff) return;
+    setStep("time");
+    scrollToTop();
+  };
+  const handleTimeContinue = () => {
+    if (!selectedTime || !selectedEndTime) return;
+    setStep("details");
+    scrollToTop();
+  };
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!selectedService || !selectedDate || !selectedTime || !selectedEndTime) return;
-    const start = /* @__PURE__ */ new Date(`${selectedDate}T${selectedTime}:00`);
-    const end = /* @__PURE__ */ new Date(`${selectedDate}T${selectedEndTime}:00`);
-    const result = await createBooking.mutateAsync({
-      serviceId: selectedService.id,
-      staffId: selectedStaff?.id,
-      startTime: start.toISOString(),
-      endTime: end.toISOString(),
-      customerName: details.name,
-      customerEmail: details.email,
-      customerPhone: details.phone || void 0,
-      customerNotes: details.notes || void 0
-    });
-    setStep("done");
-    onSuccess?.(result?.booking);
+    const start = parseDateTime(selectedTime, selectedDate);
+    const end = parseDateTime(selectedEndTime, selectedDate);
+    if (!start || !end) {
+      setBookingError("Please select a valid time slot.");
+      return;
+    }
+    try {
+      setBookingError(null);
+      const result = await createBooking.mutateAsync({
+        serviceId: selectedService.id,
+        staffId: selectedStaff?.id,
+        startTime: start.toISOString(),
+        endTime: end.toISOString(),
+        customerName: details.name,
+        customerEmail: details.email,
+        customerPhone: details.phone || void 0,
+        customerNotes: details.notes || void 0
+      });
+      setStep("done");
+      onSuccess?.(result?.booking);
+      scrollToTop();
+    } catch (error) {
+      setBookingError(
+        error instanceof Error ? error.message : "Unable to complete booking. Please try again."
+      );
+    }
   };
-  if (servicesLoading) {
+  const isServicesLoading = services ? false : servicesLoading;
+  if (isServicesLoading) {
     return /* @__PURE__ */ jsx7("div", { className: "idk-state", children: "Loading booking options..." });
   }
-  if (!servicesData?.services?.length) {
+  if (!servicesList.length) {
     return /* @__PURE__ */ jsx7("div", { className: "idk-state", children: "No services available." });
   }
-  return /* @__PURE__ */ jsxs4("div", { className: ["idk-booking", className].filter(Boolean).join(" "), children: [
-    step === "service" && /* @__PURE__ */ jsxs4("div", { className: "idk-booking__step", children: [
-      /* @__PURE__ */ jsx7("h3", { children: "Select a service" }),
-      /* @__PURE__ */ jsx7("div", { className: "idk-services idk-services--list", children: servicesData.services.map((service) => /* @__PURE__ */ jsxs4(
-        "button",
-        {
-          type: "button",
-          className: "idk-card idk-card--clickable",
-          onClick: () => {
-            setSelectedService(service);
-            if (requiresStaff) {
-              setStep("staff");
-            } else {
-              setStep("time");
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      ref: widgetRef,
+      className: ["idk-booking", className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsxs4("div", { className: "idk-booking__header", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "idk-booking__title-wrap", children: [
+            /* @__PURE__ */ jsx7("h3", { className: "idk-booking__title", children: title }),
+            subtitle ? /* @__PURE__ */ jsx7("p", { className: "idk-booking__subtitle", children: subtitle }) : null
+          ] }),
+          step !== "service" && step !== "done" ? /* @__PURE__ */ jsx7("button", { type: "button", className: "idk-link", onClick: handleBack, children: "Back" }) : null
+        ] }),
+        step !== "done" ? /* @__PURE__ */ jsxs4("div", { className: "idk-booking__progress", children: [
+          /* @__PURE__ */ jsxs4("span", { children: [
+            "Step ",
+            stepNumber,
+            " of ",
+            totalSteps
+          ] }),
+          /* @__PURE__ */ jsx7("div", { className: "idk-booking__bar", children: /* @__PURE__ */ jsx7(
+            "div",
+            {
+              className: "idk-booking__bar-fill",
+              style: { width: `${stepNumber / totalSteps * 100}%` }
             }
-          },
-          children: [
-            /* @__PURE__ */ jsxs4("div", { className: "idk-card__header", children: [
-              /* @__PURE__ */ jsx7("span", { className: "idk-card__title", children: service.name }),
-              typeof service.price === "number" && service.price > 0 ? /* @__PURE__ */ jsxs4("span", { className: "idk-card__price", children: [
-                "$",
-                (service.price / 100).toFixed(2)
-              ] }) : null
-            ] }),
-            /* @__PURE__ */ jsxs4("div", { className: "idk-card__meta", children: [
-              service.duration,
-              " min"
+          ) })
+        ] }) : null,
+        step === "service" && /* @__PURE__ */ jsxs4("div", { className: "idk-booking__step", children: [
+          /* @__PURE__ */ jsx7("h4", { children: "Select a service" }),
+          enableServiceSearch || enableCategoryFilter ? /* @__PURE__ */ jsxs4("div", { className: "idk-booking__filters", children: [
+            enableServiceSearch ? /* @__PURE__ */ jsx7(
+              "input",
+              {
+                type: "search",
+                value: serviceSearch,
+                onChange: (event) => setServiceSearch(event.target.value),
+                placeholder: serviceSearchPlaceholder
+              }
+            ) : null,
+            enableCategoryFilter && categories.length > 0 ? /* @__PURE__ */ jsxs4(
+              "select",
+              {
+                value: categoryFilter,
+                onChange: (event) => setCategoryFilter(event.target.value),
+                children: [
+                  /* @__PURE__ */ jsx7("option", { value: "all", children: categoryLabel }),
+                  categories.map((category) => /* @__PURE__ */ jsx7("option", { value: category, children: category }, category))
+                ]
+              }
+            ) : null
+          ] }) : null,
+          filteredServices.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "idk-state", children: "No services match your filters." }) : /* @__PURE__ */ jsx7(
+            "div",
+            {
+              className: [
+                "idk-services",
+                serviceLayout === "grid" ? "idk-services--grid" : "idk-services--list"
+              ].join(" "),
+              style: {
+                ...serviceLayout === "grid" ? { gridTemplateColumns: `repeat(${Math.max(1, serviceColumns)}, minmax(0, 1fr))` } : void 0,
+                ...serviceListMaxHeight ? { maxHeight: serviceListMaxHeight, overflow: "auto" } : void 0
+              },
+              children: pagedServices.map((service) => {
+                const isSelected = selectedService?.id === service.id;
+                return /* @__PURE__ */ jsxs4(
+                  "button",
+                  {
+                    type: "button",
+                    className: ["idk-card", "idk-card--clickable", isSelected ? "is-active" : ""].join(" "),
+                    onClick: () => {
+                      setSelectedService(service);
+                      resetSelections();
+                      if (autoAdvanceOnSelect) {
+                        if (requiresStaff) {
+                          setStep("staff");
+                        } else {
+                          setStep("time");
+                        }
+                        scrollToTop();
+                      }
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs4("div", { className: "idk-card__header", children: [
+                        /* @__PURE__ */ jsx7("span", { className: "idk-card__title", children: service.name }),
+                        /* @__PURE__ */ jsxs4("span", { className: "idk-card__aside", children: [
+                          isSelected ? /* @__PURE__ */ jsx7("span", { className: "idk-card__check", children: "\u2713" }) : null,
+                          typeof service.price === "number" && service.price > 0 ? /* @__PURE__ */ jsxs4("span", { className: "idk-card__price", children: [
+                            "$",
+                            (service.price / 100).toFixed(2)
+                          ] }) : null
+                        ] })
+                      ] }),
+                      service.description ? /* @__PURE__ */ jsx7("div", { className: "idk-card__description", children: service.description }) : null,
+                      /* @__PURE__ */ jsxs4("div", { className: "idk-card__meta", children: [
+                        /* @__PURE__ */ jsx7("span", { children: formatDuration(service.duration) }),
+                        service.category ? /* @__PURE__ */ jsx7("span", { className: "idk-pill", children: service.category }) : null
+                      ] })
+                    ]
+                  },
+                  service.id
+                );
+              })
+            }
+          ),
+          /* @__PURE__ */ jsxs4("div", { className: "idk-booking__actions", children: [
+            shouldPaginate ? /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                className: "idk-button idk-button--ghost",
+                onClick: () => setServicePage((prev) => prev + 1),
+                disabled: !hasMoreServices,
+                children: hasMoreServices ? "Show more services" : "All services shown"
+              }
+            ) : null,
+            selectedService && !autoAdvanceOnSelect ? /* @__PURE__ */ jsx7("button", { type: "button", className: "idk-button", onClick: handleServiceContinue, children: "Continue" }) : null
+          ] })
+        ] }),
+        step === "staff" && /* @__PURE__ */ jsxs4("div", { className: "idk-booking__step", children: [
+          /* @__PURE__ */ jsx7("h4", { children: "Select a team member" }),
+          staffOptions.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "idk-state", children: "No team members available." }) : /* @__PURE__ */ jsxs4(
+            "div",
+            {
+              className: [
+                "idk-team",
+                staffLayout === "grid" ? "idk-team--grid" : "idk-team--list"
+              ].join(" "),
+              style: staffLayout === "grid" ? { gridTemplateColumns: `repeat(${Math.max(1, staffColumns)}, minmax(0, 1fr))` } : void 0,
+              children: [
+                showAnyStaffOption && canSkipStaff ? /* @__PURE__ */ jsxs4(
+                  "button",
+                  {
+                    type: "button",
+                    className: ["idk-card", "idk-card--clickable", !selectedStaff ? "is-active" : ""].join(" "),
+                    onClick: () => {
+                      setSelectedStaff(null);
+                      setSelectedDate(null);
+                      setSelectedTime(null);
+                      setSelectedEndTime(null);
+                      if (autoAdvanceOnSelect) {
+                        setStep("time");
+                        scrollToTop();
+                      }
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs4("div", { className: "idk-card__header", children: [
+                        /* @__PURE__ */ jsx7("span", { className: "idk-card__title", children: "Any Available" }),
+                        /* @__PURE__ */ jsx7("span", { className: "idk-card__badge", children: "Recommended" })
+                      ] }),
+                      /* @__PURE__ */ jsx7("p", { className: "idk-card__description", children: "We'll match you with the first available stylist." })
+                    ]
+                  },
+                  "any-staff"
+                ) : null,
+                staffOptions.map((staff) => /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    type: "button",
+                    className: ["idk-card", "idk-card--clickable", selectedStaff?.id === staff.id ? "is-active" : ""].join(" "),
+                    onClick: () => {
+                      setSelectedStaff(staff);
+                      setSelectedDate(null);
+                      setSelectedTime(null);
+                      setSelectedEndTime(null);
+                      setBookingError(null);
+                      if (autoAdvanceOnSelect) {
+                        setStep("time");
+                        scrollToTop();
+                      }
+                    },
+                    children: /* @__PURE__ */ jsxs4("div", { className: "idk-team__card", children: [
+                      /* @__PURE__ */ jsx7("div", { className: "idk-team__avatar", children: staff.photo?.url ? /* @__PURE__ */ jsx7("img", { src: staff.photo.url, alt: staff.name }) : /* @__PURE__ */ jsx7("span", { children: staff.name.split(" ").map((part) => part[0]).slice(0, 2).join("").toUpperCase() }) }),
+                      /* @__PURE__ */ jsxs4("div", { children: [
+                        /* @__PURE__ */ jsx7("span", { className: "idk-card__title", children: staff.name }),
+                        /* @__PURE__ */ jsx7("span", { className: "idk-card__meta", children: staff.role || "Staff" }),
+                        staff.bio ? /* @__PURE__ */ jsx7("p", { className: "idk-card__description", children: staff.bio }) : null
+                      ] })
+                    ] })
+                  },
+                  staff.id
+                ))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs4("div", { className: "idk-booking__actions", children: [
+            canSkipStaff ? /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                className: "idk-link",
+                onClick: () => {
+                  setSelectedStaff(null);
+                  setStep("time");
+                  scrollToTop();
+                },
+                children: "Continue without selecting"
+              }
+            ) : null,
+            !autoAdvanceOnSelect ? /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                className: "idk-button",
+                onClick: handleStaffContinue,
+                disabled: !canSkipStaff && !selectedStaff,
+                children: "Continue"
+              }
+            ) : null
+          ] })
+        ] }),
+        step === "time" && /* @__PURE__ */ jsxs4("div", { className: "idk-booking__step", children: [
+          /* @__PURE__ */ jsx7("h4", { children: "Select a time" }),
+          availability.isLoading ? /* @__PURE__ */ jsx7("div", { className: "idk-state", children: "Loading availability..." }) : availability.data ? /* @__PURE__ */ jsxs4("div", { className: ["idk-availability", timeLayout === "split" ? "idk-availability--split" : ""].join(" "), children: [
+            /* @__PURE__ */ jsx7("div", { className: "idk-availability__dates", children: availability.data.dates.map((entry) => /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                className: entry.date === selectedDate ? "is-active" : void 0,
+                onClick: () => {
+                  setSelectedDate(entry.date);
+                  setSelectedTime(null);
+                  setSelectedEndTime(null);
+                  setBookingError(null);
+                },
+                children: /* @__PURE__ */ jsx7("span", { className: "idk-date-chip__day", children: formatDateLabel(entry.date) })
+              },
+              entry.date
+            )) }),
+            /* @__PURE__ */ jsxs4("div", { className: "idk-availability__panel", children: [
+              /* @__PURE__ */ jsx7("div", { className: "idk-availability__panel-header", children: /* @__PURE__ */ jsxs4("div", { children: [
+                /* @__PURE__ */ jsx7("div", { className: "idk-availability__panel-title", children: selectedDate ? formatDateHeading(selectedDate) : availability.data.dates[0]?.date ? formatDateHeading(availability.data.dates[0].date) : "Select a date" }),
+                /* @__PURE__ */ jsx7("div", { className: "idk-availability__panel-subtitle", children: timeZoneLabel })
+              ] }) }),
+              /* @__PURE__ */ jsx7("div", { className: "idk-availability__slots", children: (() => {
+                const activeEntry = availability.data.dates.find((entry) => entry.date === selectedDate) || availability.data.dates[0];
+                if (!activeEntry) return /* @__PURE__ */ jsx7("div", { className: "idk-state", children: "Select a date to see times." });
+                const slots = (activeEntry.slots || []).filter((slot) => slot.available);
+                if (slots.length === 0) {
+                  return /* @__PURE__ */ jsx7("div", { className: "idk-state", children: "No available times for this date." });
+                }
+                return slots.map((slot) => /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    type: "button",
+                    className: slot.time === selectedTime ? "is-active" : void 0,
+                    onClick: () => {
+                      const date = selectedDate || activeEntry.date;
+                      setSelectedDate(date || null);
+                      setSelectedTime(slot.time);
+                      setSelectedEndTime(slot.endTime);
+                      setBookingError(null);
+                      if (autoAdvanceOnSelect) {
+                        setStep("details");
+                        scrollToTop();
+                      }
+                    },
+                    children: formatTimeLabel(slot.time)
+                  },
+                  `${slot.time}-${slot.endTime}`
+                ));
+              })() })
             ] })
-          ]
-        },
-        service.id
-      )) })
-    ] }),
-    step === "staff" && /* @__PURE__ */ jsxs4("div", { className: "idk-booking__step", children: [
-      /* @__PURE__ */ jsx7("h3", { children: "Select a team member" }),
-      /* @__PURE__ */ jsx7("div", { className: "idk-team", children: staffOptions.map((staff) => /* @__PURE__ */ jsxs4(
-        "button",
-        {
-          type: "button",
-          className: "idk-card idk-card--clickable",
-          onClick: () => {
-            setSelectedStaff(staff);
-            setStep("time");
-          },
-          children: [
-            /* @__PURE__ */ jsx7("span", { className: "idk-card__title", children: staff.name }),
-            /* @__PURE__ */ jsx7("span", { className: "idk-card__meta", children: staff.role || "Staff" })
-          ]
-        },
-        staff.id
-      )) }),
-      /* @__PURE__ */ jsx7(
-        "button",
-        {
-          type: "button",
-          className: "idk-link",
-          onClick: () => {
-            setSelectedStaff(null);
-            setStep("time");
-          },
-          children: "Continue without selecting"
-        }
-      )
-    ] }),
-    step === "time" && /* @__PURE__ */ jsxs4("div", { className: "idk-booking__step", children: [
-      /* @__PURE__ */ jsx7("h3", { children: "Select a time" }),
-      availability.isLoading ? /* @__PURE__ */ jsx7("div", { className: "idk-state", children: "Loading availability..." }) : availability.data ? /* @__PURE__ */ jsxs4("div", { className: "idk-availability", children: [
-        /* @__PURE__ */ jsx7("div", { className: "idk-availability__dates", children: availability.data.dates.map((entry) => /* @__PURE__ */ jsx7(
-          "button",
-          {
-            type: "button",
-            className: entry.date === selectedDate ? "is-active" : void 0,
-            onClick: () => {
-              setSelectedDate(entry.date);
-              setSelectedTime(null);
-              setSelectedEndTime(null);
-            },
-            children: entry.date
-          },
-          entry.date
-        )) }),
-        /* @__PURE__ */ jsx7("div", { className: "idk-availability__slots", children: (availability.data.dates.find((entry) => entry.date === selectedDate)?.slots || availability.data.dates[0]?.slots || []).filter((slot) => slot.available).map((slot) => /* @__PURE__ */ jsx7(
-          "button",
-          {
-            type: "button",
-            className: slot.time === selectedTime ? "is-active" : void 0,
-            onClick: () => {
-              const date = selectedDate || availability.data?.dates[0]?.date;
-              setSelectedDate(date || null);
-              setSelectedTime(slot.time);
-              setSelectedEndTime(slot.endTime);
-              setStep("details");
-            },
-            children: slot.time
-          },
-          `${slot.time}-${slot.endTime}`
-        )) })
-      ] }) : /* @__PURE__ */ jsx7("div", { className: "idk-state", children: "No availability found." })
-    ] }),
-    step === "details" && /* @__PURE__ */ jsxs4("form", { className: "idk-form", onSubmit: handleSubmit, children: [
-      /* @__PURE__ */ jsx7("h3", { children: "Your details" }),
-      /* @__PURE__ */ jsxs4("label", { className: "idk-form__field", children: [
-        /* @__PURE__ */ jsx7("span", { children: "Name" }),
-        /* @__PURE__ */ jsx7(
-          "input",
-          {
-            value: details.name,
-            onChange: (event) => setDetails((prev) => ({ ...prev, name: event.target.value })),
-            required: true
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs4("label", { className: "idk-form__field", children: [
-        /* @__PURE__ */ jsx7("span", { children: "Email" }),
-        /* @__PURE__ */ jsx7(
-          "input",
-          {
-            type: "email",
-            value: details.email,
-            onChange: (event) => setDetails((prev) => ({ ...prev, email: event.target.value })),
-            required: true
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs4("label", { className: "idk-form__field", children: [
-        /* @__PURE__ */ jsx7("span", { children: "Phone" }),
-        /* @__PURE__ */ jsx7(
-          "input",
-          {
-            value: details.phone,
-            onChange: (event) => setDetails((prev) => ({ ...prev, phone: event.target.value }))
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs4("label", { className: "idk-form__field", children: [
-        /* @__PURE__ */ jsx7("span", { children: "Notes" }),
-        /* @__PURE__ */ jsx7(
-          "textarea",
-          {
-            rows: 4,
-            value: details.notes,
-            onChange: (event) => setDetails((prev) => ({ ...prev, notes: event.target.value }))
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx7("button", { type: "submit", className: "idk-button", disabled: createBooking.isPending, children: createBooking.isPending ? "Booking..." : "Confirm booking" })
-    ] }),
-    step === "done" && /* @__PURE__ */ jsx7("div", { className: "idk-state", children: "Booking confirmed. You'll receive a confirmation email shortly." })
-  ] });
+          ] }) : /* @__PURE__ */ jsx7("div", { className: "idk-state", children: "No availability found." }),
+          !autoAdvanceOnSelect ? /* @__PURE__ */ jsx7("div", { className: "idk-booking__actions", children: /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "button",
+              className: "idk-button",
+              onClick: handleTimeContinue,
+              disabled: !selectedTime || !selectedEndTime,
+              children: "Continue"
+            }
+          ) }) : null
+        ] }),
+        step === "details" && /* @__PURE__ */ jsxs4("form", { className: "idk-form", onSubmit: handleSubmit, children: [
+          /* @__PURE__ */ jsx7("h4", { children: "Your details" }),
+          bookingError ? /* @__PURE__ */ jsx7("div", { className: "idk-booking__error", children: bookingError }) : null,
+          selectedService && selectedTime ? /* @__PURE__ */ jsxs4("div", { className: "idk-booking__summary", children: [
+            /* @__PURE__ */ jsxs4("div", { children: [
+              /* @__PURE__ */ jsx7("span", { className: "idk-booking__summary-label", children: "Service" }),
+              /* @__PURE__ */ jsx7("p", { children: selectedService.name })
+            ] }),
+            selectedStaff ? /* @__PURE__ */ jsxs4("div", { children: [
+              /* @__PURE__ */ jsx7("span", { className: "idk-booking__summary-label", children: "Staff" }),
+              /* @__PURE__ */ jsx7("p", { children: selectedStaff.name })
+            ] }) : null,
+            /* @__PURE__ */ jsxs4("div", { children: [
+              /* @__PURE__ */ jsx7("span", { className: "idk-booking__summary-label", children: "When" }),
+              /* @__PURE__ */ jsxs4("p", { children: [
+                formatDateHeading(selectedDate || ""),
+                " \xB7 ",
+                formatTimeLabel(selectedTime)
+              ] })
+            ] }),
+            selectedService.price ? /* @__PURE__ */ jsxs4("div", { children: [
+              /* @__PURE__ */ jsx7("span", { className: "idk-booking__summary-label", children: "Price" }),
+              /* @__PURE__ */ jsxs4("p", { children: [
+                "$",
+                (selectedService.price / 100).toFixed(2)
+              ] })
+            ] }) : null
+          ] }) : null,
+          /* @__PURE__ */ jsxs4("label", { className: "idk-form__field", children: [
+            /* @__PURE__ */ jsx7("span", { children: "Name" }),
+            /* @__PURE__ */ jsx7(
+              "input",
+              {
+                value: details.name,
+                onChange: (event) => setDetails((prev) => ({ ...prev, name: event.target.value })),
+                required: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs4("label", { className: "idk-form__field", children: [
+            /* @__PURE__ */ jsx7("span", { children: "Email" }),
+            /* @__PURE__ */ jsx7(
+              "input",
+              {
+                type: "email",
+                value: details.email,
+                onChange: (event) => setDetails((prev) => ({ ...prev, email: event.target.value })),
+                required: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs4("label", { className: "idk-form__field", children: [
+            /* @__PURE__ */ jsx7("span", { children: "Phone" }),
+            /* @__PURE__ */ jsx7(
+              "input",
+              {
+                value: details.phone,
+                onChange: (event) => setDetails((prev) => ({ ...prev, phone: event.target.value }))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs4("label", { className: "idk-form__field", children: [
+            /* @__PURE__ */ jsx7("span", { children: "Notes" }),
+            /* @__PURE__ */ jsx7(
+              "textarea",
+              {
+                rows: 4,
+                value: details.notes,
+                onChange: (event) => setDetails((prev) => ({ ...prev, notes: event.target.value }))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx7("button", { type: "submit", className: "idk-button", disabled: createBooking.isPending, children: createBooking.isPending ? "Booking..." : "Confirm booking" })
+        ] }),
+        step === "done" && /* @__PURE__ */ jsxs4("div", { className: "idk-booking__done", children: [
+          /* @__PURE__ */ jsx7("div", { className: "idk-booking__done-title", children: "Booking confirmed!" }),
+          /* @__PURE__ */ jsx7("p", { className: "idk-booking__done-text", children: "We'll send a confirmation email shortly with your appointment details." }),
+          /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "button",
+              className: "idk-link",
+              onClick: () => {
+                setStep("service");
+                setSelectedService(null);
+                resetSelections();
+                setDetails({ name: "", email: "", phone: "", notes: "" });
+                scrollToTop();
+              },
+              children: "Book another appointment"
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 
 // src/components/AvailabilityPicker.tsx