@hanzo/booker 0.1.0

package/README.md

@@ -0,0 +1,78 @@
+# @hanzo/calendar
+
+Universal (web + native) scheduling UI for the [Hanzo Calendar](https://api.hanzo.ai/v1/calendar), built with [hanzogui](https://github.com/hanzoai/gui) primitives.
+
+One booking flow — event header → month grid → time slots → details → confirmation — that runs unchanged on the web (DOM) and React Native (iOS / Android). No raw HTML, no ad-hoc CSS: every surface is a hanzogui/Tamagui component styled with theme tokens, so it inherits the host app's theme, dark mode, and design system.
+
+## Install
+
+```sh
+bun add @hanzo/calendar
+# peer deps: hanzogui, react (and react-native for native targets)
+```
+
+Render inside a `GuiProvider` (from `hanzogui`) so tokens and themes resolve.
+
+## Usage
+
+```tsx
+import { GuiProvider } from 'hanzogui'
+import { Booker } from '@hanzo/calendar'
+import config from './gui.config' // your createGui(...) config
+
+export function BookMeeting() {
+  return (
+    <GuiProvider config={config} defaultTheme="light">
+      <Booker
+        host="hanzo"
+        eventSlug="intro"
+        onBooked={(booking) => console.log('booked', booking.uid)}
+      />
+    </GuiProvider>
+  )
+}
+```
+
+That's the whole integration. `Booker` fetches the public event type, renders a navigable month calendar, loads availability for the visible range, converts UTC slots into the visitor's time zone (`Intl.DateTimeFormat().resolvedOptions().timeZone`), collects attendee details, and posts the booking — with loading, error, empty, and "slot just taken" (HTTP 409) states handled throughout.
+
+## Components
+
+| Component        | Purpose                                                                 |
+| ---------------- | ----------------------------------------------------------------------- |
+| `Booker`         | Full scheduling flow: event → month → times → details → confirmation.   |
+| `CalendarEmbed`  | Compact card for a marketing hero — soonest availability inline.        |
+| `Confirmation`   | Booking confirmation card; pass a `booking` or a `uid` to fetch one.    |
+| `EventHeader`, `MonthCalendar`, `TimeSlots`, `BookingForm` | Composable sub-views for a custom flow. |
+
+### Props
+
+`Booker` and `CalendarEmbed`:
+
+- `host` — calendar owner's username, e.g. `"hanzo"`.
+- `eventSlug` — event-type slug, e.g. `"intro"`.
+- `apiUrl?` — API base; defaults to `https://api.hanzo.ai/v1/calendar`.
+- `timeZone?` — visitor IANA zone; defaults to the browser/device zone.
+- `weekStartsOn?` — `0` (Sunday, default) or `1` (Monday).
+- `onBooked?(booking)` — called with the created booking.
+
+`Confirmation`:
+
+- `booking?` — a booking object, or
+- `uid?` — a booking id to fetch (with `apiUrl?`, `timeZone?`, `onDone?`).
+
+## Data & time helpers
+
+The pure, framework-free data plane (`fetchEventType`, `fetchSlots`, `createBooking`, `fetchBooking`, `cancelBooking`) and time plane (`visitorTimeZone`, `formatSlotTime`, `monthMatrix`, …) are exported for building a bespoke flow or a headless integration. The `useBooker` hook exposes the entire state machine.
+
+## Backend
+
+Speaks the Hanzo Calendar API (Cal API-v2 shapes):
+
+- `GET  /atoms/event-types/{slug}/public?username={host}`
+- `GET  /slots/available?eventTypeSlug=&usernameList=&startTime=&endTime=&timeZone=`
+- `POST /bookings` (`cal-api-version: 2024-08-13`)
+- `GET  /bookings/{uid}` · `POST /bookings/{uid}/cancel`
+
+## License
+
+BSD-3-Clause © Hanzo AI

package/dist/cjs/Booker.cjs

@@ -0,0 +1,153 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var Booker_exports = {};
+__export(Booker_exports, {
+  Booker: () => Booker
+});
+module.exports = __toCommonJS(Booker_exports);
+var import_hanzogui = require("hanzogui");
+var import_BookingForm = require("./BookingForm.cjs");
+var import_Confirmation = require("./Confirmation.cjs");
+var import_EventHeader = require("./EventHeader.cjs");
+var import_MonthCalendar = require("./MonthCalendar.cjs");
+var import_TimeSlots = require("./TimeSlots.cjs");
+var import_useBooker = require("./useBooker.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function Booker(props) {
+  const m = (0, import_useBooker.useBooker)(props);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.YStack, {
+    backgroundColor: "$background",
+    borderColor: "$borderColor",
+    borderWidth: 1,
+    borderRadius: "$6",
+    padding: "$4",
+    gap: "$4",
+    width: "100%",
+    maxWidth: 860,
+    alignSelf: "center",
+    children: m.event.loading ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(StatePanel, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.Spinner, {
+        size: "large",
+        color: "$color9"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.SizableText, {
+        size: "$3",
+        color: "$color10",
+        children: "Loading\u2026"
+      })]
+    }) : m.event.error || !m.event.data ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(StatePanel, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.SizableText, {
+        size: "$5",
+        fontWeight: "600",
+        color: "$color12",
+        children: "Couldn't load this event"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.SizableText, {
+        size: "$3",
+        color: "$color10",
+        textAlign: "center",
+        children: m.event.error ?? "The event type was not found."
+      })]
+    }) : m.phase === "done" && m.booking ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Confirmation.Confirmation, {
+      booking: m.booking,
+      timeZone: m.timeZone,
+      onDone: m.reset
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_hanzogui.YStack, {
+      gap: "$4",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_EventHeader.EventHeader, {
+        event: m.event.data,
+        host: props.host,
+        timeZone: m.timeZone,
+        compact: m.phase === "form"
+      }), m.phase === "form" && m.selectedSlot ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_BookingForm.BookingForm, {
+        slotIso: m.selectedSlot,
+        timeZone: m.timeZone,
+        eventLength: m.event.data.length,
+        submitting: m.submitting,
+        error: m.error,
+        onSubmit: m.submit,
+        onBack: m.back
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+        children: [m.conflict ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(JustTakenBanner, {}) : null, m.slots.error ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_hanzogui.SizableText, {
+          size: "$2",
+          color: "$red10",
+          children: ["Couldn't load availability: ", m.slots.error]
+        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_hanzogui.XStack, {
+          gap: "$5",
+          flexDirection: "column",
+          $sm: {
+            flexDirection: "row"
+          },
+          alignItems: "flex-start",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_MonthCalendar.MonthCalendar, {
+            viewDate: m.viewDate,
+            availableKeys: m.availableKeys,
+            selectedDay: m.selectedDay,
+            onSelectDay: m.selectDay,
+            onPrev: m.goPrevMonth,
+            onNext: m.goNextMonth,
+            atFirstMonth: m.atFirstMonth,
+            weekStartsOn: m.weekStartsOn,
+            loading: m.slots.loading
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeSlots.TimeSlots, {
+            dayKey: m.selectedDay,
+            slots: m.daySlots,
+            timeZone: m.timeZone,
+            onPick: m.selectSlot,
+            selectedIso: m.selectedSlot,
+            loading: m.slots.loading && !m.selectedDay
+          })]
+        }), m.availableKeys.size === 0 && !m.slots.loading && !m.slots.error ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.SizableText, {
+          size: "$3",
+          color: "$color10",
+          textAlign: "center",
+          children: "No availability this month \u2014 try the next month."
+        }) : null]
+      })]
+    })
+  });
+}
+function StatePanel({
+  children
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.YStack, {
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "$3",
+    padding: "$8",
+    minHeight: 220,
+    children
+  });
+}
+function JustTakenBanner() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.YStack, {
+    backgroundColor: "$yellow3",
+    borderColor: "$yellow6",
+    borderWidth: 1,
+    borderRadius: "$4",
+    padding: "$2.5",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.SizableText, {
+      size: "$2",
+      color: "$yellow11",
+      children: "That time was just taken. We refreshed the calendar \u2014 please pick another."
+    })
+  });
+}

