feat(booker): animate step 1→2 with motion instead of custom SizeTransition

apps/ui/package.json

@@ -15,6 +15,7 @@
     "jotai": "^2.15.1",
     "lucide-react": "^0.555.0",
     "marked": "^18.0.5",
+    "motion": "12.42.0",
     "next": "16.2.5",
     "react": "^19.2.6",
     "react-day-picker": "^9.13.0",

apps/ui/public/r/cal-api.json

@@ -20,7 +20,7 @@
     },
     {
       "path": "registry/default/lib/cal-api/event-types.ts",
-      "content": "import \"server-only\";\n\nimport { calApi } from \"./client\";\nimport type { EventType } from \"./types\";\n\nconst EVENT_TYPES_API_VERSION = \"2024-06-14\";\n\nexport async function listEventTypes(params: {\n  username?: string;\n  usernames?: string[];\n  teamId?: number;\n  teamSlug?: string;\n  orgId?: number;\n  orgSlug?: string;\n  isTeamEvent?: boolean;\n  eventSlug?: string;\n}): Promise<EventType[]> {\n  const cacheKey =\n    params.teamId?.toString() ??\n    params.teamSlug ??\n    params.usernames?.join(\",\") ??\n    params.username ??\n    \"all\";\n\n  return calApi<EventType[]>(\"/event-types\", {\n    apiVersion: EVENT_TYPES_API_VERSION,\n    next: { revalidate: 60, tags: [\"event-types\", cacheKey] },\n    query: {\n      eventSlug: params.eventSlug,\n      isTeamEvent: params.isTeamEvent,\n      orgId: params.orgId,\n      orgSlug: params.orgSlug,\n      teamId: params.teamId,\n      teamSlug: params.teamSlug,\n      username: params.username,\n      usernames: params.usernames?.join(\",\"),\n    },\n  });\n}\n\nexport async function getEventType(params: {\n  username: string;\n  eventSlug: string;\n  orgId?: number;\n  orgSlug?: string;\n}): Promise<EventType | null> {\n  const matches = await listEventTypes(params);\n  return matches[0] ?? null;\n}\n\nexport async function getTeamEventType(params: {\n  teamId: number;\n  eventSlug: string;\n  orgId?: number;\n}): Promise<EventType | null> {\n  const matches = await listEventTypes({\n    eventSlug: params.eventSlug,\n    isTeamEvent: true,\n    orgId: params.orgId,\n    teamId: params.teamId,\n  });\n  return matches[0] ?? null;\n}\n\nexport async function getTeamSlugEventType(params: {\n  teamSlug: string;\n  eventSlug: string;\n  orgId?: number;\n  orgSlug?: string;\n}): Promise<EventType | null> {\n  const matches = await listEventTypes({\n    eventSlug: params.eventSlug,\n    isTeamEvent: true,\n    orgId: params.orgId,\n    orgSlug: params.orgSlug,\n    teamSlug: params.teamSlug,\n  });\n  return matches[0] ?? null;\n}\n\nexport async function getDynamicEventType(params: {\n  usernames: string[];\n  orgId?: number;\n  orgSlug?: string;\n  eventSlug?: string;\n}): Promise<EventType | null> {\n  const matches = await listEventTypes({\n    eventSlug: params.eventSlug ?? \"dynamic\",\n    orgId: params.orgId,\n    orgSlug: params.orgSlug,\n    usernames: params.usernames,\n  });\n  return matches[0] ?? null;\n}\n\nexport async function getEventTypeById(\n  eventTypeId: number,\n): Promise<EventType> {\n  return calApi<EventType>(`/event-types/${eventTypeId}`, {\n    apiVersion: EVENT_TYPES_API_VERSION,\n    next: { revalidate: 60, tags: [`event-type-${eventTypeId}`] },\n  });\n}\n",
+      "content": "import \"server-only\";\n\nimport { calApi } from \"./client\";\nimport type { EventType } from \"./types\";\n\nconst EVENT_TYPES_API_VERSION = \"2024-06-14\";\n\nfunction findEventTypeBySlug(\n  matches: EventType[],\n  eventSlug: string,\n): EventType | null {\n  return matches.find((event) => event.slug === eventSlug) ?? null;\n}\n\nexport async function listEventTypes(params: {\n  username?: string;\n  usernames?: string[];\n  teamId?: number;\n  teamSlug?: string;\n  orgId?: number;\n  orgSlug?: string;\n  isTeamEvent?: boolean;\n  eventSlug?: string;\n}): Promise<EventType[]> {\n  const cacheKey =\n    params.teamId?.toString() ??\n    params.teamSlug ??\n    params.usernames?.join(\",\") ??\n    params.username ??\n    \"all\";\n\n  return calApi<EventType[]>(\"/event-types\", {\n    apiVersion: EVENT_TYPES_API_VERSION,\n    next: { revalidate: 60, tags: [\"event-types\", cacheKey] },\n    query: {\n      eventSlug: params.eventSlug,\n      isTeamEvent: params.isTeamEvent,\n      orgId: params.orgId,\n      orgSlug: params.orgSlug,\n      teamId: params.teamId,\n      teamSlug: params.teamSlug,\n      username: params.username,\n      usernames: params.usernames?.join(\",\"),\n    },\n  });\n}\n\nexport async function getEventType(params: {\n  username: string;\n  eventSlug: string;\n  orgId?: number;\n  orgSlug?: string;\n}): Promise<EventType | null> {\n  const matches = await listEventTypes(params);\n  return findEventTypeBySlug(matches, params.eventSlug);\n}\n\nexport async function getTeamEventType(params: {\n  teamId: number;\n  eventSlug: string;\n  orgId?: number;\n}): Promise<EventType | null> {\n  const matches = await listEventTypes({\n    eventSlug: params.eventSlug,\n    isTeamEvent: true,\n    orgId: params.orgId,\n    teamId: params.teamId,\n  });\n  return findEventTypeBySlug(matches, params.eventSlug);\n}\n\nexport async function getTeamSlugEventType(params: {\n  teamSlug: string;\n  eventSlug: string;\n  orgId?: number;\n  orgSlug?: string;\n}): Promise<EventType | null> {\n  const matches = await listEventTypes({\n    eventSlug: params.eventSlug,\n    isTeamEvent: true,\n    orgId: params.orgId,\n    orgSlug: params.orgSlug,\n    teamSlug: params.teamSlug,\n  });\n  return findEventTypeBySlug(matches, params.eventSlug);\n}\n\nexport async function getDynamicEventType(params: {\n  usernames: string[];\n  orgId?: number;\n  orgSlug?: string;\n  eventSlug?: string;\n}): Promise<EventType | null> {\n  const eventSlug = params.eventSlug ?? \"dynamic\";\n  const matches = await listEventTypes({\n    eventSlug,\n    orgId: params.orgId,\n    orgSlug: params.orgSlug,\n    usernames: params.usernames,\n  });\n  return findEventTypeBySlug(matches, eventSlug);\n}\n\nexport async function getEventTypeById(\n  eventTypeId: number,\n): Promise<EventType> {\n  return calApi<EventType>(`/event-types/${eventTypeId}`, {\n    apiVersion: EVENT_TYPES_API_VERSION,\n    next: { revalidate: 60, tags: [`event-type-${eventTypeId}`] },\n  });\n}\n",
       "type": "registry:lib",
       "target": "lib/cal-api/event-types.ts"
     },
