Form

1import type { Component, JSX } from "solid-js";
2import { createContext, splitProps, useContext } from "solid-js";
3import { cn } from "~/lib/utils";
4 
5// ---------------------------------------------------------------------------
6// Form — thin wrappers that compose with @modular-forms/solid
7//
8// Usage (with @modular-forms/solid):
9//   const [form, { Form, Field }] = createForm<LoginForm>();
10//   <Form onSubmit={handleSubmit}>
11//     <Field name="email">
12//       {(field, props) => (
13//         <FormField>
14//           <FormLabel for={field.name}>Email</FormLabel>
15//           <Input {...props} type="email" />
16//           <Show when={field.error}>
17//             <FormMessage>{field.error}</FormMessage>
18//           </Show>
19//         </FormField>
20//       )}
21//     </Field>
22//   </Form>
23// ---------------------------------------------------------------------------
24 
25const FormFieldContext = createContext<{ name?: string }>({});
26 
27export const FormField: Component<JSX.HTMLAttributes<HTMLDivElement> & { name?: string }> = (
28  props,
29) => {
30  const [local, rest] = splitProps(props, ["class", "name"]);
31  return (
32    <FormFieldContext.Provider value={local.name !== undefined ? { name: local.name } : {}}>
33      <div class={cn("space-y-2", local.class)} {...rest} />
34    </FormFieldContext.Provider>
35  );
36};
37 
38export const useFormField = () => useContext(FormFieldContext);
39 
40export type FormLabelProps = JSX.LabelHTMLAttributes<HTMLLabelElement> & {
41  error?: boolean;
42};
43 
44export const FormLabel: Component<FormLabelProps> = (props) => {
45  const [local, rest] = splitProps(props, ["class", "error"]);
46  return (
47    <label
48      class={cn(
49        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
50        local.error && "text-destructive",
51        local.class,
52      )}
53      {...rest}
54    />
55  );
56};
57 
58export const FormControl: Component<JSX.HTMLAttributes<HTMLDivElement>> = (props) => {
59  const [local, rest] = splitProps(props, ["class"]);
60  return <div class={cn("", local.class)} {...rest} />;
61};
62 
63export const FormDescription: Component<JSX.HTMLAttributes<HTMLParagraphElement>> = (props) => {
64  const [local, rest] = splitProps(props, ["class"]);
65  return <p class={cn("text-sm text-muted-foreground", local.class)} {...rest} />;
66};
67 
68export const FormMessage: Component<JSX.HTMLAttributes<HTMLParagraphElement>> = (props) => {
69  const [local, rest] = splitProps(props, ["class", "children"]);
70  if (!local.children) return null;
71// … truncated