From b73b053cc851e1189d551aaf84df26ee1b426e4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Valverd=C3=A9?= <julien.valverde@mailo.com>
Date: Thu, 23 Oct 2025 23:50:30 +0200
Subject: [PATCH] Fix

---
 .../src/lib/form/TextFieldFormInput.tsx       | 102 +++++++++---------
 1 file changed, 50 insertions(+), 52 deletions(-)

diff --git a/packages/example/src/lib/form/TextFieldFormInput.tsx b/packages/example/src/lib/form/TextFieldFormInput.tsx
index 567afdb..5e69a4a 100644
--- a/packages/example/src/lib/form/TextFieldFormInput.tsx
+++ b/packages/example/src/lib/form/TextFieldFormInput.tsx
@@ -1,6 +1,6 @@
 import { Callout, Flex, Spinner, Switch, TextField } from "@radix-ui/themes"
 import { Array, Option, Struct } from "effect"
-import { Component, Form, Hooks } from "effect-fc"
+import { Component, Form, Subscribable } from "effect-fc"
 
 
 interface Props
@@ -18,60 +18,58 @@ extends Omit<TextField.RootProps, "optional" | "defaultValue">, Form.useOptional
 export type TextFieldFormInputProps = Props | OptionalProps
 
 
-export class TextFieldFormInput extends Component.makeUntraced("TextFieldFormInput")(
-    function*(props: TextFieldFormInputProps) {
-        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) }
+export class TextFieldFormInput extends Component.makeUntraced("TextFieldFormInput")(function*(props: TextFieldFormInputProps) {
+    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,
-            props.field.isSubmittingSubscribable,
-        )
+    const [issues, isValidating, isSubmitting] = yield* Subscribable.useSubscribables(
+        props.field.issuesSubscribable,
+        props.field.isValidatingSubscribable,
+        props.field.isSubmittingSubscribable,
+    )
 
-        return (
-            <Flex direction="column" gap="1">
-                <TextField.Root
-                    value={input.value}
-                    onChange={e => input.setValue(e.target.value)}
-                    disabled={(input.optional && !input.enabled) || isSubmitting}
-                    {...Struct.omit(props, "optional", "defaultValue")}
-                >
-                    {input.optional &&
-                        <TextField.Slot side="left">
-                            <Switch
-                                size="1"
-                                checked={input.enabled}
-                                onCheckedChange={input.setEnabled}
-                            />
-                        </TextField.Slot>
-                    }
+    return (
+        <Flex direction="column" gap="1">
+            <TextField.Root
+                value={input.value}
+                onChange={e => input.setValue(e.target.value)}
+                disabled={(input.optional && !input.enabled) || isSubmitting}
+                {...Struct.omit(props, "optional", "defaultValue")}
+            >
+                {input.optional &&
+                    <TextField.Slot side="left">
+                        <Switch
+                            size="1"
+                            checked={input.enabled}
+                            onCheckedChange={input.setEnabled}
+                        />
+                    </TextField.Slot>
+                }
 
-                    {isValidating &&
-                        <TextField.Slot side="right">
-                            <Spinner />
-                        </TextField.Slot>
-                    }
+                {isValidating &&
+                    <TextField.Slot side="right">
+                        <Spinner />
+                    </TextField.Slot>
+                }
 
-                    {props.children}
-                </TextField.Root>
+                {props.children}
+            </TextField.Root>
 
-                {Option.match(Array.head(issues), {
-                    onSome: issue => (
-                        <Callout.Root>
-                            <Callout.Text>{issue.message}</Callout.Text>
-                        </Callout.Root>
-                    ),
+            {Option.match(Array.head(issues), {
+                onSome: issue => (
+                    <Callout.Root>
+                        <Callout.Text>{issue.message}</Callout.Text>
+                    </Callout.Root>
+                ),
 
-                    onNone: () => <></>,
-                })}
-            </Flex>
-        )
-    }
-) {}
+                onNone: () => <></>,
+            })}
+        </Flex>
+    )
+}) {}