@bookinglab/booking-ui-react 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 BookingLab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,208 @@
+# @bookinglab/booking-ui-react
+
+React UI components for BookingLab booking journeys. Build dynamic, accessible booking forms with conditional logic, validation, and full styling customization.
+
+## Installation
+
+```bash
+npm install @bookinglab/booking-ui-react
+```
+
+## Quick Start
+
+```tsx
+import { BookingForm, Question } from '@bookinglab/booking-ui-react';
+
+const questions: Question[] = [
+  { id: 1, name: 'Personal Details', detail_type: 'heading' },
+  { id: 2, name: 'Full Name', detail_type: 'text_field', required: true },
+  { id: 3, name: 'Email', detail_type: 'text_field', required: true },
+];
+
+function App() {
+  const handleSubmit = (values) => {
+    console.log('Form submitted:', values);
+  };
+
+  return (
+    <BookingForm
+      questions={questions}
+      onSubmit={handleSubmit}
+      submitLabel="Book Now"
+    />
+  );
+}
+```
+
+## Components
+
+### BookingForm
+
+A dynamic form component that renders form fields based on an array of `Question` objects.
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `questions` | `Question[]` | required | Array of question objects defining the form fields |
+| `onSubmit` | `(values: FormValues) => void` | required | Callback fired when form is submitted with valid values |
+| `submitLabel` | `string` | `"Submit"` | Text for the submit button |
+| `className` | `string` | `""` | Class name for the form element |
+| `classNames` | `BookingFormClassNames` | `undefined` | Custom class names for styling individual elements |
+
+#### Question Types
+
+The `detail_type` property determines how each question is rendered:
+
+| Type | Description | Renders |
+|------|-------------|---------|
+| `heading` | Section heading | `<h3>` element |
+| `text_field` | Single-line text | `<input type="text">` |
+| `text_area` | Multi-line text | `<textarea>` |
+| `select` | Dropdown selection | `<select>` with options |
+| `date` | Date picker | `<input type="date">` |
+| `number` | Numeric input | `<input type="number">` |
+| `check` | Checkbox | `<input type="checkbox">` |
+
+#### Question Interface
+
+```typescript
+interface Question {
+  id: number;
+  name: string;
+  detail_type: 'heading' | 'text_field' | 'text_area' | 'select' | 'date' | 'number' | 'check';
+  required?: boolean;
+  help_text?: string;
+  options?: QuestionOption[];  // For select type
+  settings?: QuestionSettings;
+}
+
+interface QuestionOption {
+  id: number;
+  name: string;
+  price?: number;
+  is_default?: boolean;
+}
+
+interface QuestionSettings {
+  conditional_question?: string;
+  conditional_answers?: Record<string, string>;
+  min?: number;
+  max?: number;
+  placeholder?: string;
+}
+```
+
+## Conditional Questions
+
+Show or hide questions based on answers to other questions using `conditional_answers`:
+
+```tsx
+const questions: Question[] = [
+  {
+    id: 1,
+    name: 'Service Type',
+    detail_type: 'select',
+    required: true,
+    options: [
+      { id: 1, name: 'Consultation' },
+      { id: 2, name: 'Follow-up' },
+    ],
+  },
+  {
+    id: 2,
+    name: 'First time visiting?',
+    detail_type: 'check',
+    settings: {
+      // Only show when "Consultation" (option id: 1) is selected
+      conditional_answers: { '1': '1' },
+    },
+  },
+];
+```
+
+## Styling
+
+### Custom Class Names
+
+Override default styles using the `classNames` prop:
+
+```tsx
+<BookingForm
+  questions={questions}
+  onSubmit={handleSubmit}
+  classNames={{
+    fieldWrapper: 'mb-6',
+    label: 'text-white font-bold',
+    heading: 'text-2xl text-primary',
+    input: 'border-2 border-gray-400 rounded-lg p-3',
+    inputError: 'border-red-500',
+    checkbox: 'w-5 h-5',
+    helpText: 'text-gray-400 text-sm',
+    errorText: 'text-red-400',
+    button: 'bg-primary text-white py-3 px-6 rounded-lg',
+  }}
+/>
+```
+
+### Available Class Name Keys
+
+| Key | Description |
+|-----|-------------|
+| `fieldWrapper` | Container for each form field |
+| `label` | All label elements |
+| `heading` | Heading elements (`detail_type: 'heading'`) |
+| `input` | All input elements (text, textarea, select, date, number) |
+| `inputError` | Additional classes for inputs in error state |
+| `checkbox` | Checkbox input specifically |
+| `helpText` | Help text below fields |
+| `errorText` | Error message text |
+| `button` | Submit button |
+
+## Form Values
+
+The `onSubmit` callback receives a `FormValues` object mapping question IDs to their values:
+
+```typescript
+type FormValues = Record<number, string | number | boolean>;
+
+// Example output:
+{
+  2: "John Doe",      // text_field
+  3: "john@example.com", // text_field
+  4: 1,               // select (option id)
+  5: true,            // check
+}
+```
+
+## Validation
+
+- Required fields are automatically validated
+- Number fields respect `min` and `max` settings
+- Error messages display after field is touched
+- Hidden conditional fields are excluded from validation
+
+## Requirements
+
+- React 17.0.0 or higher
+- React DOM 17.0.0 or higher
+
+## TypeScript
+
+All types are exported for TypeScript users:
+
+```typescript
+import type {
+  Question,
+  QuestionOption,
+  QuestionSettings,
+  FormValues,
+  FormErrors,
+  BookingFormProps,
+  BookingFormClassNames,
+} from '@bookinglab/booking-ui-react';
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,360 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/BookingForm.tsx
+var cx = (...classes) => classes.filter(Boolean).join(" ");
+function FormField({
+  question,
+  value,
+  error,
+  onChange,
+  classNames
+}) {
+  const inputId = `question-${question.id}`;
+  const errorId = `${inputId}-error`;
+  const hasError = !!error;
+  const defaultFieldWrapper = "mb-4";
+  const defaultLabel = "block text-sm font-medium mb-1 text-gray-700";
+  const defaultHeading = "text-lg font-semibold text-gray-900 mt-4 mb-2 first:mt-0";
+  const defaultInput = "w-full px-3 py-2 border rounded-md text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-offset-1 border-gray-300 focus:ring-blue-500 focus:border-blue-500";
+  const defaultInputError = "border-red-500 focus:ring-red-500";
+  const defaultCheckbox = "mt-1 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500";
+  const defaultHelpText = "mt-1 text-xs text-gray-500";
+  const defaultErrorText = "mt-1 text-xs text-red-600";
+  const inputClasses = hasError ? cx(classNames?.input ?? defaultInput, classNames?.inputError ?? defaultInputError) : cx(classNames?.input ?? defaultInput);
+  const labelClasses = classNames?.label ?? defaultLabel;
+  const checkboxLabelClasses = cx("text-sm", classNames?.label ?? "text-gray-700");
+  const renderLabel = () => {
+    if (question.detail_type === "heading") return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className: labelClasses, children: [
+      question.name,
+      question.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+    ] });
+  };
+  const renderHelpText = () => {
+    if (!question.help_text) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("p", { className: classNames?.helpText ?? defaultHelpText, children: question.help_text });
+  };
+  const renderError = () => {
+    if (!error) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, className: classNames?.errorText ?? defaultErrorText, role: "alert", children: error });
+  };
+  const ariaProps = {
+    "aria-invalid": hasError ? true : void 0,
+    "aria-describedby": hasError ? errorId : void 0,
+    "aria-required": question.required || void 0
+  };
+  switch (question.detail_type) {
+    case "heading":
+      return /* @__PURE__ */ jsxRuntime.jsx("h3", { className: classNames?.heading ?? defaultHeading, children: question.name });
+    case "text_field":
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
+        renderLabel(),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id: inputId,
+            type: "text",
+            value: value || "",
+            onChange: (e) => onChange(e.target.value),
+            placeholder: question.settings?.placeholder,
+            className: inputClasses,
+            ...ariaProps
+          }
+        ),
+        renderHelpText(),
+        renderError()
+      ] });
+    case "text_area":
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
+        renderLabel(),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "textarea",
+          {
+            id: inputId,
+            value: value || "",
+            onChange: (e) => onChange(e.target.value),
+            placeholder: question.settings?.placeholder,
+            rows: 4,
+            className: inputClasses,
+            ...ariaProps
+          }
+        ),
+        renderHelpText(),
+        renderError()
+      ] });
+    case "select":
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
+        renderLabel(),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "select",
+          {
+            id: inputId,
+            value: value ?? "",
+            onChange: (e) => onChange(e.target.value),
+            className: inputClasses,
+            ...ariaProps,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Select an option" }),
+              question.options?.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.id, children: option.name }, option.id))
+            ]
+          }
+        ),
+        renderHelpText(),
+        renderError()
+      ] });
+    case "date":
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
+        renderLabel(),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id: inputId,
+            type: "date",
+            value: value || "",
+            onChange: (e) => onChange(e.target.value),
+            min: question.settings?.min?.toString(),
+            max: question.settings?.max?.toString(),
+            className: inputClasses,
+            ...ariaProps
+          }
+        ),
+        renderHelpText(),
+        renderError()
+      ] });
+    case "number":
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
+        renderLabel(),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id: inputId,
+            type: "number",
+            value: value ?? "",
+            onChange: (e) => onChange(e.target.value ? Number(e.target.value) : ""),
+            min: question.settings?.min,
+            max: question.settings?.max,
+            placeholder: question.settings?.placeholder,
+            className: inputClasses,
+            ...ariaProps
+          }
+        ),
+        renderHelpText(),
+        renderError()
+      ] });
+    case "check":
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id: inputId,
+              type: "checkbox",
+              checked: !!value,
+              onChange: (e) => onChange(e.target.checked),
+              className: classNames?.checkbox ?? defaultCheckbox,
+              ...ariaProps
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className: checkboxLabelClasses, children: [
+            question.name,
+            question.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+          ] })
+        ] }),
+        renderHelpText(),
+        renderError()
+      ] });
+    default:
+      return null;
+  }
+}
+function BookingForm({
+  questions,
+  onSubmit,
+  submitLabel = "Submit",
+  className = "",
+  labelClassName,
+  classNames: classNamesProp
+}) {
+  const classNames = {
+    ...classNamesProp,
+    label: classNamesProp?.label ?? labelClassName
+  };
+  const [values, setValues] = react.useState({});
+  const [errors, setErrors] = react.useState({});
+  const [touched, setTouched] = react.useState({});
+  const isQuestionVisible = react.useCallback(
+    (question) => {
+      const { settings } = question;
+      if (!settings?.conditional_answers) {
+        return true;
+      }
+      const conditionEntries = Object.entries(settings.conditional_answers);
+      if (conditionEntries.length === 0) {
+        return true;
+      }
+      return conditionEntries.some(([questionIdStr, expectedAnswer]) => {
+        const questionId = Number(questionIdStr);
+        const currentValue = values[String(questionId)];
+        if (currentValue === void 0 || currentValue === "" || currentValue === null) {
+          return false;
+        }
+        const normalizedCurrent = typeof currentValue === "object" && currentValue !== null && "id" in currentValue ? currentValue : currentValue;
+        const candidates = /* @__PURE__ */ new Set();
+        const addCandidate = (v) => {
+          if (v === void 0 || v === null) return;
+          const s = String(v).trim();
+          if (s) candidates.add(s);
+        };
+        const sourceQuestion = questions.find((q) => q.id === questionId);
+        if (typeof normalizedCurrent === "object" && normalizedCurrent !== null) {
+          addCandidate(normalizedCurrent.id);
+          addCandidate(normalizedCurrent.name);
+        } else {
+          addCandidate(normalizedCurrent);
+        }
+        if (sourceQuestion?.detail_type === "select" && sourceQuestion.options?.length) {
+          const currentStr = [...candidates][0] ?? "";
+          const optionById = sourceQuestion.options.find((o) => String(o.id) === currentStr);
+          const optionByName = sourceQuestion.options.find((o) => String(o.name).trim() === currentStr);
+          const opt = optionById ?? optionByName;
+          if (opt) {
+            addCandidate(opt.id);
+            addCandidate(opt.name);
+          }
+        }
+        const matchesScalar = (expected) => {
+          const expectedStr = String(expected).trim();
+          return candidates.has(expectedStr);
+        };
+        if (Array.isArray(expectedAnswer)) {
+          return expectedAnswer.some((v) => matchesScalar(v));
+        }
+        if (expectedAnswer && typeof expectedAnswer === "object") {
+          const expectedMap = expectedAnswer;
+          for (const c of candidates) {
+            if (Object.prototype.hasOwnProperty.call(expectedMap, c)) {
+              const flag = expectedMap[c];
+              return flag === void 0 ? true : !!flag;
+            }
+          }
+          return false;
+        }
+        return matchesScalar(expectedAnswer);
+      });
+    },
+    [values, questions]
+  );
+  const visibleQuestions = questions.filter(isQuestionVisible);
+  const validateField = react.useCallback((question, value) => {
+    if (question.detail_type === "heading") return null;
+    if (question.required) {
+      if (value === void 0 || value === "" || value === null) {
+        return `${question.name} is required`;
+      }
+      if (question.detail_type === "check" && !value) {
+        return `${question.name} must be checked`;
+      }
+    }
+    if (question.detail_type === "number" && value !== "" && value !== void 0) {
+      const numValue = Number(value);
+      if (question.settings?.min !== void 0 && numValue < question.settings.min) {
+        return `Minimum value is ${question.settings.min}`;
+      }
+      if (question.settings?.max !== void 0 && numValue > question.settings.max) {
+        return `Maximum value is ${question.settings.max}`;
+      }
+    }
+    return null;
+  }, []);
+  const validateAll = react.useCallback(() => {
+    const newErrors = {};
+    let isValid = true;
+    visibleQuestions.forEach((question) => {
+      const error = validateField(question, values[question.id]);
+      if (error) {
+        newErrors[question.id] = error;
+        isValid = false;
+      }
+    });
+    setErrors(newErrors);
+    return isValid;
+  }, [visibleQuestions, values, validateField]);
+  react.useEffect(() => {
+    const visibleIds = new Set(visibleQuestions.map((q) => q.id));
+    setErrors((prev) => {
+      let changed = false;
+      const next = { ...prev };
+      Object.keys(next).forEach((idStr) => {
+        const id = Number(idStr);
+        if (!visibleIds.has(id)) {
+          delete next[id];
+          changed = true;
+        }
+      });
+      return changed ? next : prev;
+    });
+  }, [visibleQuestions]);
+  const handleChange = (questionId, value) => {
+    setValues((prev) => ({ ...prev, [questionId]: value }));
+    setTouched((prev) => ({ ...prev, [questionId]: true }));
+    if (touched[questionId]) {
+      const question = questions.find((q) => q.id === questionId);
+      if (question) {
+        const error = validateField(question, value);
+        setErrors((prev) => {
+          if (error) {
+            return { ...prev, [questionId]: error };
+          }
+          const { [questionId]: _, ...rest } = prev;
+          return rest;
+        });
+      }
+    }
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const allTouched = {};
+    visibleQuestions.forEach((q) => {
+      allTouched[q.id] = true;
+    });
+    setTouched(allTouched);
+    if (validateAll()) {
+      const visibleValues = {};
+      visibleQuestions.forEach((q) => {
+        if (q.detail_type !== "heading" && values[q.id] !== void 0) {
+          visibleValues[q.id] = values[q.id];
+        }
+      });
+      onSubmit(visibleValues);
+    }
+  };
+  const defaultButton = "w-full mt-4 px-4 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors";
+  return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className, noValidate: true, children: [
+    visibleQuestions.map((question) => /* @__PURE__ */ jsxRuntime.jsx(
+      FormField,
+      {
+        question,
+        value: values[question.id],
+        error: touched[question.id] ? errors[question.id] : void 0,
+        onChange: (value) => handleChange(question.id, value),
+        classNames
+      },
+      question.id
+    )),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "submit",
+        className: classNames?.button ?? defaultButton,
+        children: submitLabel
+      }
+    )
+  ] });
+}
+
+exports.BookingForm = BookingForm;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/BookingForm.tsx"],"names":["jsxs","jsx","useState","useCallback","useEffect"],"mappings":"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","file":"index.cjs","sourcesContent":["import React, { useState, useEffect, useCallback } from 'react';\nimport type { Question, FormValues, FormErrors, BookingFormProps, BookingFormClassNames } from '../types';\n\n/** Merge base classes with optional custom classes */\nconst cx = (...classes: (string | undefined)[]) => classes.filter(Boolean).join(' ');\n\n/**\n * Renders a single form field based on question type\n */\nfunction FormField({\n  question,\n  value,\n  error,\n  onChange,\n  classNames,\n}: {\n  question: Question;\n  value: string | number | boolean | undefined;\n  error?: string;\n  onChange: (value: string | number | boolean) => void;\n  classNames?: BookingFormClassNames;\n}) {\n  const inputId = `question-${question.id}`;\n  const errorId = `${inputId}-error`;\n  const hasError = !!error;\n\n  // Default classes (can be overridden via classNames prop)\n  const defaultFieldWrapper = 'mb-4';\n  const defaultLabel = 'block text-sm font-medium mb-1 text-gray-700';\n  const defaultHeading = 'text-lg font-semibold text-gray-900 mt-4 mb-2 first:mt-0';\n  const defaultInput = 'w-full px-3 py-2 border rounded-md text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-offset-1 border-gray-300 focus:ring-blue-500 focus:border-blue-500';\n  const defaultInputError = 'border-red-500 focus:ring-red-500';\n  const defaultCheckbox = 'mt-1 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500';\n  const defaultHelpText = 'mt-1 text-xs text-gray-500';\n  const defaultErrorText = 'mt-1 text-xs text-red-600';\n\n  const inputClasses = hasError\n    ? cx(classNames?.input ?? defaultInput, classNames?.inputError ?? defaultInputError)\n    : cx(classNames?.input ?? defaultInput);\n\n  const labelClasses = classNames?.label ?? defaultLabel;\n  const checkboxLabelClasses = cx('text-sm', classNames?.label ?? 'text-gray-700');\n\n  const renderLabel = () => {\n    if (question.detail_type === 'heading') return null;\n    return (\n      <label htmlFor={inputId} className={labelClasses}>\n        {question.name}\n        {question.required && <span className=\"text-red-500 ml-1\" aria-hidden=\"true\">*</span>}\n      </label>\n    );\n  };\n\n  const renderHelpText = () => {\n    if (!question.help_text) return null;\n    return <p className={classNames?.helpText ?? defaultHelpText}>{question.help_text}</p>;\n  };\n\n  const renderError = () => {\n    if (!error) return null;\n    return (\n      <p id={errorId} className={classNames?.errorText ?? defaultErrorText} role=\"alert\">\n        {error}\n      </p>\n    );\n  };\n\n  const ariaProps = {\n    'aria-invalid': hasError ? true : undefined,\n    'aria-describedby': hasError ? errorId : undefined,\n    'aria-required': question.required || undefined,\n  };\n\n  switch (question.detail_type) {\n    case 'heading':\n      return (\n        <h3 className={classNames?.heading ?? defaultHeading}>\n          {question.name}\n        </h3>\n      );\n\n    case 'text_field':\n      return (\n        <div className={classNames?.fieldWrapper ?? defaultFieldWrapper}>\n          {renderLabel()}\n          <input\n            id={inputId}\n            type=\"text\"\n            value={(value as string) || ''}\n            onChange={(e) => onChange(e.target.value)}\n            placeholder={question.settings?.placeholder}\n            className={inputClasses}\n            {...ariaProps}\n          />\n          {renderHelpText()}\n          {renderError()}\n        </div>\n      );\n\n    case 'text_area':\n      return (\n        <div className={classNames?.fieldWrapper ?? defaultFieldWrapper}>\n          {renderLabel()}\n          <textarea\n            id={inputId}\n            value={(value as string) || ''}\n            onChange={(e) => onChange(e.target.value)}\n            placeholder={question.settings?.placeholder}\n            rows={4}\n            className={inputClasses}\n            {...ariaProps}\n          />\n          {renderHelpText()}\n          {renderError()}\n        </div>\n      );\n\n    case 'select':\n      return (\n        <div className={classNames?.fieldWrapper ?? defaultFieldWrapper}>\n          {renderLabel()}\n          <select\n            id={inputId}\n            value={(value as string | number) ?? ''}\n            onChange={(e) => onChange(e.target.value)}\n            className={inputClasses}\n            {...ariaProps}\n          >\n            <option value=\"\">Select an option</option>\n            {question.options?.map((option) => (\n              <option key={option.id} value={option.id}>\n                {option.name}\n              </option>\n            ))}\n          </select>\n          {renderHelpText()}\n          {renderError()}\n        </div>\n      );\n\n    case 'date':\n      return (\n        <div className={classNames?.fieldWrapper ?? defaultFieldWrapper}>\n          {renderLabel()}\n          <input\n            id={inputId}\n            type=\"date\"\n            value={(value as string) || ''}\n            onChange={(e) => onChange(e.target.value)}\n            min={question.settings?.min?.toString()}\n            max={question.settings?.max?.toString()}\n            className={inputClasses}\n            {...ariaProps}\n          />\n          {renderHelpText()}\n          {renderError()}\n        </div>\n      );\n\n    case 'number':\n      return (\n        <div className={classNames?.fieldWrapper ?? defaultFieldWrapper}>\n          {renderLabel()}\n          <input\n            id={inputId}\n            type=\"number\"\n            value={(value as number) ?? ''}\n            onChange={(e) => onChange(e.target.value ? Number(e.target.value) : '')}\n            min={question.settings?.min}\n            max={question.settings?.max}\n            placeholder={question.settings?.placeholder}\n            className={inputClasses}\n            {...ariaProps}\n          />\n          {renderHelpText()}\n          {renderError()}\n        </div>\n      );\n\n    case 'check':\n      return (\n        <div className={classNames?.fieldWrapper ?? defaultFieldWrapper}>\n          <div className=\"flex items-start gap-2\">\n            <input\n              id={inputId}\n              type=\"checkbox\"\n              checked={!!value}\n              onChange={(e) => onChange(e.target.checked)}\n              className={classNames?.checkbox ?? defaultCheckbox}\n              {...ariaProps}\n            />\n            <label htmlFor={inputId} className={checkboxLabelClasses}>\n              {question.name}\n              {question.required && <span className=\"text-red-500 ml-1\" aria-hidden=\"true\">*</span>}\n            </label>\n          </div>\n          {renderHelpText()}\n          {renderError()}\n        </div>\n      );\n\n    default:\n      return null;\n  }\n}\n\n/**\n * BookingForm - A dynamic form component for booking questions\n *\n * @example\n * ```tsx\n * const questions: Question[] = [\n *   { id: 1, name: 'Personal Details', detail_type: 'heading' },\n *   { id: 2, name: 'Full Name', detail_type: 'text_field', required: true },\n *   { id: 3, name: 'Email', detail_type: 'text_field', required: true },\n * ];\n *\n * <BookingForm\n *   questions={questions}\n *   onSubmit={(values) => console.log(values)}\n * />\n * ```\n */\nexport function BookingForm({\n  questions,\n  onSubmit,\n  submitLabel = 'Submit',\n  className = '',\n  labelClassName,\n  classNames: classNamesProp,\n}: BookingFormProps) {\n  // Merge deprecated labelClassName into classNames for backwards compatibility\n  const classNames: BookingFormClassNames = {\n    ...classNamesProp,\n    label: classNamesProp?.label ?? labelClassName,\n  };\n  const [values, setValues] = useState<FormValues>({});\n  const [errors, setErrors] = useState<FormErrors>({});\n  const [touched, setTouched] = useState<Record<number, boolean>>({});\n\n\n  // Check if a question should be visible based on conditional settings\n  const isQuestionVisible = useCallback(\n    (question: Question): boolean => {\n      const { settings } = question;\n      if (!settings?.conditional_answers) {\n        return true;\n      }\n\n      // Check all conditions in conditional_answers\n      // Each entry is { questionId: expectedAnswerValue }\n      const conditionEntries = Object.entries(settings.conditional_answers as Record<string, unknown>);\n      if (conditionEntries.length === 0) {\n        return true;\n      }\n\n      // Question is visible if ANY condition is met\n      return conditionEntries.some(([questionIdStr, expectedAnswer]) => {\n        const questionId = Number(questionIdStr);\n        const currentValue = (values as Record<string, unknown>)[String(questionId)];\n\n        if (currentValue === undefined || currentValue === '' || currentValue === null) {\n          return false;\n        }\n\n        // Selects typically store the option id (as string), but allow `{ id, name }` objects too\n        const normalizedCurrent =\n          typeof currentValue === 'object' && currentValue !== null && 'id' in (currentValue as any)\n            ? (currentValue as any)\n            : currentValue;\n\n        // Build a set of candidate strings for comparison.\n        // For select questions we support matching by BOTH option id and option name.\n        const candidates = new Set<string>();\n\n        const addCandidate = (v: unknown) => {\n          if (v === undefined || v === null) return;\n          const s = String(v).trim();\n          if (s) candidates.add(s);\n        };\n\n        const sourceQuestion = questions.find((q) => q.id === questionId);\n\n        if (typeof normalizedCurrent === 'object' && normalizedCurrent !== null) {\n          addCandidate((normalizedCurrent as any).id);\n          addCandidate((normalizedCurrent as any).name);\n        } else {\n          addCandidate(normalizedCurrent);\n        }\n\n        if (sourceQuestion?.detail_type === 'select' && sourceQuestion.options?.length) {\n          // Try to resolve the selected option via id or name.\n          const currentStr = [...candidates][0] ?? '';\n          const optionById = sourceQuestion.options.find((o) => String(o.id) === currentStr);\n          const optionByName = sourceQuestion.options.find((o) => String(o.name).trim() === currentStr);\n          const opt = optionById ?? optionByName;\n          if (opt) {\n            addCandidate(opt.id);\n            addCandidate(opt.name);\n          }\n        }\n\n        const matchesScalar = (expected: unknown) => {\n          const expectedStr = String(expected).trim();\n          return candidates.has(expectedStr);\n        };\n\n        // Support multiple expected formats:\n        // - scalar: \"Consultation\" / \"1\" / 1 / true\n        // - array: [\"Consultation\", \"Follow-up\"]\n        // - map/object: { \"Consultation\": true }\n        if (Array.isArray(expectedAnswer)) {\n          return expectedAnswer.some((v) => matchesScalar(v));\n        }\n\n        if (expectedAnswer && typeof expectedAnswer === 'object') {\n          const expectedMap = expectedAnswer as Record<string, unknown>;\n          for (const c of candidates) {\n            if (Object.prototype.hasOwnProperty.call(expectedMap, c)) {\n              const flag = expectedMap[c];\n              return flag === undefined ? true : !!flag;\n            }\n          }\n          return false;\n        }\n\n        return matchesScalar(expectedAnswer);\n      });\n    },\n    [values, questions]\n  );\n\n  // Get visible questions\n  const visibleQuestions = questions.filter(isQuestionVisible);\n\n\n  // Validate a single field\n  const validateField = useCallback((question: Question, value: FormValues[number]): string | null => {\n    if (question.detail_type === 'heading') return null;\n\n    if (question.required) {\n      if (value === undefined || value === '' || value === null) {\n        return `${question.name} is required`;\n      }\n      if (question.detail_type === 'check' && !value) {\n        return `${question.name} must be checked`;\n      }\n    }\n\n    if (question.detail_type === 'number' && value !== '' && value !== undefined) {\n      const numValue = Number(value);\n      if (question.settings?.min !== undefined && numValue < question.settings.min) {\n        return `Minimum value is ${question.settings.min}`;\n      }\n      if (question.settings?.max !== undefined && numValue > question.settings.max) {\n        return `Maximum value is ${question.settings.max}`;\n      }\n    }\n\n    return null;\n  }, []);\n\n  // Validate all visible fields\n  const validateAll = useCallback((): boolean => {\n    const newErrors: FormErrors = {};\n    let isValid = true;\n\n    visibleQuestions.forEach((question) => {\n      const error = validateField(question, values[question.id]);\n      if (error) {\n        newErrors[question.id] = error;\n        isValid = false;\n      }\n    });\n\n    setErrors(newErrors);\n    return isValid;\n  }, [visibleQuestions, values, validateField]);\n\n  // Clear errors for hidden questions\n  useEffect(() => {\n    const visibleIds = new Set(visibleQuestions.map((q) => q.id));\n\n    setErrors((prev) => {\n      let changed = false;\n      const next = { ...prev };\n\n      Object.keys(next).forEach((idStr) => {\n        const id = Number(idStr);\n        if (!visibleIds.has(id)) {\n          delete next[id];\n          changed = true;\n        }\n      });\n\n      return changed ? next : prev;\n    });\n  }, [visibleQuestions]);\n\n  const handleChange = (questionId: number, value: string | number | boolean) => {\n    setValues((prev) => ({ ...prev, [questionId]: value }));\n    setTouched((prev) => ({ ...prev, [questionId]: true }));\n\n    // Clear error on change if touched\n    if (touched[questionId]) {\n      const question = questions.find((q) => q.id === questionId);\n      if (question) {\n        const error = validateField(question, value);\n        setErrors((prev) => {\n          if (error) {\n            return { ...prev, [questionId]: error };\n          }\n          const { [questionId]: _, ...rest } = prev;\n          return rest;\n        });\n      }\n    }\n  };\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n\n    // Mark all fields as touched\n    const allTouched: Record<number, boolean> = {};\n    visibleQuestions.forEach((q) => {\n      allTouched[q.id] = true;\n    });\n    setTouched(allTouched);\n\n    if (validateAll()) {\n      // Only include visible question values\n      const visibleValues: FormValues = {};\n      visibleQuestions.forEach((q) => {\n        if (q.detail_type !== 'heading' && values[q.id] !== undefined) {\n          visibleValues[q.id] = values[q.id];\n        }\n      });\n      onSubmit(visibleValues);\n    }\n  };\n\n  const defaultButton = 'w-full mt-4 px-4 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors';\n\n  return (\n    <form onSubmit={handleSubmit} className={className} noValidate>\n      {visibleQuestions.map((question) => (\n        <FormField\n          key={question.id}\n          question={question}\n          value={values[question.id]}\n          error={touched[question.id] ? errors[question.id] : undefined}\n          onChange={(value) => handleChange(question.id, value)}\n          classNames={classNames}\n        />\n      ))}\n      <button\n        type=\"submit\"\n        className={classNames?.button ?? defaultButton}\n      >\n        {submitLabel}\n      </button>\n    </form>\n  );\n}\n\nexport default BookingForm;\n"]}

package/dist/index.d.cts

@@ -0,0 +1,93 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface QuestionOption {
+    id: number;
+    name: string;
+    price?: number;
+    is_default?: boolean;
+}
+interface QuestionSettings {
+    conditional_question?: string;
+    conditional_answers?: Record<string, string>;
+    min?: number;
+    max?: number;
+    placeholder?: string;
+}
+interface Question {
+    id: number;
+    name: string;
+    detail_type: 'heading' | 'text_field' | 'text_area' | 'select' | 'date' | 'number' | 'check';
+    required?: boolean;
+    important?: boolean;
+    admin_only?: boolean;
+    applies_to?: number;
+    ask_member?: boolean;
+    options?: QuestionOption[];
+    settings?: QuestionSettings;
+    help_text?: string;
+    price?: number;
+    price_per_booking?: boolean;
+    outcome?: boolean;
+    hide_on_customer_journey?: boolean;
+}
+type FormValues = Record<number, string | number | boolean>;
+type FormErrors = Record<number, string>;
+/**
+ * Custom class names for styling form elements
+ */
+interface BookingFormClassNames {
+    /** Wrapper for each form field */
+    fieldWrapper?: string;
+    /** All labels */
+    label?: string;
+    /** Heading elements (detail_type: 'heading') */
+    heading?: string;
+    /** All input elements (text, textarea, select, date, number) */
+    input?: string;
+    /** Input elements in error state */
+    inputError?: string;
+    /** Checkbox input specifically */
+    checkbox?: string;
+    /** Help text below fields */
+    helpText?: string;
+    /** Error message text */
+    errorText?: string;
+    /** Submit button */
+    button?: string;
+}
+interface BookingFormProps {
+    questions: Question[];
+    onSubmit: (values: FormValues) => void;
+    submitLabel?: string;
+    /** Class name for the form element */
+    className?: string;
+    /** @deprecated Use classNames.label instead */
+    labelClassName?: string;
+    /** Custom class names for styling individual elements */
+    classNames?: BookingFormClassNames;
+}
+interface BookingUIConfig {
+    theme?: 'light' | 'dark' | 'system';
+    locale?: string;
+}
+
+/**
+ * BookingForm - A dynamic form component for booking questions
+ *
+ * @example
+ * ```tsx
+ * const questions: Question[] = [
+ *   { id: 1, name: 'Personal Details', detail_type: 'heading' },
+ *   { id: 2, name: 'Full Name', detail_type: 'text_field', required: true },
+ *   { id: 3, name: 'Email', detail_type: 'text_field', required: true },
+ * ];
+ *
+ * <BookingForm
+ *   questions={questions}
+ *   onSubmit={(values) => console.log(values)}
+ * />
+ * ```
+ */
+declare function BookingForm({ questions, onSubmit, submitLabel, className, labelClassName, classNames: classNamesProp, }: BookingFormProps): react_jsx_runtime.JSX.Element;
+
+export { BookingForm, type BookingFormClassNames, type BookingFormProps, type BookingUIConfig, type FormErrors, type FormValues, type Question, type QuestionOption, type QuestionSettings };

package/dist/index.d.ts

@@ -0,0 +1,93 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface QuestionOption {
+    id: number;
+    name: string;
+    price?: number;
+    is_default?: boolean;
+}
+interface QuestionSettings {
+    conditional_question?: string;
+    conditional_answers?: Record<string, string>;
+    min?: number;
+    max?: number;
+    placeholder?: string;
+}
+interface Question {
+    id: number;
+    name: string;
+    detail_type: 'heading' | 'text_field' | 'text_area' | 'select' | 'date' | 'number' | 'check';
+    required?: boolean;
+    important?: boolean;
+    admin_only?: boolean;
+    applies_to?: number;
+    ask_member?: boolean;
+    options?: QuestionOption[];
+    settings?: QuestionSettings;
+    help_text?: string;
+    price?: number;
+    price_per_booking?: boolean;
+    outcome?: boolean;
+    hide_on_customer_journey?: boolean;
+}
+type FormValues = Record<number, string | number | boolean>;
+type FormErrors = Record<number, string>;
+/**
+ * Custom class names for styling form elements
+ */
+interface BookingFormClassNames {
+    /** Wrapper for each form field */
+    fieldWrapper?: string;
+    /** All labels */
+    label?: string;
+    /** Heading elements (detail_type: 'heading') */
+    heading?: string;
+    /** All input elements (text, textarea, select, date, number) */
+    input?: string;
+    /** Input elements in error state */
+    inputError?: string;
+    /** Checkbox input specifically */
+    checkbox?: string;
+    /** Help text below fields */
+    helpText?: string;
+    /** Error message text */
+    errorText?: string;
+    /** Submit button */
+    button?: string;
+}
+interface BookingFormProps {
+    questions: Question[];
+    onSubmit: (values: FormValues) => void;
+    submitLabel?: string;
+    /** Class name for the form element */
+    className?: string;
+    /** @deprecated Use classNames.label instead */
+    labelClassName?: string;
+    /** Custom class names for styling individual elements */
+    classNames?: BookingFormClassNames;
+}
+interface BookingUIConfig {
+    theme?: 'light' | 'dark' | 'system';
+    locale?: string;
+}
+
+/**
+ * BookingForm - A dynamic form component for booking questions
+ *
+ * @example
+ * ```tsx
+ * const questions: Question[] = [
+ *   { id: 1, name: 'Personal Details', detail_type: 'heading' },
+ *   { id: 2, name: 'Full Name', detail_type: 'text_field', required: true },
+ *   { id: 3, name: 'Email', detail_type: 'text_field', required: true },
+ * ];
+ *
+ * <BookingForm
+ *   questions={questions}
+ *   onSubmit={(values) => console.log(values)}
+ * />
+ * ```
+ */
+declare function BookingForm({ questions, onSubmit, submitLabel, className, labelClassName, classNames: classNamesProp, }: BookingFormProps): react_jsx_runtime.JSX.Element;
+
+export { BookingForm, type BookingFormClassNames, type BookingFormProps, type BookingUIConfig, type FormErrors, type FormValues, type Question, type QuestionOption, type QuestionSettings };

package/dist/index.js

@@ -0,0 +1,358 @@
+import { useState, useCallback, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/BookingForm.tsx
+var cx = (...classes) => classes.filter(Boolean).join(" ");
+function FormField({
+  question,
+  value,
+  error,
+  onChange,
+  classNames
+}) {
+  const inputId = `question-${question.id}`;
+  const errorId = `${inputId}-error`;
+  const hasError = !!error;
+  const defaultFieldWrapper = "mb-4";
+  const defaultLabel = "block text-sm font-medium mb-1 text-gray-700";
+  const defaultHeading = "text-lg font-semibold text-gray-900 mt-4 mb-2 first:mt-0";
+  const defaultInput = "w-full px-3 py-2 border rounded-md text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-offset-1 border-gray-300 focus:ring-blue-500 focus:border-blue-500";
+  const defaultInputError = "border-red-500 focus:ring-red-500";
+  const defaultCheckbox = "mt-1 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500";
+  const defaultHelpText = "mt-1 text-xs text-gray-500";
+  const defaultErrorText = "mt-1 text-xs text-red-600";
+  const inputClasses = hasError ? cx(classNames?.input ?? defaultInput, classNames?.inputError ?? defaultInputError) : cx(classNames?.input ?? defaultInput);
+  const labelClasses = classNames?.label ?? defaultLabel;
+  const checkboxLabelClasses = cx("text-sm", classNames?.label ?? "text-gray-700");
+  const renderLabel = () => {
+    if (question.detail_type === "heading") return null;
+    return /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: labelClasses, children: [
+      question.name,
+      question.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+    ] });
+  };
+  const renderHelpText = () => {
+    if (!question.help_text) return null;
+    return /* @__PURE__ */ jsx("p", { className: classNames?.helpText ?? defaultHelpText, children: question.help_text });
+  };
+  const renderError = () => {
+    if (!error) return null;
+    return /* @__PURE__ */ jsx("p", { id: errorId, className: classNames?.errorText ?? defaultErrorText, role: "alert", children: error });
+  };
+  const ariaProps = {
+    "aria-invalid": hasError ? true : void 0,
+    "aria-describedby": hasError ? errorId : void 0,
+    "aria-required": question.required || void 0
+  };
+  switch (question.detail_type) {
+    case "heading":
+      return /* @__PURE__ */ jsx("h3", { className: classNames?.heading ?? defaultHeading, children: question.name });
+    case "text_field":
+      return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
+        renderLabel(),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: inputId,
+            type: "text",
+            value: value || "",
+            onChange: (e) => onChange(e.target.value),
+            placeholder: question.settings?.placeholder,
+            className: inputClasses,
+            ...ariaProps
+          }
+        ),
+        renderHelpText(),
+        renderError()
+      ] });
+    case "text_area":
+      return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
+        renderLabel(),
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            id: inputId,
+            value: value || "",
+            onChange: (e) => onChange(e.target.value),
+            placeholder: question.settings?.placeholder,
+            rows: 4,
+            className: inputClasses,
+            ...ariaProps
+          }
+        ),
+        renderHelpText(),
+        renderError()
+      ] });
+    case "select":
+      return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
+        renderLabel(),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            id: inputId,
+            value: value ?? "",
+            onChange: (e) => onChange(e.target.value),
+            className: inputClasses,
+            ...ariaProps,
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: "Select an option" }),
+              question.options?.map((option) => /* @__PURE__ */ jsx("option", { value: option.id, children: option.name }, option.id))
+            ]
+          }
+        ),
+        renderHelpText(),
+        renderError()
+      ] });
+    case "date":
+      return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
+        renderLabel(),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: inputId,
+            type: "date",
+            value: value || "",
+            onChange: (e) => onChange(e.target.value),
+            min: question.settings?.min?.toString(),
+            max: question.settings?.max?.toString(),
+            className: inputClasses,
+            ...ariaProps
+          }
+        ),
+        renderHelpText(),
+        renderError()
+      ] });
+    case "number":
+      return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
+        renderLabel(),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: inputId,
+            type: "number",
+            value: value ?? "",
+            onChange: (e) => onChange(e.target.value ? Number(e.target.value) : ""),
+            min: question.settings?.min,
+            max: question.settings?.max,
+            placeholder: question.settings?.placeholder,
+            className: inputClasses,
+            ...ariaProps
+          }
+        ),
+        renderHelpText(),
+        renderError()
+      ] });
+    case "check":
+      return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: inputId,
+              type: "checkbox",
+              checked: !!value,
+              onChange: (e) => onChange(e.target.checked),
+              className: classNames?.checkbox ?? defaultCheckbox,
+              ...ariaProps
+            }
+          ),
+          /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: checkboxLabelClasses, children: [
+            question.name,
+            question.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+          ] })
+        ] }),
+        renderHelpText(),
+        renderError()
+      ] });
+    default:
+      return null;
+  }
+}
+function BookingForm({
+  questions,
+  onSubmit,
+  submitLabel = "Submit",
+  className = "",
+  labelClassName,
+  classNames: classNamesProp
+}) {
+  const classNames = {
+    ...classNamesProp,
+    label: classNamesProp?.label ?? labelClassName
+  };
+  const [values, setValues] = useState({});
+  const [errors, setErrors] = useState({});
+  const [touched, setTouched] = useState({});
+  const isQuestionVisible = useCallback(
+    (question) => {
+      const { settings } = question;
+      if (!settings?.conditional_answers) {
+        return true;
+      }
+      const conditionEntries = Object.entries(settings.conditional_answers);
+      if (conditionEntries.length === 0) {
+        return true;
+      }
+      return conditionEntries.some(([questionIdStr, expectedAnswer]) => {
+        const questionId = Number(questionIdStr);
+        const currentValue = values[String(questionId)];
+        if (currentValue === void 0 || currentValue === "" || currentValue === null) {
+          return false;
+        }
+        const normalizedCurrent = typeof currentValue === "object" && currentValue !== null && "id" in currentValue ? currentValue : currentValue;
+        const candidates = /* @__PURE__ */ new Set();
+        const addCandidate = (v) => {
+          if (v === void 0 || v === null) return;
+          const s = String(v).trim();
+          if (s) candidates.add(s);
+        };
+        const sourceQuestion = questions.find((q) => q.id === questionId);
+        if (typeof normalizedCurrent === "object" && normalizedCurrent !== null) {
+          addCandidate(normalizedCurrent.id);
+          addCandidate(normalizedCurrent.name);
+        } else {
+          addCandidate(normalizedCurrent);
+        }
+        if (sourceQuestion?.detail_type === "select" && sourceQuestion.options?.length) {
+          const currentStr = [...candidates][0] ?? "";
+          const optionById = sourceQuestion.options.find((o) => String(o.id) === currentStr);
+          const optionByName = sourceQuestion.options.find((o) => String(o.name).trim() === currentStr);
+          const opt = optionById ?? optionByName;
+          if (opt) {
+            addCandidate(opt.id);
+            addCandidate(opt.name);
+          }
+        }
+        const matchesScalar = (expected) => {
+          const expectedStr = String(expected).trim();
+          return candidates.has(expectedStr);
+        };
+        if (Array.isArray(expectedAnswer)) {
+          return expectedAnswer.some((v) => matchesScalar(v));
+        }
+        if (expectedAnswer && typeof expectedAnswer === "object") {
+          const expectedMap = expectedAnswer;
+          for (const c of candidates) {
+            if (Object.prototype.hasOwnProperty.call(expectedMap, c)) {
+              const flag = expectedMap[c];
+              return flag === void 0 ? true : !!flag;
+            }
+          }
+          return false;
+        }
+        return matchesScalar(expectedAnswer);
+      });
+    },
+    [values, questions]
+  );
+  const visibleQuestions = questions.filter(isQuestionVisible);
+  const validateField = useCallback((question, value) => {
+    if (question.detail_type === "heading") return null;
+    if (question.required) {
+      if (value === void 0 || value === "" || value === null) {
+        return `${question.name} is required`;
+      }
+      if (question.detail_type === "check" && !value) {
+        return `${question.name} must be checked`;
+      }
+    }
+    if (question.detail_type === "number" && value !== "" && value !== void 0) {
+      const numValue = Number(value);
+      if (question.settings?.min !== void 0 && numValue < question.settings.min) {
+        return `Minimum value is ${question.settings.min}`;
+      }
+      if (question.settings?.max !== void 0 && numValue > question.settings.max) {
+        return `Maximum value is ${question.settings.max}`;
+      }
+    }
+    return null;
+  }, []);
+  const validateAll = useCallback(() => {
+    const newErrors = {};
+    let isValid = true;
+    visibleQuestions.forEach((question) => {
+      const error = validateField(question, values[question.id]);
+      if (error) {
+        newErrors[question.id] = error;
+        isValid = false;
+      }
+    });
+    setErrors(newErrors);
+    return isValid;
+  }, [visibleQuestions, values, validateField]);
+  useEffect(() => {
+    const visibleIds = new Set(visibleQuestions.map((q) => q.id));
+    setErrors((prev) => {
+      let changed = false;
+      const next = { ...prev };
+      Object.keys(next).forEach((idStr) => {
+        const id = Number(idStr);
+        if (!visibleIds.has(id)) {
+          delete next[id];
+          changed = true;
+        }
+      });
+      return changed ? next : prev;
+    });
+  }, [visibleQuestions]);
+  const handleChange = (questionId, value) => {
+    setValues((prev) => ({ ...prev, [questionId]: value }));
+    setTouched((prev) => ({ ...prev, [questionId]: true }));
+    if (touched[questionId]) {
+      const question = questions.find((q) => q.id === questionId);
+      if (question) {
+        const error = validateField(question, value);
+        setErrors((prev) => {
+          if (error) {
+            return { ...prev, [questionId]: error };
+          }
+          const { [questionId]: _, ...rest } = prev;
+          return rest;
+        });
+      }
+    }
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const allTouched = {};
+    visibleQuestions.forEach((q) => {
+      allTouched[q.id] = true;
+    });
+    setTouched(allTouched);
+    if (validateAll()) {
+      const visibleValues = {};
+      visibleQuestions.forEach((q) => {
+        if (q.detail_type !== "heading" && values[q.id] !== void 0) {
+          visibleValues[q.id] = values[q.id];
+        }
+      });
+      onSubmit(visibleValues);
+    }
+  };
+  const defaultButton = "w-full mt-4 px-4 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors";
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className, noValidate: true, children: [
+    visibleQuestions.map((question) => /* @__PURE__ */ jsx(
+      FormField,
+      {
+        question,
+        value: values[question.id],
+        error: touched[question.id] ? errors[question.id] : void 0,
+        onChange: (value) => handleChange(question.id, value),
+        classNames
+      },
+      question.id
+    )),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "submit",
+        className: classNames?.button ?? defaultButton,
+        children: submitLabel
+      }
+    )
+  ] });
+}
+
+export { BookingForm };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/BookingForm.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import React, { useState, useEffect, useCallback } from 'react';\nimport type { Question, FormValues, FormErrors, BookingFormProps, BookingFormClassNames } from '../types';\n\n/** Merge base classes with optional custom classes */\nconst cx = (...classes: (string | undefined)[]) => classes.filter(Boolean).join(' ');\n\n/**\n * Renders a single form field based on question type\n */\nfunction FormField({\n  question,\n  value,\n  error,\n  onChange,\n  classNames,\n}: {\n  question: Question;\n  value: string | number | boolean | undefined;\n  error?: string;\n  onChange: (value: string | number | boolean) => void;\n  classNames?: BookingFormClassNames;\n}) {\n  const inputId = `question-${question.id}`;\n  const errorId = `${inputId}-error`;\n  const hasError = !!error;\n\n  // Default classes (can be overridden via classNames prop)\n  const defaultFieldWrapper = 'mb-4';\n  const defaultLabel = 'block text-sm font-medium mb-1 text-gray-700';\n  const defaultHeading = 'text-lg font-semibold text-gray-900 mt-4 mb-2 first:mt-0';\n  const defaultInput = 'w-full px-3 py-2 border rounded-md text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-offset-1 border-gray-300 focus:ring-blue-500 focus:border-blue-500';\n  const defaultInputError = 'border-red-500 focus:ring-red-500';\n  const defaultCheckbox = 'mt-1 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500';\n  const defaultHelpText = 'mt-1 text-xs text-gray-500';\n  const defaultErrorText = 'mt-1 text-xs text-red-600';\n\n  const inputClasses = hasError\n    ? cx(classNames?.input ?? defaultInput, classNames?.inputError ?? defaultInputError)\n    : cx(classNames?.input ?? defaultInput);\n\n  const labelClasses = classNames?.label ?? defaultLabel;\n  const checkboxLabelClasses = cx('text-sm', classNames?.label ?? 'text-gray-700');\n\n  const renderLabel = () => {\n    if (question.detail_type === 'heading') return null;\n    return (\n      <label htmlFor={inputId} className={labelClasses}>\n        {question.name}\n        {question.required && <span className=\"text-red-500 ml-1\" aria-hidden=\"true\">*</span>}\n      </label>\n    );\n  };\n\n  const renderHelpText = () => {\n    if (!question.help_text) return null;\n    return <p className={classNames?.helpText ?? defaultHelpText}>{question.help_text}</p>;\n  };\n\n  const renderError = () => {\n    if (!error) return null;\n    return (\n      <p id={errorId} className={classNames?.errorText ?? defaultErrorText} role=\"alert\">\n        {error}\n      </p>\n    );\n  };\n\n  const ariaProps = {\n    'aria-invalid': hasError ? true : undefined,\n    'aria-describedby': hasError ? errorId : undefined,\n    'aria-required': question.required || undefined,\n  };\n\n  switch (question.detail_type) {\n    case 'heading':\n      return (\n        <h3 className={classNames?.heading ?? defaultHeading}>\n          {question.name}\n        </h3>\n      );\n\n    case 'text_field':\n      return (\n        <div className={classNames?.fieldWrapper ?? defaultFieldWrapper}>\n          {renderLabel()}\n          <input\n            id={inputId}\n            type=\"text\"\n            value={(value as string) || ''}\n            onChange={(e) => onChange(e.target.value)}\n            placeholder={question.settings?.placeholder}\n            className={inputClasses}\n            {...ariaProps}\n          />\n          {renderHelpText()}\n          {renderError()}\n        </div>\n      );\n\n    case 'text_area':\n      return (\n        <div className={classNames?.fieldWrapper ?? defaultFieldWrapper}>\n          {renderLabel()}\n          <textarea\n            id={inputId}\n            value={(value as string) || ''}\n            onChange={(e) => onChange(e.target.value)}\n            placeholder={question.settings?.placeholder}\n            rows={4}\n            className={inputClasses}\n            {...ariaProps}\n          />\n          {renderHelpText()}\n          {renderError()}\n        </div>\n      );\n\n    case 'select':\n      return (\n        <div className={classNames?.fieldWrapper ?? defaultFieldWrapper}>\n          {renderLabel()}\n          <select\n            id={inputId}\n            value={(value as string | number) ?? ''}\n            onChange={(e) => onChange(e.target.value)}\n            className={inputClasses}\n            {...ariaProps}\n          >\n            <option value=\"\">Select an option</option>\n            {question.options?.map((option) => (\n              <option key={option.id} value={option.id}>\n                {option.name}\n              </option>\n            ))}\n          </select>\n          {renderHelpText()}\n          {renderError()}\n        </div>\n      );\n\n    case 'date':\n      return (\n        <div className={classNames?.fieldWrapper ?? defaultFieldWrapper}>\n          {renderLabel()}\n          <input\n            id={inputId}\n            type=\"date\"\n            value={(value as string) || ''}\n            onChange={(e) => onChange(e.target.value)}\n            min={question.settings?.min?.toString()}\n            max={question.settings?.max?.toString()}\n            className={inputClasses}\n            {...ariaProps}\n          />\n          {renderHelpText()}\n          {renderError()}\n        </div>\n      );\n\n    case 'number':\n      return (\n        <div className={classNames?.fieldWrapper ?? defaultFieldWrapper}>\n          {renderLabel()}\n          <input\n            id={inputId}\n            type=\"number\"\n            value={(value as number) ?? ''}\n            onChange={(e) => onChange(e.target.value ? Number(e.target.value) : '')}\n            min={question.settings?.min}\n            max={question.settings?.max}\n            placeholder={question.settings?.placeholder}\n            className={inputClasses}\n            {...ariaProps}\n          />\n          {renderHelpText()}\n          {renderError()}\n        </div>\n      );\n\n    case 'check':\n      return (\n        <div className={classNames?.fieldWrapper ?? defaultFieldWrapper}>\n          <div className=\"flex items-start gap-2\">\n            <input\n              id={inputId}\n              type=\"checkbox\"\n              checked={!!value}\n              onChange={(e) => onChange(e.target.checked)}\n              className={classNames?.checkbox ?? defaultCheckbox}\n              {...ariaProps}\n            />\n            <label htmlFor={inputId} className={checkboxLabelClasses}>\n              {question.name}\n              {question.required && <span className=\"text-red-500 ml-1\" aria-hidden=\"true\">*</span>}\n            </label>\n          </div>\n          {renderHelpText()}\n          {renderError()}\n        </div>\n      );\n\n    default:\n      return null;\n  }\n}\n\n/**\n * BookingForm - A dynamic form component for booking questions\n *\n * @example\n * ```tsx\n * const questions: Question[] = [\n *   { id: 1, name: 'Personal Details', detail_type: 'heading' },\n *   { id: 2, name: 'Full Name', detail_type: 'text_field', required: true },\n *   { id: 3, name: 'Email', detail_type: 'text_field', required: true },\n * ];\n *\n * <BookingForm\n *   questions={questions}\n *   onSubmit={(values) => console.log(values)}\n * />\n * ```\n */\nexport function BookingForm({\n  questions,\n  onSubmit,\n  submitLabel = 'Submit',\n  className = '',\n  labelClassName,\n  classNames: classNamesProp,\n}: BookingFormProps) {\n  // Merge deprecated labelClassName into classNames for backwards compatibility\n  const classNames: BookingFormClassNames = {\n    ...classNamesProp,\n    label: classNamesProp?.label ?? labelClassName,\n  };\n  const [values, setValues] = useState<FormValues>({});\n  const [errors, setErrors] = useState<FormErrors>({});\n  const [touched, setTouched] = useState<Record<number, boolean>>({});\n\n\n  // Check if a question should be visible based on conditional settings\n  const isQuestionVisible = useCallback(\n    (question: Question): boolean => {\n      const { settings } = question;\n      if (!settings?.conditional_answers) {\n        return true;\n      }\n\n      // Check all conditions in conditional_answers\n      // Each entry is { questionId: expectedAnswerValue }\n      const conditionEntries = Object.entries(settings.conditional_answers as Record<string, unknown>);\n      if (conditionEntries.length === 0) {\n        return true;\n      }\n\n      // Question is visible if ANY condition is met\n      return conditionEntries.some(([questionIdStr, expectedAnswer]) => {\n        const questionId = Number(questionIdStr);\n        const currentValue = (values as Record<string, unknown>)[String(questionId)];\n\n        if (currentValue === undefined || currentValue === '' || currentValue === null) {\n          return false;\n        }\n\n        // Selects typically store the option id (as string), but allow `{ id, name }` objects too\n        const normalizedCurrent =\n          typeof currentValue === 'object' && currentValue !== null && 'id' in (currentValue as any)\n            ? (currentValue as any)\n            : currentValue;\n\n        // Build a set of candidate strings for comparison.\n        // For select questions we support matching by BOTH option id and option name.\n        const candidates = new Set<string>();\n\n        const addCandidate = (v: unknown) => {\n          if (v === undefined || v === null) return;\n          const s = String(v).trim();\n          if (s) candidates.add(s);\n        };\n\n        const sourceQuestion = questions.find((q) => q.id === questionId);\n\n        if (typeof normalizedCurrent === 'object' && normalizedCurrent !== null) {\n          addCandidate((normalizedCurrent as any).id);\n          addCandidate((normalizedCurrent as any).name);\n        } else {\n          addCandidate(normalizedCurrent);\n        }\n\n        if (sourceQuestion?.detail_type === 'select' && sourceQuestion.options?.length) {\n          // Try to resolve the selected option via id or name.\n          const currentStr = [...candidates][0] ?? '';\n          const optionById = sourceQuestion.options.find((o) => String(o.id) === currentStr);\n          const optionByName = sourceQuestion.options.find((o) => String(o.name).trim() === currentStr);\n          const opt = optionById ?? optionByName;\n          if (opt) {\n            addCandidate(opt.id);\n            addCandidate(opt.name);\n          }\n        }\n\n        const matchesScalar = (expected: unknown) => {\n          const expectedStr = String(expected).trim();\n          return candidates.has(expectedStr);\n        };\n\n        // Support multiple expected formats:\n        // - scalar: \"Consultation\" / \"1\" / 1 / true\n        // - array: [\"Consultation\", \"Follow-up\"]\n        // - map/object: { \"Consultation\": true }\n        if (Array.isArray(expectedAnswer)) {\n          return expectedAnswer.some((v) => matchesScalar(v));\n        }\n\n        if (expectedAnswer && typeof expectedAnswer === 'object') {\n          const expectedMap = expectedAnswer as Record<string, unknown>;\n          for (const c of candidates) {\n            if (Object.prototype.hasOwnProperty.call(expectedMap, c)) {\n              const flag = expectedMap[c];\n              return flag === undefined ? true : !!flag;\n            }\n          }\n          return false;\n        }\n\n        return matchesScalar(expectedAnswer);\n      });\n    },\n    [values, questions]\n  );\n\n  // Get visible questions\n  const visibleQuestions = questions.filter(isQuestionVisible);\n\n\n  // Validate a single field\n  const validateField = useCallback((question: Question, value: FormValues[number]): string | null => {\n    if (question.detail_type === 'heading') return null;\n\n    if (question.required) {\n      if (value === undefined || value === '' || value === null) {\n        return `${question.name} is required`;\n      }\n      if (question.detail_type === 'check' && !value) {\n        return `${question.name} must be checked`;\n      }\n    }\n\n    if (question.detail_type === 'number' && value !== '' && value !== undefined) {\n      const numValue = Number(value);\n      if (question.settings?.min !== undefined && numValue < question.settings.min) {\n        return `Minimum value is ${question.settings.min}`;\n      }\n      if (question.settings?.max !== undefined && numValue > question.settings.max) {\n        return `Maximum value is ${question.settings.max}`;\n      }\n    }\n\n    return null;\n  }, []);\n\n  // Validate all visible fields\n  const validateAll = useCallback((): boolean => {\n    const newErrors: FormErrors = {};\n    let isValid = true;\n\n    visibleQuestions.forEach((question) => {\n      const error = validateField(question, values[question.id]);\n      if (error) {\n        newErrors[question.id] = error;\n        isValid = false;\n      }\n    });\n\n    setErrors(newErrors);\n    return isValid;\n  }, [visibleQuestions, values, validateField]);\n\n  // Clear errors for hidden questions\n  useEffect(() => {\n    const visibleIds = new Set(visibleQuestions.map((q) => q.id));\n\n    setErrors((prev) => {\n      let changed = false;\n      const next = { ...prev };\n\n      Object.keys(next).forEach((idStr) => {\n        const id = Number(idStr);\n        if (!visibleIds.has(id)) {\n          delete next[id];\n          changed = true;\n        }\n      });\n\n      return changed ? next : prev;\n    });\n  }, [visibleQuestions]);\n\n  const handleChange = (questionId: number, value: string | number | boolean) => {\n    setValues((prev) => ({ ...prev, [questionId]: value }));\n    setTouched((prev) => ({ ...prev, [questionId]: true }));\n\n    // Clear error on change if touched\n    if (touched[questionId]) {\n      const question = questions.find((q) => q.id === questionId);\n      if (question) {\n        const error = validateField(question, value);\n        setErrors((prev) => {\n          if (error) {\n            return { ...prev, [questionId]: error };\n          }\n          const { [questionId]: _, ...rest } = prev;\n          return rest;\n        });\n      }\n    }\n  };\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n\n    // Mark all fields as touched\n    const allTouched: Record<number, boolean> = {};\n    visibleQuestions.forEach((q) => {\n      allTouched[q.id] = true;\n    });\n    setTouched(allTouched);\n\n    if (validateAll()) {\n      // Only include visible question values\n      const visibleValues: FormValues = {};\n      visibleQuestions.forEach((q) => {\n        if (q.detail_type !== 'heading' && values[q.id] !== undefined) {\n          visibleValues[q.id] = values[q.id];\n        }\n      });\n      onSubmit(visibleValues);\n    }\n  };\n\n  const defaultButton = 'w-full mt-4 px-4 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors';\n\n  return (\n    <form onSubmit={handleSubmit} className={className} noValidate>\n      {visibleQuestions.map((question) => (\n        <FormField\n          key={question.id}\n          question={question}\n          value={values[question.id]}\n          error={touched[question.id] ? errors[question.id] : undefined}\n          onChange={(value) => handleChange(question.id, value)}\n          classNames={classNames}\n        />\n      ))}\n      <button\n        type=\"submit\"\n        className={classNames?.button ?? defaultButton}\n      >\n        {submitLabel}\n      </button>\n    </form>\n  );\n}\n\nexport default BookingForm;\n"]}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@bookinglab/booking-ui-react",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "React UI components for BookingLab booking journeys",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "booking",
+    "bookinglab",
+    "scheduling",
+    "appointments"
+  ],
+  "author": "BookingLab",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bookinglab/booking-ui-react"
+  },
+  "bugs": {
+    "url": "https://github.com/bookinglab/booking-ui-react/issues"
+  },
+  "homepage": "https://github.com/bookinglab/booking-ui-react#readme",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.8.0"
+  }
+}