Form

1"use client";
2 
3import "./form.css";
4import { Form as BaseForm } from "@base-ui/react/form";
5import type React from "react";
6import { cn } from "tailwind-variants";
7 
8import { FormContext } from "./form.context";
9import { formVariants, type FormVariants } from "./form.variants";
10 
11export type FormProps = FormVariants & React.ComponentProps<typeof BaseForm>;
12 
13export const FormRoot = ({ children, className, layout, ...props }: FormProps) => {
14  const slots = formVariants({ layout });
15 
16  return (
17    <FormContext.Provider value={{ slots }}>
18      <BaseForm className={cn(slots.root(), className)} {...props}>
19        {children}
20      </BaseForm>
21    </FormContext.Provider>
22  );
23};