Inputs

<InlineStringInput
  initialValue={task.title}
  variables={(value) => ({ id: task.id, data: { title: value ?? undefined } })}
  mutation={orpc.tasks.update.mutationOptions()}
  strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().nullable() } }}
/>

<InlineNumberInput
  initialValue={task.priority ?? undefined}
  variables={(value) => ({ id: task.id, data: { priority: value ?? undefined } })}
  mutation={orpc.tasks.update.mutationOptions()}
  strategy={{ mutate: { on: "blur" }, validate: { blur: z.number().nullable() } }}
/>

<InlineDecimalInput
  initialValue={item.price ?? undefined}
  variables={(value) => ({ id: item.id, data: { price: value } })}
  mutation={orpc.quotationItems.update.mutationOptions()}
  strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().nullable() } }}
/>

<InlineDateProvider
  initialValue={project.deadline ?? null}
  variables={(value) => ({ id: project.id, data: { deadline: value ? new Date(value) : null } })}
  mutation={orpc.projects.update.mutationOptions()}
>
  <div className="relative h-full">
    <InlineDateInputField
      strategy={{
        mutate: { on: "blur" },
        validate: { blur: z.string().nullable() },
      }}
    />

    <InlineDatePickerField
      strategy={{
        mutate: { on: "commit" },
        validate: { commit: z.string().nullable() },
      }}
    />
  </div>
</InlineDateProvider>

<InlineDateTimeInput
  initialValue={execution.scheduledAt ?? undefined}
  variables={(value) => ({ id: execution.id, data: { scheduledAt: value ?? undefined } })}
  mutation={orpc.executions.update.mutationOptions()}
  strategy={{ mutate: { on: "blur" }, validate: { blur: z.date().nullable() } }}
/>

<InlineSelect
  initialValue={task.status}
  variables={(value) => ({ id: task.id, data: { status: value } })}
  mutation={orpc.tasks.update.mutationOptions()}
  strategy={{ mutate: { on: "commit" }, validate: { commit: z.string().nullable() } }}
>
  <InlineSelectTrigger className="w-full">
    <InlineSelectValue placeholder="Kies status" />
  </InlineSelectTrigger>
  <InlineSelectContent>
    <InlineSelectItem value="todo">Todo</InlineSelectItem>
    <InlineSelectItem value="doing">Doing</InlineSelectItem>
    <InlineSelectItem value="done">Done</InlineSelectItem>
  </InlineSelectContent>
</InlineSelect>

<InlineCombobox
  initialValue={task.assigneeId ?? undefined}
  items={employees.map((employee) => ({ id: employee.id, value: employee.user.name }))}
  variables={(value) => ({ id: task.id, data: { assigneeId: value ?? undefined } })}
  mutation={orpc.tasks.update.mutationOptions()}
  strategy={{ mutate: { on: "commit" }, validate: { commit: z.string().nullable() } }}
/>

<InlineComboboxDropdown
  initialValue={project.customerId ?? undefined}
  items={customers.map((customer) => ({ id: customer.id, value: customer.name }))}
  variables={(value) => ({ id: project.id, data: { customerId: value ?? undefined } })}
  mutation={orpc.projects.update.mutationOptions()}
  strategy={{ mutate: { on: "commit" }, validate: { commit: z.string().nullable() } }}
/>

<InlineEditor
  initialValue={project.notes ?? undefined}
  variables={(value) => ({ id: project.id, data: { notes: value ?? undefined } })}
  mutation={orpc.projects.update.mutationOptions()}
  strategy={{ mutate: { on: "change", debounceMs: 700 }, validate: { change: z.any() } }}
>
  <EditorMenuBubble />
  <EditorContent />
</InlineEditor>

<InlineSwitch
  initialValue={template.isActive}
  variables={(value) => ({ id: template.id, data: { isActive: value ?? false } })}
  mutation={orpc.templates.update.mutationOptions()}
  strategy={{ mutate: { on: "commit" }, validate: { commit: z.boolean().nullable() } }}
/>

<InlineToggle
  initialValue={user.isAdmin}
  variables={(value) => ({ id: user.id, data: { isAdmin: value ?? false } })}
  mutation={orpc.employees.update.mutationOptions()}
  strategy={{ mutate: { on: "commit" }, validate: { commit: z.boolean().nullable() } }}
>
  Admin
</InlineToggle>

<InlineRecipientInput
  contacts={contacts}
  initialValue={email.to ?? []}
  variables={(value) => ({ id: email.id, data: { to: value } })}
  mutation={orpc.emails.update.mutationOptions()}
  strategy={{ mutate: { on: "commit" }, validate: { commit: z.array(z.string()) } }}
/>