Form fix

packages/example/src/lib/form/TextFieldFormInput.tsx

@@ -1,16 +1,34 @@
-import { Callout, Flex, Spinner, TextField } from "@radix-ui/themes"
+import { Callout, Flex, Spinner, Switch, TextField } from "@radix-ui/themes"
 import { Array, Option } from "effect"
 import { Component, Form, Hooks } from "effect-fc"
 
 
-export interface TextFieldFormInputProps
+interface Props
 extends TextField.RootProps, Form.useInput.Options {
+    readonly optional?: false
     readonly field: Form.FormField<any, string>
 }
 
+interface OptionalProps
+extends Omit<TextField.RootProps, "defaultValue">, Form.useOptionalInput.Options<string> {
+    readonly optional: true
+    readonly field: Form.FormField<any, Option.Option<string>>
+}
+
+export type TextFieldFormInputProps = Props | OptionalProps
+
+
 export class TextFieldFormInput extends Component.makeUntraced("TextFieldFormInput")(
     function*(props: TextFieldFormInputProps) {
-        const { value, setValue } = yield* Form.useInput(props.field, props)
+        const input: (
+            | { readonly optional: true } & Form.useOptionalInput.Result<string>
+            | { readonly optional: false } & Form.useInput.Result<string>
+        ) = props.optional
+            // biome-ignore lint/correctness/useHookAtTopLevel: "optional" reactivity not supported
+            ? { optional: true, ...yield* Form.useOptionalInput(props.field, props) }
+            // biome-ignore lint/correctness/useHookAtTopLevel: "optional" reactivity not supported
+            : { optional: false, ...yield* Form.useInput(props.field, props) }
+
         const [issues, isValidating, isSubmitting] = yield* Hooks.useSubscribables(
             props.field.issuesSubscribable,
             props.field.isValidatingSubscribable,
@@ -20,11 +38,21 @@ export class TextFieldFormInput extends Component.makeUntraced("TextFieldFormInp
         return (
             <Flex direction="column" gap="1">
                 <TextField.Root
-                    value={value}
-                    onChange={e => setValue(e.target.value)}
-                    disabled={isSubmitting}
+                    value={input.value}
+                    onChange={e => input.setValue(e.target.value)}
+                    disabled={(input.optional && !input.enabled) || isSubmitting}
                     {...props}
                 >
+                    {input.optional &&
+                        <TextField.Slot side="left">
+                            <Switch
+                                size="1"
+                                checked={input.enabled}
+                                onCheckedChange={input.setEnabled}
+                            />
+                        </TextField.Slot>
+                    }
+
                     {isValidating &&
                         <TextField.Slot side="right">
                             <Spinner />