packages/example/src/lib/TextFieldInput.tsx

@@ -5,20 +5,20 @@ import { useInput } from "effect-fc/hooks"
 import * as React from "react"
 
 
-export interface TextInputProps<A, R> extends Omit<useInput.Options<A, R>, "schema"> {
+export interface TextFieldInputProps<A, R> extends Omit<useInput.Options<A, R>, "schema"> {
     readonly textFieldRootProps: Omit<TextField.RootProps, "children">
     readonly children?: React.ReactNode
 }
 
-export const TextInput = <A, R>(
+export const TextFieldInput = <A, R>(
     schema: Schema.Schema<A, string, R>
 ): Component.Component<
-    TextInputProps<A, R>,
+    TextFieldInputProps<A, R>,
     React.JSX.Element,
     ParseResult.ParseError,
     R
-> => Component.makeUntraced(function* TextInput(props: TextInputProps<A, R>) {
-    const input = yield* useInput({ ...props, schema })
+> => Component.makeUntraced(function* TextFieldInput(props) {
+    const input = yield* useInput({ schema, ...props })
     const issues = React.useMemo(() => Option.map(
         input.error,
         ParseResult.ArrayFormatter.formatErrorSync,
@@ -27,7 +27,7 @@ export const TextInput = <A, R>(
     return (
         <Flex direction="column" gap="1">
             {Option.isSome(issues) &&
-                <Callout.Root>
+                <Callout.Root color="red" role="alert">
                     <Callout.Text>
                         <ul>
                             {issues.value.map(issue => <li>{issue.message}</li>)}