@idkwebsites/components 0.1.0

package/dist/index.js

@@ -0,0 +1,806 @@
+// src/core/PlatformProvider.tsx
+import { useState } from "react";
+import {
+  QueryClient,
+  QueryClientProvider,
+  HydrationBoundary
+} from "@tanstack/react-query";
+
+// src/core/context.ts
+import { createContext, useContext } from "react";
+var PlatformContext = createContext(null);
+function usePlatformConfig() {
+  const context = useContext(PlatformContext);
+  if (!context) {
+    throw new Error("PlatformProvider is missing in the component tree.");
+  }
+  return context;
+}
+
+// src/core/PlatformProvider.tsx
+import { jsx } from "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] = useState(
+    () => queryClient || new QueryClient({
+      defaultOptions: {
+        queries: {
+          staleTime: 3e4,
+          retry: 1,
+          ...queryOptions?.queries
+        },
+        mutations: {
+          ...queryOptions?.mutations
+        }
+      }
+    })
+  );
+  return /* @__PURE__ */ jsx(PlatformContext.Provider, { value: { apiKey, apiUrl }, children: /* @__PURE__ */ jsx(QueryClientProvider, { client, children: /* @__PURE__ */ jsx(HydrationBoundary, { state: dehydratedState, children }) }) });
+}
+
+// src/core/hooks/useTenant.ts
+import { useQuery } from "@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 useQuery({
+    queryKey: ["idk", "tenant"],
+    queryFn: () => apiRequest(config, "/tenant")
+  });
+}
+
+// src/core/hooks/useServices.ts
+import { useQuery as useQuery2 } from "@tanstack/react-query";
+function useServices() {
+  const config = usePlatformConfig();
+  return useQuery2({
+    queryKey: ["idk", "services"],
+    queryFn: () => apiRequest(config, "/services")
+  });
+}
+
+// src/core/hooks/useTeam.ts
+import { useQuery as useQuery3 } from "@tanstack/react-query";
+function useTeam() {
+  const config = usePlatformConfig();
+  return useQuery3({
+    queryKey: ["idk", "team"],
+    queryFn: () => apiRequest(config, "/team")
+  });
+}
+
+// src/core/hooks/useAvailability.ts
+import { useMemo } from "react";
+import { useQuery as useQuery4 } from "@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 = useMemo(
+    () => buildQuery(params),
+    [params.serviceId, params.staffId, params.startDate, params.endDate, params.date, params.days]
+  );
+  const enabled = params.enabled ?? Boolean(params.serviceId);
+  return useQuery4({
+    queryKey: ["idk", "availability", queryString],
+    queryFn: () => apiRequest(config, `/availability?${queryString}`),
+    enabled
+  });
+}
+
+// src/core/hooks/useBooking.ts
+import { useMutation, useQuery as useQuery5 } from "@tanstack/react-query";
+function useCreateBooking() {
+  const config = usePlatformConfig();
+  return useMutation({
+    mutationFn: (input) => apiRequest(config, "/bookings", {
+      method: "POST",
+      body: JSON.stringify(input)
+    })
+  });
+}
+function useCancelBooking() {
+  const config = usePlatformConfig();
+  return 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 useQuery5({
+    queryKey: ["idk", "booking", uid],
+    queryFn: () => apiRequest(config, `/bookings/${uid}`),
+    enabled: Boolean(uid) && enabled
+  });
+}
+
+// src/components/ServiceCard.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function ServiceCard({
+  service,
+  className,
+  showDescription = true,
+  showPrice = true,
+  onSelect
+}) {
+  const handleClick = () => {
+    if (onSelect) onSelect(service);
+  };
+  return /* @__PURE__ */ 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__ */ 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: [
+            "$",
+            (service.price / 100).toFixed(2)
+          ] }) : null
+        ] }),
+        showDescription && service.description ? /* @__PURE__ */ jsx2("p", { className: "idk-card__description", children: service.description }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "idk-card__meta", children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            service.duration,
+            " min"
+          ] }),
+          service.category ? /* @__PURE__ */ jsx2("span", { children: service.category }) : null
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/ServicesList.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function ServicesList({
+  layout = "grid",
+  columns = 3,
+  className,
+  showDescription,
+  showPrice,
+  onSelect
+}) {
+  const { data, isLoading, error } = useServices();
+  if (isLoading) {
+    return /* @__PURE__ */ jsx3("div", { className: "idk-state", children: "Loading services..." });
+  }
+  if (error || !data?.services?.length) {
+    return /* @__PURE__ */ jsx3("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__ */ jsx3(
+    "div",
+    {
+      className: [
+        "idk-services",
+        layout === "grid" ? "idk-services--grid" : "idk-services--list",
+        className
+      ].filter(Boolean).join(" "),
+      style: gridStyle,
+      children: data.services.map((service) => /* @__PURE__ */ jsx3(
+        ServiceCard,
+        {
+          service,
+          showDescription,
+          showPrice,
+          onSelect
+        },
+        service.id
+      ))
+    }
+  );
+}
+
+// src/components/TeamMember.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "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__ */ 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,
+      showEmail ? /* @__PURE__ */ jsx4("p", { className: "idk-card__meta", children: member.email }) : null
+    ] })
+  ] });
+}
+
+// src/components/TeamGrid.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function TeamGrid({
+  columns = 3,
+  className,
+  showRole,
+  showEmail
+}) {
+  const { data, isLoading, error } = useTeam();
+  if (isLoading) {
+    return /* @__PURE__ */ jsx5("div", { className: "idk-state", children: "Loading team..." });
+  }
+  if (error || !data?.team?.length) {
+    return /* @__PURE__ */ jsx5("div", { className: "idk-state", children: "No team members available." });
+  }
+  const gridStyle = { gridTemplateColumns: `repeat(${Math.max(1, columns)}, minmax(0, 1fr))` };
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className: ["idk-team", className].filter(Boolean).join(" "),
+      style: gridStyle,
+      children: data.team.map((member) => /* @__PURE__ */ jsx5(
+        TeamMember,
+        {
+          member,
+          showRole,
+          showEmail
+        },
+        member.id
+      ))
+    }
+  );
+}
+
+// src/components/ContactForm.tsx
+import { useState as useState2 } from "react";
+import { useMutation as useMutation2 } from "@tanstack/react-query";
+import { jsx as jsx6, jsxs as jsxs3 } from "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] = useState2({
+    name: "",
+    email: "",
+    phone: "",
+    subject: "",
+    message: ""
+  });
+  const mutation = useMutation2({
+    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__ */ jsxs3("form", { className: ["idk-form", className].filter(Boolean).join(" "), onSubmit: handleSubmit, children: [
+    fields.includes("name") && /* @__PURE__ */ jsxs3("label", { className: "idk-form__field", children: [
+      /* @__PURE__ */ jsx6("span", { children: "Name" }),
+      /* @__PURE__ */ jsx6(
+        "input",
+        {
+          value: formState.name,
+          onChange: (event) => handleChange("name", event.target.value),
+          required: true
+        }
+      )
+    ] }),
+    fields.includes("email") && /* @__PURE__ */ jsxs3("label", { className: "idk-form__field", children: [
+      /* @__PURE__ */ jsx6("span", { children: "Email" }),
+      /* @__PURE__ */ jsx6(
+        "input",
+        {
+          type: "email",
+          value: formState.email,
+          onChange: (event) => handleChange("email", event.target.value),
+          required: true
+        }
+      )
+    ] }),
+    fields.includes("phone") && /* @__PURE__ */ jsxs3("label", { className: "idk-form__field", children: [
+      /* @__PURE__ */ jsx6("span", { children: "Phone" }),
+      /* @__PURE__ */ jsx6(
+        "input",
+        {
+          value: formState.phone,
+          onChange: (event) => handleChange("phone", event.target.value)
+        }
+      )
+    ] }),
+    fields.includes("subject") && /* @__PURE__ */ jsxs3("label", { className: "idk-form__field", children: [
+      /* @__PURE__ */ jsx6("span", { children: "Subject" }),
+      /* @__PURE__ */ jsx6(
+        "input",
+        {
+          value: formState.subject,
+          onChange: (event) => handleChange("subject", event.target.value)
+        }
+      )
+    ] }),
+    fields.includes("message") && /* @__PURE__ */ jsxs3("label", { className: "idk-form__field", children: [
+      /* @__PURE__ */ jsx6("span", { children: "Message" }),
+      /* @__PURE__ */ jsx6(
+        "textarea",
+        {
+          value: formState.message,
+          onChange: (event) => handleChange("message", event.target.value),
+          rows: 5,
+          required: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx6("button", { type: "submit", className: "idk-button", disabled: mutation.isPending, children: mutation.isPending ? "Sending..." : submitLabel }),
+    mutation.isError ? /* @__PURE__ */ jsx6("p", { className: "idk-form__error", children: "Something went wrong. Please try again." }) : null,
+    mutation.isSuccess ? /* @__PURE__ */ jsx6("p", { className: "idk-form__success", children: "Thanks! We'll be in touch soon." }) : null
+  ] });
+}
+
+// src/components/BookingWidget.tsx
+import { useMemo as useMemo2, useState as useState3 } from "react";
+import { jsx as jsx7, jsxs as jsxs4 } from "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] = 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 [details, setDetails] = useState3({
+    name: "",
+    email: "",
+    phone: "",
+    notes: ""
+  });
+  const staffOptions = useMemo2(() => {
+    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__ */ jsx7("div", { className: "idk-state", children: "Loading booking options..." });
+  }
+  if (!servicesData?.services?.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");
+            }
+          },
+          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"
+            ] })
+          ]
+        },
+        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." })
+  ] });
+}
+
+// src/components/AvailabilityPicker.tsx
+import { useState as useState4 } from "react";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function AvailabilityPicker({
+  serviceId,
+  staffId,
+  date,
+  days = 7,
+  className,
+  onSelect
+}) {
+  const [selectedDate, setSelectedDate] = useState4(date || null);
+  const [selectedTime, setSelectedTime] = useState4(null);
+  const { data, isLoading } = useAvailability({
+    serviceId,
+    staffId,
+    date,
+    days
+  });
+  if (isLoading) {
+    return /* @__PURE__ */ jsx8("div", { className: "idk-state", children: "Loading availability..." });
+  }
+  if (!data?.dates?.length) {
+    return /* @__PURE__ */ jsx8("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__ */ jsxs5("div", { className: ["idk-availability", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx8("div", { className: "idk-availability__dates", children: data.dates.map((entry) => /* @__PURE__ */ jsx8(
+      "button",
+      {
+        type: "button",
+        className: entry.date === activeDate ? "is-active" : void 0,
+        onClick: () => {
+          setSelectedDate(entry.date);
+          setSelectedTime(null);
+        },
+        children: entry.date
+      },
+      entry.date
+    )) }),
+    /* @__PURE__ */ jsx8("div", { className: "idk-availability__slots", children: activeSlots.filter((slot) => slot.available).length === 0 ? /* @__PURE__ */ jsx8("div", { className: "idk-state", children: "No slots available." }) : activeSlots.filter((slot) => slot.available).map((slot) => /* @__PURE__ */ jsx8(
+      "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
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function ServicePicker({
+  services,
+  selectedId,
+  onSelect,
+  className
+}) {
+  return /* @__PURE__ */ jsx9("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: services.map((service) => /* @__PURE__ */ jsxs6(
+    "button",
+    {
+      type: "button",
+      className: selectedId === service.id ? "is-active" : void 0,
+      onClick: () => onSelect?.(service),
+      children: [
+        /* @__PURE__ */ jsx9("span", { children: service.name }),
+        /* @__PURE__ */ jsxs6("small", { children: [
+          service.duration,
+          " min"
+        ] })
+      ]
+    },
+    service.id
+  )) });
+}
+
+// src/components/StaffPicker.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function StaffPicker({
+  staff,
+  selectedId,
+  onSelect,
+  className
+}) {
+  return /* @__PURE__ */ jsx10("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: staff.map((member) => /* @__PURE__ */ jsxs7(
+    "button",
+    {
+      type: "button",
+      className: selectedId === member.id ? "is-active" : void 0,
+      onClick: () => onSelect?.(member),
+      children: [
+        /* @__PURE__ */ jsx10("span", { children: member.name }),
+        /* @__PURE__ */ jsx10("small", { children: member.role || "Staff" })
+      ]
+    },
+    member.id
+  )) });
+}
+
+// src/components/DatePicker.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function DatePicker({
+  dates,
+  selectedDate,
+  onSelect,
+  className
+}) {
+  return /* @__PURE__ */ jsx11("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: dates.map((date) => /* @__PURE__ */ jsx11(
+    "button",
+    {
+      type: "button",
+      className: selectedDate === date ? "is-active" : void 0,
+      onClick: () => onSelect?.(date),
+      children: date
+    },
+    date
+  )) });
+}
+
+// src/components/TimePicker.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function TimePicker({
+  slots,
+  selectedTime,
+  onSelect,
+  className
+}) {
+  return /* @__PURE__ */ jsx12("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: slots.map((slot) => /* @__PURE__ */ jsx12(
+    "button",
+    {
+      type: "button",
+      className: selectedTime === slot.time ? "is-active" : void 0,
+      disabled: !slot.available,
+      onClick: () => onSelect?.(slot),
+      children: slot.time
+    },
+    `${slot.time}-${slot.endTime}`
+  )) });
+}
+export {
+  AvailabilityPicker,
+  BookingWidget,
+  ContactForm,
+  DatePicker,
+  PlatformProvider,
+  ServiceCard,
+  ServicePicker,
+  ServicesList,
+  StaffPicker,
+  TeamGrid,
+  TeamMember,
+  TimePicker,
+  useAvailability,
+  useBookingLookup,
+  useCancelBooking,
+  useCreateBooking,
+  useServices,
+  useTeam,
+  useTenant
+};
+//# sourceMappingURL=index.js.map