@idkwebsites/components 0.1.0

package/dist/index.cjs

@@ -0,0 +1,847 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  AvailabilityPicker: () => AvailabilityPicker,
+  BookingWidget: () => BookingWidget,
+  ContactForm: () => ContactForm,
+  DatePicker: () => DatePicker,
+  PlatformProvider: () => PlatformProvider,
+  ServiceCard: () => ServiceCard,
+  ServicePicker: () => ServicePicker,
+  ServicesList: () => ServicesList,
+  StaffPicker: () => StaffPicker,
+  TeamGrid: () => TeamGrid,
+  TeamMember: () => TeamMember,
+  TimePicker: () => TimePicker,
+  useAvailability: () => useAvailability,
+  useBookingLookup: () => useBookingLookup,
+  useCancelBooking: () => useCancelBooking,
+  useCreateBooking: () => useCreateBooking,
+  useServices: () => useServices,
+  useTeam: () => useTeam,
+  useTenant: () => useTenant
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/core/PlatformProvider.tsx
+var import_react2 = require("react");
+var import_react_query = require("@tanstack/react-query");
+
+// src/core/context.ts
+var import_react = require("react");
+var PlatformContext = (0, import_react.createContext)(null);
+function usePlatformConfig() {
+  const context = (0, import_react.useContext)(PlatformContext);
+  if (!context) {
+    throw new Error("PlatformProvider is missing in the component tree.");
+  }
+  return context;
+}
+
+// src/core/PlatformProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_API_URL = process.env.NEXT_PUBLIC_IDK_API_URL || process.env.NEXT_PUBLIC_PLATFORM_API_URL || "https://app.idkwebsites.com/api/v1";
+function PlatformProvider({
+  apiKey,
+  apiUrl = DEFAULT_API_URL,
+  children,
+  dehydratedState,
+  queryOptions,
+  queryClient
+}) {
+  const [client] = (0, import_react2.useState)(
+    () => queryClient || new import_react_query.QueryClient({
+      defaultOptions: {
+        queries: {
+          staleTime: 3e4,
+          retry: 1,
+          ...queryOptions?.queries
+        },
+        mutations: {
+          ...queryOptions?.mutations
+        }
+      }
+    })
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlatformContext.Provider, { value: { apiKey, apiUrl }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_query.QueryClientProvider, { client, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_query.HydrationBoundary, { state: dehydratedState, children }) }) });
+}
+
+// src/core/hooks/useTenant.ts
+var import_react_query2 = require("@tanstack/react-query");
+
+// src/core/api-client.ts
+var ApiError = class extends Error {
+  status;
+  code;
+  constructor(message, status, code) {
+    super(message);
+    this.name = "ApiError";
+    this.status = status;
+    this.code = code;
+  }
+};
+function normalizeBaseUrl(apiUrl) {
+  return apiUrl.replace(/\/+$/, "");
+}
+async function apiRequest(config, path, options = {}) {
+  const url = `${normalizeBaseUrl(config.apiUrl)}${path.startsWith("/") ? path : `/${path}`}`;
+  const headers = new Headers(options.headers);
+  headers.set("X-API-Key", config.apiKey);
+  if (!headers.has("Content-Type") && options.body) {
+    headers.set("Content-Type", "application/json");
+  }
+  const response = await fetch(url, {
+    ...options,
+    headers
+  });
+  const payload = await response.json().catch(() => null);
+  if (!response.ok) {
+    const errorCode = payload?.error?.code || "REQUEST_FAILED";
+    const errorMessage = payload?.error?.message || response.statusText;
+    throw new ApiError(errorMessage, response.status, errorCode);
+  }
+  if (payload?.error) {
+    throw new ApiError(payload.error.message || "Request failed", payload.error.status || 400, payload.error.code || "REQUEST_FAILED");
+  }
+  return payload?.data;
+}
+
+// src/core/hooks/useTenant.ts
+function useTenant() {
+  const config = usePlatformConfig();
+  return (0, import_react_query2.useQuery)({
+    queryKey: ["idk", "tenant"],
+    queryFn: () => apiRequest(config, "/tenant")
+  });
+}
+
+// src/core/hooks/useServices.ts
+var import_react_query3 = require("@tanstack/react-query");
+function useServices() {
+  const config = usePlatformConfig();
+  return (0, import_react_query3.useQuery)({
+    queryKey: ["idk", "services"],
+    queryFn: () => apiRequest(config, "/services")
+  });
+}
+
+// src/core/hooks/useTeam.ts
+var import_react_query4 = require("@tanstack/react-query");
+function useTeam() {
+  const config = usePlatformConfig();
+  return (0, import_react_query4.useQuery)({
+    queryKey: ["idk", "team"],
+    queryFn: () => apiRequest(config, "/team")
+  });
+}
+
+// src/core/hooks/useAvailability.ts
+var import_react3 = require("react");
+var import_react_query5 = require("@tanstack/react-query");
+function buildQuery(params) {
+  const searchParams = new URLSearchParams();
+  searchParams.set("serviceId", params.serviceId);
+  if (params.staffId) searchParams.set("staffId", params.staffId);
+  if (params.startDate) searchParams.set("startDate", params.startDate);
+  if (params.endDate) searchParams.set("endDate", params.endDate);
+  if (params.date) searchParams.set("date", params.date);
+  if (params.days) searchParams.set("days", String(params.days));
+  return searchParams.toString();
+}
+function useAvailability(params) {
+  const config = usePlatformConfig();
+  const queryString = (0, import_react3.useMemo)(
+    () => buildQuery(params),
+    [params.serviceId, params.staffId, params.startDate, params.endDate, params.date, params.days]
+  );
+  const enabled = params.enabled ?? Boolean(params.serviceId);
+  return (0, import_react_query5.useQuery)({
+    queryKey: ["idk", "availability", queryString],
+    queryFn: () => apiRequest(config, `/availability?${queryString}`),
+    enabled
+  });
+}
+
+// src/core/hooks/useBooking.ts
+var import_react_query6 = require("@tanstack/react-query");
+function useCreateBooking() {
+  const config = usePlatformConfig();
+  return (0, import_react_query6.useMutation)({
+    mutationFn: (input) => apiRequest(config, "/bookings", {
+      method: "POST",
+      body: JSON.stringify(input)
+    })
+  });
+}
+function useCancelBooking() {
+  const config = usePlatformConfig();
+  return (0, import_react_query6.useMutation)({
+    mutationFn: (input) => apiRequest(config, `/bookings/${input.uid}/cancel`, {
+      method: "POST",
+      body: JSON.stringify({
+        reason: input.reason,
+        cancelledBy: input.cancelledBy || "customer"
+      })
+    })
+  });
+}
+function useBookingLookup(uid, enabled = true) {
+  const config = usePlatformConfig();
+  return (0, import_react_query6.useQuery)({
+    queryKey: ["idk", "booking", uid],
+    queryFn: () => apiRequest(config, `/bookings/${uid}`),
+    enabled: Boolean(uid) && enabled
+  });
+}
+
+// src/components/ServiceCard.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ServiceCard({
+  service,
+  className,
+  showDescription = true,
+  showPrice = true,
+  onSelect
+}) {
+  const handleClick = () => {
+    if (onSelect) onSelect(service);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className: ["idk-card", onSelect ? "idk-card--clickable" : "", className].filter(Boolean).join(" "),
+      onClick: onSelect ? handleClick : void 0,
+      role: onSelect ? "button" : void 0,
+      tabIndex: onSelect ? 0 : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "idk-card__header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "idk-card__title", children: service.name }),
+          showPrice && typeof service.price === "number" && service.price > 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "idk-card__price", children: [
+            "$",
+            (service.price / 100).toFixed(2)
+          ] }) : null
+        ] }),
+        showDescription && service.description ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "idk-card__description", children: service.description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "idk-card__meta", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+            service.duration,
+            " min"
+          ] }),
+          service.category ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: service.category }) : null
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/ServicesList.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function ServicesList({
+  layout = "grid",
+  columns = 3,
+  className,
+  showDescription,
+  showPrice,
+  onSelect
+}) {
+  const { data, isLoading, error } = useServices();
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "idk-state", children: "Loading services..." });
+  }
+  if (error || !data?.services?.length) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "idk-state", children: "No services available." });
+  }
+  const gridStyle = layout === "grid" ? { gridTemplateColumns: `repeat(${Math.max(1, columns)}, minmax(0, 1fr))` } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      className: [
+        "idk-services",
+        layout === "grid" ? "idk-services--grid" : "idk-services--list",
+        className
+      ].filter(Boolean).join(" "),
+      style: gridStyle,
+      children: data.services.map((service) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        ServiceCard,
+        {
+          service,
+          showDescription,
+          showPrice,
+          onSelect
+        },
+        service.id
+      ))
+    }
+  );
+}
+
+// src/components/TeamMember.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function TeamMember({
+  member,
+  className,
+  showRole = true,
+  showEmail = false
+}) {
+  const initials = member.name?.split(" ").map((part) => part[0]).slice(0, 2).join("").toUpperCase();
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: ["idk-card", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "idk-team__avatar", children: member.photo?.url ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { src: member.photo.url, alt: member.name }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: initials }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "idk-team__info", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { className: "idk-card__title", children: member.name }),
+      showRole ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "idk-card__description", children: member.role || "Staff" }) : null,
+      showEmail ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "idk-card__meta", children: member.email }) : null
+    ] })
+  ] });
+}
+
+// src/components/TeamGrid.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function TeamGrid({
+  columns = 3,
+  className,
+  showRole,
+  showEmail
+}) {
+  const { data, isLoading, error } = useTeam();
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "idk-state", children: "Loading team..." });
+  }
+  if (error || !data?.team?.length) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "idk-state", children: "No team members available." });
+  }
+  const gridStyle = { gridTemplateColumns: `repeat(${Math.max(1, columns)}, minmax(0, 1fr))` };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      className: ["idk-team", className].filter(Boolean).join(" "),
+      style: gridStyle,
+      children: data.team.map((member) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        TeamMember,
+        {
+          member,
+          showRole,
+          showEmail
+        },
+        member.id
+      ))
+    }
+  );
+}
+
+// src/components/ContactForm.tsx
+var import_react4 = require("react");
+var import_react_query7 = require("@tanstack/react-query");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var DEFAULT_FIELDS = ["name", "email", "phone", "message"];
+function ContactForm({
+  fields = DEFAULT_FIELDS,
+  formType = "contact",
+  submitLabel = "Send Message",
+  className,
+  onSuccess,
+  onError
+}) {
+  const config = usePlatformConfig();
+  const [formState, setFormState] = (0, import_react4.useState)({
+    name: "",
+    email: "",
+    phone: "",
+    subject: "",
+    message: ""
+  });
+  const mutation = (0, import_react_query7.useMutation)({
+    mutationFn: (payload) => apiRequest(config, "/contact", {
+      method: "POST",
+      body: JSON.stringify(payload)
+    }),
+    onSuccess: () => {
+      setFormState({ name: "", email: "", phone: "", subject: "", message: "" });
+      onSuccess?.();
+    },
+    onError: (error) => {
+      const message = error instanceof Error ? error.message : "Failed to submit form";
+      onError?.(message);
+    }
+  });
+  const handleChange = (field, value) => {
+    setFormState((prev) => ({ ...prev, [field]: value }));
+  };
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    mutation.mutate({
+      name: formState.name,
+      email: formState.email,
+      phone: formState.phone || void 0,
+      subject: formState.subject || void 0,
+      message: formState.message,
+      formType
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("form", { className: ["idk-form", className].filter(Boolean).join(" "), onSubmit: handleSubmit, children: [
+    fields.includes("name") && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "idk-form__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "input",
+        {
+          value: formState.name,
+          onChange: (event) => handleChange("name", event.target.value),
+          required: true
+        }
+      )
+    ] }),
+    fields.includes("email") && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "idk-form__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Email" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "input",
+        {
+          type: "email",
+          value: formState.email,
+          onChange: (event) => handleChange("email", event.target.value),
+          required: true
+        }
+      )
+    ] }),
+    fields.includes("phone") && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "idk-form__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Phone" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "input",
+        {
+          value: formState.phone,
+          onChange: (event) => handleChange("phone", event.target.value)
+        }
+      )
+    ] }),
+    fields.includes("subject") && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "idk-form__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Subject" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "input",
+        {
+          value: formState.subject,
+          onChange: (event) => handleChange("subject", event.target.value)
+        }
+      )
+    ] }),
+    fields.includes("message") && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "idk-form__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Message" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "textarea",
+        {
+          value: formState.message,
+          onChange: (event) => handleChange("message", event.target.value),
+          rows: 5,
+          required: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "submit", className: "idk-button", disabled: mutation.isPending, children: mutation.isPending ? "Sending..." : submitLabel }),
+    mutation.isError ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "idk-form__error", children: "Something went wrong. Please try again." }) : null,
+    mutation.isSuccess ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "idk-form__success", children: "Thanks! We'll be in touch soon." }) : null
+  ] });
+}
+
+// src/components/BookingWidget.tsx
+var import_react5 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function BookingWidget({
+  className,
+  showStaffSelection = true,
+  onSuccess
+}) {
+  const { data: servicesData, isLoading: servicesLoading } = useServices();
+  const { data: teamData } = useTeam();
+  const createBooking = useCreateBooking();
+  const [step, setStep] = (0, import_react5.useState)("service");
+  const [selectedService, setSelectedService] = (0, import_react5.useState)(null);
+  const [selectedStaff, setSelectedStaff] = (0, import_react5.useState)(null);
+  const [selectedDate, setSelectedDate] = (0, import_react5.useState)(null);
+  const [selectedTime, setSelectedTime] = (0, import_react5.useState)(null);
+  const [selectedEndTime, setSelectedEndTime] = (0, import_react5.useState)(null);
+  const [details, setDetails] = (0, import_react5.useState)({
+    name: "",
+    email: "",
+    phone: "",
+    notes: ""
+  });
+  const staffOptions = (0, import_react5.useMemo)(() => {
+    if (!selectedService) return [];
+    if (selectedService.assignedStaff && selectedService.assignedStaff.length > 0) {
+      return selectedService.assignedStaff;
+    }
+    return teamData?.team || [];
+  }, [selectedService, teamData]);
+  const availability = useAvailability({
+    serviceId: selectedService?.id || "",
+    staffId: selectedStaff?.id,
+    days: 7,
+    enabled: Boolean(selectedService)
+  });
+  const requiresStaff = showStaffSelection || selectedService?.requiresStaffSelection || selectedService?.schedulingType === "customer-choice";
+  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);
+  };
+  if (servicesLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "idk-state", children: "Loading booking options..." });
+  }
+  if (!servicesData?.services?.length) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "idk-state", children: "No services available." });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: ["idk-booking", className].filter(Boolean).join(" "), children: [
+    step === "service" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "idk-booking__step", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { children: "Select a service" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "idk-services idk-services--list", children: servicesData.services.map((service) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: "idk-card idk-card--clickable",
+          onClick: () => {
+            setSelectedService(service);
+            if (requiresStaff) {
+              setStep("staff");
+            } else {
+              setStep("time");
+            }
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "idk-card__header", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "idk-card__title", children: service.name }),
+              typeof service.price === "number" && service.price > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "idk-card__price", children: [
+                "$",
+                (service.price / 100).toFixed(2)
+              ] }) : null
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "idk-card__meta", children: [
+              service.duration,
+              " min"
+            ] })
+          ]
+        },
+        service.id
+      )) })
+    ] }),
+    step === "staff" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "idk-booking__step", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { children: "Select a team member" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "idk-team", children: staffOptions.map((staff) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: "idk-card idk-card--clickable",
+          onClick: () => {
+            setSelectedStaff(staff);
+            setStep("time");
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "idk-card__title", children: staff.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "idk-card__meta", children: staff.role || "Staff" })
+          ]
+        },
+        staff.id
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "idk-link",
+          onClick: () => {
+            setSelectedStaff(null);
+            setStep("time");
+          },
+          children: "Continue without selecting"
+        }
+      )
+    ] }),
+    step === "time" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "idk-booking__step", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { children: "Select a time" }),
+      availability.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "idk-state", children: "Loading availability..." }) : availability.data ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "idk-availability", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "idk-availability__dates", children: availability.data.dates.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "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__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)(
+          "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__ */ (0, import_jsx_runtime7.jsx)("div", { className: "idk-state", children: "No availability found." })
+    ] }),
+    step === "details" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("form", { className: "idk-form", onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { children: "Your details" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "idk-form__field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Name" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "input",
+          {
+            value: details.name,
+            onChange: (event) => setDetails((prev) => ({ ...prev, name: event.target.value })),
+            required: true
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "idk-form__field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Email" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "input",
+          {
+            type: "email",
+            value: details.email,
+            onChange: (event) => setDetails((prev) => ({ ...prev, email: event.target.value })),
+            required: true
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "idk-form__field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Phone" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "input",
+          {
+            value: details.phone,
+            onChange: (event) => setDetails((prev) => ({ ...prev, phone: event.target.value }))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "idk-form__field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Notes" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "textarea",
+          {
+            rows: 4,
+            value: details.notes,
+            onChange: (event) => setDetails((prev) => ({ ...prev, notes: event.target.value }))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "submit", className: "idk-button", disabled: createBooking.isPending, children: createBooking.isPending ? "Booking..." : "Confirm booking" })
+    ] }),
+    step === "done" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "idk-state", children: "Booking confirmed. You'll receive a confirmation email shortly." })
+  ] });
+}
+
+// src/components/AvailabilityPicker.tsx
+var import_react6 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function AvailabilityPicker({
+  serviceId,
+  staffId,
+  date,
+  days = 7,
+  className,
+  onSelect
+}) {
+  const [selectedDate, setSelectedDate] = (0, import_react6.useState)(date || null);
+  const [selectedTime, setSelectedTime] = (0, import_react6.useState)(null);
+  const { data, isLoading } = useAvailability({
+    serviceId,
+    staffId,
+    date,
+    days
+  });
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "Loading availability..." });
+  }
+  if (!data?.dates?.length) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "No availability found." });
+  }
+  const activeDate = selectedDate || data.dates[0]?.date;
+  const activeSlots = data.dates.find((entry) => entry.date === activeDate)?.slots || [];
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: ["idk-availability", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-availability__dates", children: data.dates.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "button",
+      {
+        type: "button",
+        className: entry.date === activeDate ? "is-active" : void 0,
+        onClick: () => {
+          setSelectedDate(entry.date);
+          setSelectedTime(null);
+        },
+        children: entry.date
+      },
+      entry.date
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-availability__slots", children: activeSlots.filter((slot) => slot.available).length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "No slots available." }) : activeSlots.filter((slot) => slot.available).map((slot) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "button",
+      {
+        type: "button",
+        className: selectedTime === slot.time ? "is-active" : void 0,
+        onClick: () => {
+          setSelectedTime(slot.time);
+          if (onSelect && activeDate) {
+            onSelect({
+              date: activeDate,
+              time: slot.time,
+              endTime: slot.endTime
+            });
+          }
+        },
+        children: slot.time
+      },
+      `${activeDate}-${slot.time}`
+    )) })
+  ] });
+}
+
+// src/components/ServicePicker.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function ServicePicker({
+  services,
+  selectedId,
+  onSelect,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: services.map((service) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "button",
+    {
+      type: "button",
+      className: selectedId === service.id ? "is-active" : void 0,
+      onClick: () => onSelect?.(service),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: service.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("small", { children: [
+          service.duration,
+          " min"
+        ] })
+      ]
+    },
+    service.id
+  )) });
+}
+
+// src/components/StaffPicker.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function StaffPicker({
+  staff,
+  selectedId,
+  onSelect,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: staff.map((member) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "button",
+    {
+      type: "button",
+      className: selectedId === member.id ? "is-active" : void 0,
+      onClick: () => onSelect?.(member),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: member.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("small", { children: member.role || "Staff" })
+      ]
+    },
+    member.id
+  )) });
+}
+
+// src/components/DatePicker.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function DatePicker({
+  dates,
+  selectedDate,
+  onSelect,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: dates.map((date) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "button",
+    {
+      type: "button",
+      className: selectedDate === date ? "is-active" : void 0,
+      onClick: () => onSelect?.(date),
+      children: date
+    },
+    date
+  )) });
+}
+
+// src/components/TimePicker.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function TimePicker({
+  slots,
+  selectedTime,
+  onSelect,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: slots.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "button",
+    {
+      type: "button",
+      className: selectedTime === slot.time ? "is-active" : void 0,
+      disabled: !slot.available,
+      onClick: () => onSelect?.(slot),
+      children: slot.time
+    },
+    `${slot.time}-${slot.endTime}`
+  )) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AvailabilityPicker,
+  BookingWidget,
+  ContactForm,
+  DatePicker,
+  PlatformProvider,
+  ServiceCard,
+  ServicePicker,
+  ServicesList,
+  StaffPicker,
+  TeamGrid,
+  TeamMember,
+  TimePicker,
+  useAvailability,
+  useBookingLookup,
+  useCancelBooking,
+  useCreateBooking,
+  useServices,
+  useTeam,
+  useTenant
+});
+//# sourceMappingURL=index.cjs.map