@@ -38,9 +38,15 @@
     },
     {
       "path": "registry/default/lib/cal-api/types.ts",
-      "content": "export type ApiSuccess<T> = {\n  status: \"success\";\n  data: T;\n};\n\nexport type ApiError = {\n  status: \"error\";\n  timestamp?: string;\n  path?: string;\n  error: {\n    code: string;\n    message: string;\n    details?: unknown;\n  };\n};\n\nexport type ApiResponse<T> = ApiSuccess<T> | ApiError;\n\nexport type EventTypeLocation = {\n  type: string;\n  address?: string;\n  link?: string;\n  hostPhoneNumber?: string;\n  displayLocationPublicly?: boolean;\n};\n\nexport type EventTypeOwner = {\n  id: number;\n  username: string;\n  name?: string | null;\n  avatarUrl?: string | null;\n  weekStart?: string;\n  timeZone?: string;\n};\n\nexport type EventTypeTeam = {\n  id: number;\n  slug: string;\n  name: string;\n  bannerUrl?: string | null;\n  logoUrl?: string | null;\n};\n\nexport type EventType = {\n  id: number;\n  slug: string;\n  title: string;\n  description?: string | null;\n  lengthInMinutes: number;\n  locations: EventTypeLocation[];\n  bookingFields?: BookingField[];\n  disableGuests?: boolean;\n  hidden?: boolean;\n  requiresConfirmation?: boolean;\n  isInstantEvent?: boolean;\n  ownerId?: number;\n  teamId?: number;\n  team?: EventTypeTeam;\n  users?: EventTypeOwner[];\n  hosts?: EventTypeOwner[];\n  metadata?: Record<string, unknown>;\n};\n\nexport type BookingFieldType =\n  | \"name\"\n  | \"email\"\n  | \"phone\"\n  | \"text\"\n  | \"textarea\"\n  | \"number\"\n  | \"select\"\n  | \"multiselect\"\n  | \"checkbox\"\n  | \"radio\"\n  | \"boolean\"\n  | \"url\"\n  | \"address\";\n\nexport type BookingField = {\n  slug: string;\n  type: BookingFieldType;\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  disableOnPrefill?: boolean;\n  hidden?: boolean;\n  options?: Array<{ label: string; value: string }>;\n};\n\nexport type Slot = {\n  start: string;\n  attendees?: number;\n  bookingUid?: string;\n};\n\nexport type AvailableSlots = Record<string, Slot[]>;\n\nexport type BookingAttendee = {\n  name: string;\n  email: string;\n  timeZone: string;\n  language?: string;\n  phoneNumber?: string;\n};\n\nexport type Booking = {\n  uid: string;\n  id: number;\n  title: string;\n  status: \"accepted\" | \"pending\" | \"cancelled\" | \"rejected\" | \"awaiting_host\";\n  start: string;\n  end: string;\n  duration: number;\n  eventTypeId: number;\n  eventType?: { id: number; slug: string; title?: string };\n  attendees: BookingAttendee[];\n  hosts: Array<{ id: number; name: string; email: string; username?: string }>;\n  meetingUrl?: string | null;\n  location?: string;\n  absentHost?: boolean;\n  createdAt?: string;\n  updatedAt?: string;\n  metadata?: Record<string, unknown>;\n  rescheduledFromUid?: string;\n};\n\nexport type CreateBookingInput = {\n  start: string;\n  eventTypeId: number;\n  attendee: BookingAttendee;\n  guests?: string[];\n  bookingFieldsResponses?: Record<string, unknown>;\n  location?: string;\n  metadata?: Record<string, unknown>;\n  lengthInMinutes?: number;\n};\n",
+      "content": "export type ApiSuccess<T> = {\n  status: \"success\";\n  data: T;\n};\n\nexport type ApiError = {\n  status: \"error\";\n  timestamp?: string;\n  path?: string;\n  error: {\n    code: string;\n    message: string;\n    details?: unknown;\n  };\n};\n\nexport type ApiResponse<T> = ApiSuccess<T> | ApiError;\n\nexport type EventTypeLocation = {\n  type: string;\n  address?: string;\n  link?: string;\n  hostPhoneNumber?: string;\n  displayLocationPublicly?: boolean;\n};\n\nexport type EventTypeOwner = {\n  id: number;\n  username: string;\n  name?: string | null;\n  avatarUrl?: string | null;\n  weekStart?: string;\n  timeZone?: string;\n};\n\nexport type EventTypeTeam = {\n  id: number;\n  slug: string;\n  name: string;\n  bannerUrl?: string | null;\n  logoUrl?: string | null;\n};\n\nexport type EventType = {\n  id: number;\n  slug: string;\n  title: string;\n  description?: string | null;\n  lengthInMinutes: number;\n  locations: EventTypeLocation[];\n  bookingFields?: BookingField[];\n  disableGuests?: boolean;\n  hidden?: boolean;\n  requiresConfirmation?: boolean;\n  isInstantEvent?: boolean;\n  ownerId?: number;\n  teamId?: number;\n  team?: EventTypeTeam;\n  users?: EventTypeOwner[];\n  hosts?: EventTypeOwner[];\n  metadata?: Record<string, unknown>;\n};\n\nexport type BookingFieldType =\n  | \"name\"\n  | \"email\"\n  | \"phone\"\n  | \"text\"\n  | \"textarea\"\n  | \"number\"\n  | \"select\"\n  | \"multiselect\"\n  | \"checkbox\"\n  | \"radio\"\n  | \"boolean\"\n  | \"url\"\n  | \"address\";\n\nexport type BookingField = {\n  slug: string;\n  type: BookingFieldType;\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  disableOnPrefill?: boolean;\n  hidden?: boolean;\n  options?: Array<{ label: string; value: string }>;\n};\n\nexport type Slot = {\n  start: string;\n  attendees?: number;\n  bookingUid?: string;\n};\n\nexport type AvailableSlots = Record<string, Slot[]>;\n\nexport type BookingAttendee = {\n  name: string;\n  email: string;\n  timeZone: string;\n  language?: string;\n  phoneNumber?: string;\n};\n\nexport type Booking = {\n  uid: string;\n  id: number;\n  title: string;\n  status: \"accepted\" | \"pending\" | \"cancelled\" | \"rejected\" | \"awaiting_host\";\n  start: string;\n  end: string;\n  duration: number;\n  eventTypeId: number;\n  eventType?: { id: number; slug: string; title?: string };\n  attendees: BookingAttendee[];\n  hosts: Array<{ id: number; name: string; email: string; username?: string }>;\n  meetingUrl?: string | null;\n  location?: string;\n  absentHost?: boolean;\n  createdAt?: string;\n  updatedAt?: string;\n  metadata?: Record<string, unknown>;\n  rescheduledFromUid?: string;\n};\n\nexport type BookingLocationInput =\n  | { type: \"integration\"; integration: string }\n  | { type: \"address\" }\n  | { type: \"link\" }\n  | { type: \"phone\" }\n  | { type: \"organizersDefaultApp\" };\n\nexport type CreateBookingInput = {\n  start: string;\n  eventTypeId?: number;\n  eventTypeSlug?: string;\n  username?: string;\n  teamSlug?: string;\n  organizationSlug?: string;\n  attendee: BookingAttendee;\n  guests?: string[];\n  bookingFieldsResponses?: Record<string, unknown>;\n  location?: BookingLocationInput | string;\n  metadata?: Record<string, unknown>;\n  lengthInMinutes?: number;\n};\n",
       "type": "registry:lib",
       "target": "lib/cal-api/types.ts"
+    },
+    {
+      "path": "registry/default/lib/cal-api/bookings.ts",
+      "content": "import \"server-only\";\n\nimport { calApi } from \"./client\";\nimport type { Booking, CreateBookingInput } from \"./types\";\n\nexport async function createBooking(\n  input: CreateBookingInput,\n): Promise<Booking> {\n  return calApi<Booking>(\"/bookings\", {\n    body: input,\n    method: \"POST\",\n  });\n}\n",
+      "type": "registry:lib",
+      "target": "lib/cal-api/bookings.ts"
     }
   ],
   "type": "registry:lib"

