Form (TanStack)

{
  "registries": {
    "@uxio": "https://ui.uxio.dev/r/styles/{style}/{name}.json"
  }
}

npx shadcn@latest add @uxio/form

import { useForm } from "@tanstack/react-form"
import { z } from "zod"

import { Form } from "@/components/ui/form"

const loginSchema = z.object({
  email: z.string(),
  password: z.string(),
})

export function LoginForm() {
  const form = useForm({
    defaultValues: {
      email: "",
      password: "",
    } as z.infer<typeof loginSchema>,
    validators: {
      onSubmit: loginSchema,
    },
    onSubmit: async ({ value }) => {
      // login
    },
  })

  return (
    <Form form={form}>
      <form.Field
        name="email"
        children={(field) => {
          //
        }}
      />
    </Form>
  )
}

import { useStore } from "@tanstack/react-form"
import { z } from "zod"

import { Button } from "@/components/ui/button"
import { useFormContext } from "@/components/ui/form"

const loginSchema = z.object({
  email: z.string(),
  password: z.string(),
})

function FormSubmit() {
  const form = useFormContext<typeof loginSchema>()
  const isSubmitting = useStore(form.store, (state) => state.isSubmitting)

  return (
    <Button loading={isSubmitting} type="submit">
      Login
    </Button>
  )
}