package/dist/cjs/Booker.native.js

@@ -0,0 +1,158 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var Booker_exports = {};
+__export(Booker_exports, {
+  Booker: () => Booker
+});
+module.exports = __toCommonJS(Booker_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_hanzogui = require("hanzogui");
+var import_BookingForm = require("./BookingForm.native.js");
+var import_Confirmation = require("./Confirmation.native.js");
+var import_EventHeader = require("./EventHeader.native.js");
+var import_MonthCalendar = require("./MonthCalendar.native.js");
+var import_TimeSlots = require("./TimeSlots.native.js");
+var import_useBooker = require("./useBooker.native.js");
+function Booker(props) {
+  var m = (0, import_useBooker.useBooker)(props);
+  var _m_event_error;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.YStack, {
+    backgroundColor: "$background",
+    borderColor: "$borderColor",
+    borderWidth: 1,
+    borderRadius: "$6",
+    padding: "$4",
+    gap: "$4",
+    width: "100%",
+    maxWidth: 860,
+    alignSelf: "center",
+    children: m.event.loading ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(StatePanel, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.Spinner, {
+        size: "large",
+        color: "$color9"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.SizableText, {
+        size: "$3",
+        color: "$color10",
+        children: "Loading\u2026"
+      })]
+    }) : m.event.error || !m.event.data ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(StatePanel, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.SizableText, {
+        size: "$5",
+        fontWeight: "600",
+        color: "$color12",
+        children: "Couldn't load this event"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.SizableText, {
+        size: "$3",
+        color: "$color10",
+        textAlign: "center",
+        children: (_m_event_error = m.event.error) !== null && _m_event_error !== void 0 ? _m_event_error : "The event type was not found."
+      })]
+    }) : m.phase === "done" && m.booking ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Confirmation.Confirmation, {
+      booking: m.booking,
+      timeZone: m.timeZone,
+      onDone: m.reset
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_hanzogui.YStack, {
+      gap: "$4",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_EventHeader.EventHeader, {
+        event: m.event.data,
+        host: props.host,
+        timeZone: m.timeZone,
+        compact: m.phase === "form"
+      }), m.phase === "form" && m.selectedSlot ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_BookingForm.BookingForm, {
+        slotIso: m.selectedSlot,
+        timeZone: m.timeZone,
+        eventLength: m.event.data.length,
+        submitting: m.submitting,
+        error: m.error,
+        onSubmit: m.submit,
+        onBack: m.back
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+        children: [m.conflict ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(JustTakenBanner, {}) : null, m.slots.error ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_hanzogui.SizableText, {
+          size: "$2",
+          color: "$red10",
+          children: ["Couldn't load availability: ", m.slots.error]
+        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_hanzogui.XStack, {
+          gap: "$5",
+          flexDirection: "column",
+          $sm: {
+            flexDirection: "row"
+          },
+          alignItems: "flex-start",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_MonthCalendar.MonthCalendar, {
+            viewDate: m.viewDate,
+            availableKeys: m.availableKeys,
+            selectedDay: m.selectedDay,
+            onSelectDay: m.selectDay,
+            onPrev: m.goPrevMonth,
+            onNext: m.goNextMonth,
+            atFirstMonth: m.atFirstMonth,
+            weekStartsOn: m.weekStartsOn,
+            loading: m.slots.loading
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeSlots.TimeSlots, {
+            dayKey: m.selectedDay,
+            slots: m.daySlots,
+            timeZone: m.timeZone,
+            onPick: m.selectSlot,
+            selectedIso: m.selectedSlot,
+            loading: m.slots.loading && !m.selectedDay
+          })]
+        }), m.availableKeys.size === 0 && !m.slots.loading && !m.slots.error ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.SizableText, {
+          size: "$3",
+          color: "$color10",
+          textAlign: "center",
+          children: "No availability this month \u2014 try the next month."
+        }) : null]
+      })]
+    })
+  });
+}
+function StatePanel(param) {
+  var {
+    children
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.YStack, {
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "$3",
+    padding: "$8",
+    minHeight: 220,
+    children
+  });
+}
+function JustTakenBanner() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.YStack, {
+    backgroundColor: "$yellow3",
+    borderColor: "$yellow6",
+    borderWidth: 1,
+    borderRadius: "$4",
+    padding: "$2.5",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.SizableText, {
+      size: "$2",
+      color: "$yellow11",
+      children: "That time was just taken. We refreshed the calendar \u2014 please pick another."
+    })
+  });
+}
+//# sourceMappingURL=Booker.native.js.map