apps/ui/public/r/registry.json

@@ -46,7 +46,6 @@
         "@coss/separator",
         "@coss/sheet",
         "@coss/sidebar",
-        "@coss/size-transition",
         "@coss/skeleton",
         "@coss/slider",
         "@coss/spinner",
@@ -729,19 +728,6 @@
       ],
       "type": "registry:ui"
     },
-    {
-      "dependencies": [
-        "@base-ui/react"
-      ],
-      "files": [
-        {
-          "path": "registry/default/ui/size-transition.tsx",
-          "type": "registry:ui"
-        }
-      ],
-      "name": "size-transition",
-      "type": "registry:ui"
-    },
     {
       "css": {
         "@keyframes skeleton": {
@@ -11343,7 +11329,8 @@
       "dependencies": [
         "isomorphic-dompurify",
         "marked",
-        "lucide-react"
+        "lucide-react",
+        "motion"
       ],
       "description": "A full scheduling flow powered by Cal.com API v2.",
       "files": [
@@ -11352,6 +11339,16 @@
           "target": "components/atoms/booker-1.tsx",
           "type": "registry:block"
         },
+        {
+          "path": "registry/default/atoms/booker/booker-confirm-form.tsx",
+          "target": "components/atoms/booker/booker-confirm-form.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/default/atoms/booker/booker-steps.tsx",
+          "target": "components/atoms/booker/booker-steps.tsx",
+          "type": "registry:component"
+        },
         {
           "path": "registry/default/atoms/booker/booker-calendar.tsx",
           "target": "components/atoms/booker/booker-calendar.tsx",
@@ -11430,14 +11427,17 @@
         "@coss/card",
         "@coss/combobox",
         "@coss/empty",
+        "@coss/field",
+        "@coss/form",
+        "@coss/group",
         "@coss/input",
         "@coss/label",
         "@coss/popover",
         "@coss/scroll-area",
         "@coss/select",
-        "@coss/size-transition",
         "@coss/skeleton",
         "@coss/switch",
+        "@coss/textarea",
         "@coss/tooltip"
       ],
       "meta": {
@@ -11739,6 +11739,11 @@
           "path": "registry/default/lib/cal-api/types.ts",
           "target": "lib/cal-api/types.ts",
           "type": "registry:lib"
+        },
+        {
+          "path": "registry/default/lib/cal-api/bookings.ts",
+          "target": "lib/cal-api/bookings.ts",
+          "type": "registry:lib"
         }
       ],
       "name": "cal-api",