package/dist/cjs/Booker.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","Booker_exports","__export","Booker","module","exports","import_jsx_runtime","require","import_hanzogui","import_BookingForm","import_Confirmation","import_EventHeader","import_MonthCalendar","import_TimeSlots","import_useBooker","props","m","useBooker","_m_event_error","jsx","YStack","backgroundColor","borderColor","borderWidth","borderRadius","padding","gap","width","maxWidth","alignSelf","children","event","loading","jsxs","StatePanel","Spinner","size","color","SizableText","error","data","fontWeight","textAlign","phase","booking","Confirmation","timeZone","onDone","reset","EventHeader","host","compact","selectedSlot","BookingForm","slotIso","eventLength","length","submitting","onSubmit","submit","onBack","back","Fragment","conflict","JustTakenBanner","slots","XStack","flexDirection","$sm","alignItems","MonthCalendar","viewDate","availableKeys","selectedDay","onSelectDay","selectDay","onPrev","goPrevMonth","onNext","goNextMonth","atFirstMonth","weekStartsOn","TimeSlots","dayKey","daySlots","onPick","selectSlot","selectedIso","param"],"sources":["../../src/Booker.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/BookingForm.cjs

@@ -0,0 +1,197 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var BookingForm_exports = {};
+__export(BookingForm_exports, {
+  BookingForm: () => BookingForm
+});
+module.exports = __toCommonJS(BookingForm_exports);
+var import_react = require("react");
+var import_hanzogui = require("hanzogui");
+var import_time = require("./time.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function BookingForm({
+  slotIso,
+  timeZone,
+  eventLength,
+  submitting,
+  error,
+  onSubmit,
+  onBack
+}) {
+  const [name, setName] = (0, import_react.useState)("");
+  const [email, setEmail] = (0, import_react.useState)("");
+  const [notes, setNotes] = (0, import_react.useState)("");
+  const [touched, setTouched] = (0, import_react.useState)(false);
+  const nameValid = name.trim().length > 0;
+  const emailValid = EMAIL_RE.test(email.trim());
+  const valid = nameValid && emailValid;
+  const submit = () => {
+    setTouched(true);
+    if (!valid || submitting) return;
+    onSubmit({
+      name: name.trim(),
+      email: email.trim(),
+      notes: notes.trim() || void 0
+    });
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_hanzogui.YStack, {
+    gap: "$3",
+    flex: 1,
+    minWidth: 240,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_hanzogui.YStack, {
+      gap: "$1",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_hanzogui.XStack, {
+        alignItems: "center",
+        gap: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(BackLink, {
+          onPress: onBack
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.SizableText, {
+          size: "$5",
+          fontWeight: "700",
+          color: "$color12",
+          children: "Enter details"
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_hanzogui.SizableText, {
+        size: "$3",
+        color: "$color11",
+        children: [(0, import_time.formatBookingWhen)(slotIso, timeZone), " \xB7 ", eventLength, " min"]
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Field, {
+      label: "Name",
+      required: true,
+      invalid: touched && !nameValid,
+      hint: "Please enter your name",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.Input, {
+        value: name,
+        onChangeText: setName,
+        placeholder: "Ada Lovelace",
+        autoComplete: "name",
+        size: "$4"
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Field, {
+      label: "Email",
+      required: true,
+      invalid: touched && !emailValid,
+      hint: "Please enter a valid email",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.Input, {
+        value: email,
+        onChangeText: setEmail,
+        placeholder: "ada@example.com",
+        keyboardType: "email-address",
+        autoCapitalize: "none",
+        autoComplete: "email",
+        size: "$4"
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Field, {
+      label: "Notes",
+      hint: "Optional",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.TextArea, {
+        value: notes,
+        onChangeText: setNotes,
+        placeholder: "Anything that would help prepare?",
+        numberOfLines: 3,
+        size: "$4"
+      })
+    }), error ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.YStack, {
+      backgroundColor: "$red3",
+      borderColor: "$red6",
+      borderWidth: 1,
+      borderRadius: "$4",
+      padding: "$2.5",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.SizableText, {
+        size: "$2",
+        color: "$red11",
+        children: error
+      })
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_hanzogui.XStack, {
+      gap: "$2",
+      justifyContent: "flex-end",
+      marginTop: "$1",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.Button, {
+        size: "$4",
+        chromeless: true,
+        onPress: onBack,
+        disabled: submitting,
+        children: "Back"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.Button, {
+        size: "$4",
+        theme: "blue",
+        onPress: submit,
+        disabled: submitting || touched && !valid,
+        opacity: submitting ? 0.7 : 1,
+        children: submitting ? "Booking\u2026" : "Confirm booking"
+      })]
+    })]
+  });
+}
+function Field({
+  label,
+  required,
+  invalid,
+  hint,
+  children
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_hanzogui.YStack, {
+    gap: "$1.5",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_hanzogui.SizableText, {
+      size: "$2",
+      color: "$color11",
+      fontWeight: "600",
+      children: [label, required ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.SizableText, {
+        color: "$red10",
+        children: " *"
+      }) : null]
+    }), children, invalid && hint ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.SizableText, {
+      size: "$1",
+      color: "$red10",
+      children: hint
+    }) : null]
+  });
+}
+function BackLink({
+  onPress
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.YStack, {
+    width: 30,
+    height: 30,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "$4",
+    cursor: "pointer",
+    hoverStyle: {
+      backgroundColor: "$color4"
+    },
+    pressStyle: {
+      backgroundColor: "$color6"
+    },
+    onPress,
+    "aria-label": "Back",
+    role: "button",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.SizableText, {
+      size: "$6",
+      color: "$color11",
+      children: "\u2039"
+    })
+  });
+}