soda-heroui 0.7.7 → 0.7.9

package/dist/components/FormCheckbox.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode } from "react";
-import { Checkbox } from "@heroui/react";
-import { FieldComponentProps } from "soda-tanstack-form";
-import { StrictOmit } from "soda-type";
-export interface FormCheckboxProps<FieldValue extends boolean | null | undefined = boolean | null | undefined> extends StrictOmit<FieldComponentProps<typeof Checkbox, FieldValue>, never> {
-}
-export declare function FormCheckbox<FieldValue extends boolean | null | undefined = boolean | null | undefined>({ field, ...rest }: FormCheckboxProps<FieldValue>): ReactNode;
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { As, CheckboxProps, MergeWithAs } from "@heroui/react";
+import { Field } from "soda-tanstack-form";
+export type FormCheckboxProps<FieldValue extends boolean | null | undefined = boolean | null | undefined, AsComponent extends As = "input"> = MergeWithAs<ComponentPropsWithoutRef<"input">, ComponentPropsWithoutRef<AsComponent>, CheckboxProps, AsComponent> & {
+    field: Field<FieldValue>;
+};
+export declare function FormCheckbox<FieldValue extends boolean | null | undefined = boolean | null | undefined, AsComponent extends As = "input">({ field, ...rest }: FormCheckboxProps<FieldValue, AsComponent>): ReactNode;

package/dist/components/FormCheckboxGroup.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode } from "react";
-import { CheckboxGroup } from "@heroui/react";
-import { FieldComponentProps } from "soda-tanstack-form";
-import { StrictOmit } from "soda-type";
-export interface FormCheckboxGroupProps<FieldValue extends string[] | null | undefined = string[] | null | undefined> extends StrictOmit<FieldComponentProps<typeof CheckboxGroup, FieldValue>, never> {
-}
-export declare function FormCheckboxGroup<FieldValue extends string[] | null | undefined = string[] | null | undefined>({ field, ...rest }: FormCheckboxGroupProps<FieldValue>): ReactNode;
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { As, CheckboxGroupProps, MergeWithAs } from "@heroui/react";
+import { Field } from "soda-tanstack-form";
+export type FormCheckboxGroupProps<FieldValue extends string[] | null | undefined = string[] | null | undefined, AsComponent extends As = "div"> = MergeWithAs<ComponentPropsWithoutRef<"div">, ComponentPropsWithoutRef<AsComponent>, CheckboxGroupProps, AsComponent> & {
+    field: Field<FieldValue>;
+};
+export declare function FormCheckboxGroup<FieldValue extends string[] | null | undefined = string[] | null | undefined, AsComponent extends As = "div">({ field, ...rest }: FormCheckboxGroupProps<FieldValue, AsComponent>): ReactNode;

package/dist/components/FormInput.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode } from "react";
-import { Input } from "@heroui/react";
-import { FieldComponentProps } from "soda-tanstack-form";
-import { StrictOmit } from "soda-type";
-export interface FormInputProps<FieldValue extends string | null | undefined = string | null | undefined> extends StrictOmit<FieldComponentProps<typeof Input, FieldValue>, never> {
-}
-export declare function FormInput<FieldValue extends string | null | undefined = string | null | undefined>({ field, ...rest }: FormInputProps<FieldValue>): ReactNode;
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { As, InputProps, MergeWithAs } from "@heroui/react";
+import { Field } from "soda-tanstack-form";
+export type FormInputProps<FieldValue extends string | null | undefined = string | null | undefined, AsComponent extends As = "input"> = MergeWithAs<ComponentPropsWithoutRef<"input">, ComponentPropsWithoutRef<AsComponent>, InputProps, AsComponent> & {
+    field: Field<FieldValue>;
+};
+export declare function FormInput<FieldValue extends string | null | undefined = string | null | undefined, AsComponent extends As = "input">({ field, ...rest }: FormInputProps<FieldValue, AsComponent>): ReactNode;

package/dist/components/FormInputOtp.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode } from "react";
-import { InputOtp } from "@heroui/react";
-import { FieldComponentProps } from "soda-tanstack-form";
-import { StrictOmit } from "soda-type";
-export interface FormInputOtpProps<FieldValue extends string | null | undefined = string | null | undefined> extends StrictOmit<FieldComponentProps<typeof InputOtp, FieldValue>, never> {
-}
-export declare function FormInputOtp<FieldValue extends string | null | undefined = string | null | undefined>({ field, ...rest }: FormInputOtpProps<FieldValue>): ReactNode;
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { As, InputOtpProps, MergeWithAs } from "@heroui/react";
+import { Field } from "soda-tanstack-form";
+export type FormInputOtpProps<FieldValue extends string | null | undefined = string | null | undefined, AsComponent extends As = "input"> = MergeWithAs<ComponentPropsWithoutRef<"input">, ComponentPropsWithoutRef<AsComponent>, InputOtpProps, AsComponent> & {
+    field: Field<FieldValue>;
+};
+export declare function FormInputOtp<FieldValue extends string | null | undefined = string | null | undefined, AsComponent extends As = "input">({ field, ...rest }: FormInputOtpProps<FieldValue, AsComponent>): ReactNode;

package/dist/components/FormNumberInput.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode } from "react";
-import { NumberInput } from "@heroui/react";
-import { FieldComponentProps } from "soda-tanstack-form";
-import { StrictOmit } from "soda-type";
-export interface FormNumberInputProps<FieldValue extends number | null | undefined = number | null | undefined> extends StrictOmit<FieldComponentProps<typeof NumberInput, FieldValue>, never> {
-}
-export declare function FormNumberInput<FieldValue extends number | null | undefined = number | null | undefined>({ field, ...rest }: FormNumberInputProps<FieldValue>): ReactNode;
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { As, MergeWithAs, NumberInputProps } from "@heroui/react";
+import { Field } from "soda-tanstack-form";
+export type FormNumberInputProps<FieldValue extends number | null | undefined = number | null | undefined, AsComponent extends As = "input"> = MergeWithAs<ComponentPropsWithoutRef<"input">, ComponentPropsWithoutRef<AsComponent>, NumberInputProps, AsComponent> & {
+    field: Field<FieldValue>;
+};
+export declare function FormNumberInput<FieldValue extends number | null | undefined = number | null | undefined, AsComponent extends As = "input">({ field, ...rest }: FormNumberInputProps<FieldValue, AsComponent>): ReactNode;

package/dist/components/FormPagination.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode } from "react";
-import { Pagination } from "@heroui/react";
-import { FieldComponentProps } from "soda-tanstack-form";
-import { StrictOmit } from "soda-type";
-export interface FormPaginationProps<FieldValue extends number | null | undefined = number | null | undefined> extends StrictOmit<FieldComponentProps<typeof Pagination, FieldValue>, never> {
-}
-export declare function FormPagination<FieldValue extends number | null | undefined = number | null | undefined>({ field, ...rest }: FormPaginationProps<FieldValue>): ReactNode;
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { As, MergeWithAs, PaginationProps } from "@heroui/react";
+import { Field } from "soda-tanstack-form";
+export type FormPaginationProps<FieldValue extends number | null | undefined = number | null | undefined, AsComponent extends As = "nav"> = MergeWithAs<ComponentPropsWithoutRef<"nav">, ComponentPropsWithoutRef<AsComponent>, PaginationProps, AsComponent> & {
+    field: Field<FieldValue>;
+};
+export declare function FormPagination<FieldValue extends number | null | undefined = number | null | undefined, AsComponent extends As = "nav">({ field, ...rest }: FormPaginationProps<FieldValue, AsComponent>): ReactNode;

package/dist/components/FormRadioGroup.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode } from "react";
-import { RadioGroup } from "@heroui/react";
-import { FieldComponentProps } from "soda-tanstack-form";
-import { StrictOmit } from "soda-type";
-export interface FormRadioGroupProps<FieldValue extends string | null | undefined = string | null | undefined> extends StrictOmit<FieldComponentProps<typeof RadioGroup, FieldValue>, never> {
-}
-export declare function FormRadioGroup<FieldValue extends string | null | undefined = string | null | undefined>({ field, ...rest }: FormRadioGroupProps<FieldValue>): ReactNode;
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { As, MergeWithAs, RadioGroupProps } from "@heroui/react";
+import { Field } from "soda-tanstack-form";
+export type FormRadioGroupProps<FieldValue extends string | null | undefined = string | null | undefined, AsComponent extends As = "div"> = MergeWithAs<ComponentPropsWithoutRef<"div">, ComponentPropsWithoutRef<AsComponent>, RadioGroupProps, AsComponent> & {
+    field: Field<FieldValue>;
+};
+export declare function FormRadioGroup<FieldValue extends string | null | undefined = string | null | undefined, AsComponent extends As = "div">({ field, ...rest }: FormRadioGroupProps<FieldValue, AsComponent>): ReactNode;

package/dist/components/FormSwitch.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode } from "react";
-import { Switch } from "@heroui/react";
-import { FieldComponentProps } from "soda-tanstack-form";
-import { StrictOmit } from "soda-type";
-export interface FormSwitchProps<FieldValue extends boolean | null | undefined = boolean | null | undefined> extends StrictOmit<FieldComponentProps<typeof Switch, FieldValue>, never> {
-}
-export declare function FormSwitch<FieldValue extends boolean | null | undefined = boolean | null | undefined>({ field, ...rest }: FormSwitchProps<FieldValue>): ReactNode;
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { As, MergeWithAs, SwitchProps } from "@heroui/react";
+import { Field } from "soda-tanstack-form";
+export type FormSwitchProps<FieldValue extends boolean | null | undefined = boolean | null | undefined, AsComponent extends As = "input"> = MergeWithAs<ComponentPropsWithoutRef<"input">, ComponentPropsWithoutRef<AsComponent>, SwitchProps, AsComponent> & {
+    field: Field<FieldValue>;
+};
+export declare function FormSwitch<FieldValue extends boolean | null | undefined = boolean | null | undefined, AsComponent extends As = "input">({ field, ...rest }: FormSwitchProps<FieldValue, AsComponent>): ReactNode;

package/dist/components/FormTextarea.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode } from "react";
-import { Textarea } from "@heroui/react";
-import { FieldComponentProps } from "soda-tanstack-form";
-import { StrictOmit } from "soda-type";
-export interface FormTextareaProps<FieldValue extends string | null | undefined = string | null | undefined> extends StrictOmit<FieldComponentProps<typeof Textarea, FieldValue>, never> {
-}
-export declare function FormTextarea<FieldValue extends string | null | undefined = string | null | undefined>({ field, ...rest }: FormTextareaProps<FieldValue>): ReactNode;
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { As, MergeWithAs, TextAreaProps } from "@heroui/react";
+import { Field } from "soda-tanstack-form";
+export type FormTextareaProps<FieldValue extends string | null | undefined = string | null | undefined, AsComponent extends As = "textarea"> = MergeWithAs<ComponentPropsWithoutRef<"input">, ComponentPropsWithoutRef<AsComponent>, TextAreaProps, AsComponent> & {
+    field: Field<FieldValue>;
+};
+export declare function FormTextarea<FieldValue extends string | null | undefined = string | null | undefined, AsComponent extends As = "textarea">({ field, ...rest }: FormTextareaProps<FieldValue, AsComponent>): ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "soda-heroui",
-  "version": "0.7.7",
+  "version": "0.7.9",
   "description": "",
   "type": "module",
   "exports": {
@@ -37,10 +37,10 @@
   "dependencies": {
     "@internationalized/date": "^3.7.0",
     "@tanstack/react-form": "^1.3.0",
+    "deepsea-tools": "5.37.0",
     "soda-type": "6.3.0",
-    "soda-tanstack-form": "0.2.1",
-    "soda-hooks": "6.10.10",
-    "deepsea-tools": "5.36.0"
+    "soda-hooks": "6.10.11",
+    "soda-tanstack-form": "0.2.1"
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.4.1",

package/src/components/FormCheckbox.tsx

@@ -1,19 +1,24 @@
 "use client"
 
-import { ReactNode } from "react"
-import { Checkbox } from "@heroui/react"
-import { FieldComponentProps } from "soda-tanstack-form"
-import { StrictOmit } from "soda-type"
+import { ComponentPropsWithoutRef, ReactNode } from "react"
+import { As, Checkbox, CheckboxProps, MergeWithAs } from "@heroui/react"
+import { Field } from "soda-tanstack-form"
 
 import { getFieldProps } from "../utils/getFieldProps"
 
-export interface FormCheckboxProps<FieldValue extends boolean | null | undefined = boolean | null | undefined>
-    extends StrictOmit<FieldComponentProps<typeof Checkbox, FieldValue>, never> {}
+export type FormCheckboxProps<FieldValue extends boolean | null | undefined = boolean | null | undefined, AsComponent extends As = "input"> = MergeWithAs<
+    ComponentPropsWithoutRef<"input">,
+    ComponentPropsWithoutRef<AsComponent>,
+    CheckboxProps,
+    AsComponent
+> & {
+    field: Field<FieldValue>
+}
 
-export function FormCheckbox<FieldValue extends boolean | null | undefined = boolean | null | undefined>({
+export function FormCheckbox<FieldValue extends boolean | null | undefined = boolean | null | undefined, AsComponent extends As = "input">({
     field,
     ...rest
-}: FormCheckboxProps<FieldValue>): ReactNode {
+}: FormCheckboxProps<FieldValue, AsComponent>): ReactNode {
     return (
         <Checkbox
             isSelected={field.state.value ?? false}

package/src/components/FormCheckboxGroup.tsx

@@ -1,18 +1,30 @@
 "use client"
 
-import { ReactNode } from "react"
-import { CheckboxGroup } from "@heroui/react"
-import { FieldComponentProps } from "soda-tanstack-form"
-import { StrictOmit } from "soda-type"
+import { ComponentPropsWithoutRef, ReactNode } from "react"
+import { As, CheckboxGroup, CheckboxGroupProps, MergeWithAs } from "@heroui/react"
+import { Field } from "soda-tanstack-form"
 
 import { getFieldProps } from "../utils/getFieldProps"
 
-export interface FormCheckboxGroupProps<FieldValue extends string[] | null | undefined = string[] | null | undefined>
-    extends StrictOmit<FieldComponentProps<typeof CheckboxGroup, FieldValue>, never> {}
+export type FormCheckboxGroupProps<FieldValue extends string[] | null | undefined = string[] | null | undefined, AsComponent extends As = "div"> = MergeWithAs<
+    ComponentPropsWithoutRef<"div">,
+    ComponentPropsWithoutRef<AsComponent>,
+    CheckboxGroupProps,
+    AsComponent
+> & {
+    field: Field<FieldValue>
+}
 
-export function FormCheckboxGroup<FieldValue extends string[] | null | undefined = string[] | null | undefined>({
+export function FormCheckboxGroup<FieldValue extends string[] | null | undefined = string[] | null | undefined, AsComponent extends As = "div">({
     field,
     ...rest
-}: FormCheckboxGroupProps<FieldValue>): ReactNode {
-    return <CheckboxGroup value={field.state.value ?? []} onValueChange={field.handleChange as (value: string[]) => void} {...getFieldProps(field)} {...rest} />
+}: FormCheckboxGroupProps<FieldValue, AsComponent>): ReactNode {
+    return (
+        <CheckboxGroup<AsComponent>
+            value={field.state.value ?? []}
+            onValueChange={field.handleChange as (value: string[]) => void}
+            {...getFieldProps(field)}
+            {...rest}
+        />
+    )
 }

package/src/components/FormInput.tsx

@@ -1,15 +1,25 @@
 "use client"
 
-import { ReactNode } from "react"
-import { Input } from "@heroui/react"
-import { FieldComponentProps } from "soda-tanstack-form"
-import { StrictOmit } from "soda-type"
+import { ComponentPropsWithoutRef, ReactNode } from "react"
+import { As, Input, InputProps, MergeWithAs } from "@heroui/react"
+import { Field } from "soda-tanstack-form"
 
 import { getFieldProps } from "../utils/getFieldProps"
 
-export interface FormInputProps<FieldValue extends string | null | undefined = string | null | undefined>
-    extends StrictOmit<FieldComponentProps<typeof Input, FieldValue>, never> {}
+export type FormInputProps<FieldValue extends string | null | undefined = string | null | undefined, AsComponent extends As = "input"> = MergeWithAs<
+    ComponentPropsWithoutRef<"input">,
+    ComponentPropsWithoutRef<AsComponent>,
+    InputProps,
+    AsComponent
+> & {
+    field: Field<FieldValue>
+}
 
-export function FormInput<FieldValue extends string | null | undefined = string | null | undefined>({ field, ...rest }: FormInputProps<FieldValue>): ReactNode {
-    return <Input value={field.state.value ?? ""} onValueChange={field.handleChange as (value: string) => void} {...getFieldProps(field)} {...rest} />
+export function FormInput<FieldValue extends string | null | undefined = string | null | undefined, AsComponent extends As = "input">({
+    field,
+    ...rest
+}: FormInputProps<FieldValue, AsComponent>): ReactNode {
+    return (
+        <Input<AsComponent> value={field.state.value ?? ""} onValueChange={field.handleChange as (value: string) => void} {...getFieldProps(field)} {...rest} />
+    )
 }

package/src/components/FormInputOtp.tsx

@@ -1,18 +1,30 @@
 "use client"
 
-import { ReactNode } from "react"
-import { InputOtp } from "@heroui/react"
-import { FieldComponentProps } from "soda-tanstack-form"
-import { StrictOmit } from "soda-type"
+import { ComponentPropsWithoutRef, ReactNode } from "react"
+import { As, InputOtp, InputOtpProps, MergeWithAs } from "@heroui/react"
+import { Field } from "soda-tanstack-form"
 
 import { getFieldProps } from "../utils/getFieldProps"
 
-export interface FormInputOtpProps<FieldValue extends string | null | undefined = string | null | undefined>
-    extends StrictOmit<FieldComponentProps<typeof InputOtp, FieldValue>, never> {}
+export type FormInputOtpProps<FieldValue extends string | null | undefined = string | null | undefined, AsComponent extends As = "input"> = MergeWithAs<
+    ComponentPropsWithoutRef<"input">,
+    ComponentPropsWithoutRef<AsComponent>,
+    InputOtpProps,
+    AsComponent
+> & {
+    field: Field<FieldValue>
+}
 
-export function FormInputOtp<FieldValue extends string | null | undefined = string | null | undefined>({
+export function FormInputOtp<FieldValue extends string | null | undefined = string | null | undefined, AsComponent extends As = "input">({
     field,
     ...rest
-}: FormInputOtpProps<FieldValue>): ReactNode {
-    return <InputOtp value={field.state.value ?? ""} onValueChange={field.handleChange as (value: string) => void} {...getFieldProps(field)} {...rest} />
+}: FormInputOtpProps<FieldValue, AsComponent>): ReactNode {
+    return (
+        <InputOtp<AsComponent>
+            value={field.state.value ?? ""}
+            onValueChange={field.handleChange as (value: string) => void}
+            {...getFieldProps(field)}
+            {...rest}
+        />
+    )
 }

package/src/components/FormNumberInput.tsx

@@ -1,18 +1,30 @@
 "use client"
 
-import { ReactNode } from "react"
-import { NumberInput } from "@heroui/react"
-import { FieldComponentProps } from "soda-tanstack-form"
-import { StrictOmit } from "soda-type"
+import { ComponentPropsWithoutRef, ReactNode } from "react"
+import { As, MergeWithAs, NumberInput, NumberInputProps } from "@heroui/react"
+import { Field } from "soda-tanstack-form"
 
 import { getFieldProps } from "../utils/getFieldProps"
 
-export interface FormNumberInputProps<FieldValue extends number | null | undefined = number | null | undefined>
-    extends StrictOmit<FieldComponentProps<typeof NumberInput, FieldValue>, never> {}
+export type FormNumberInputProps<FieldValue extends number | null | undefined = number | null | undefined, AsComponent extends As = "input"> = MergeWithAs<
+    ComponentPropsWithoutRef<"input">,
+    ComponentPropsWithoutRef<AsComponent>,
+    NumberInputProps,
+    AsComponent
+> & {
+    field: Field<FieldValue>
+}
 
-export function FormNumberInput<FieldValue extends number | null | undefined = number | null | undefined>({
+export function FormNumberInput<FieldValue extends number | null | undefined = number | null | undefined, AsComponent extends As = "input">({
     field,
     ...rest
-}: FormNumberInputProps<FieldValue>): ReactNode {
-    return <NumberInput value={field.state.value ?? 0} onValueChange={field.handleChange as (value: number) => void} {...getFieldProps(field)} {...rest} />
+}: FormNumberInputProps<FieldValue, AsComponent>): ReactNode {
+    return (
+        <NumberInput<AsComponent>
+            value={field.state.value ?? 0}
+            onValueChange={field.handleChange as (value: number) => void}
+            {...getFieldProps(field)}
+            {...rest}
+        />
+    )
 }

package/src/components/FormPagination.tsx

@@ -1,18 +1,30 @@
 "use client"
 
-import { ReactNode } from "react"
-import { Pagination } from "@heroui/react"
-import { FieldComponentProps } from "soda-tanstack-form"
-import { StrictOmit } from "soda-type"
+import { ComponentPropsWithoutRef, ReactNode } from "react"
+import { As, MergeWithAs, Pagination, PaginationProps } from "@heroui/react"
+import { Field } from "soda-tanstack-form"
 
 import { getFieldProps } from "../utils/getFieldProps"
 
-export interface FormPaginationProps<FieldValue extends number | null | undefined = number | null | undefined>
-    extends StrictOmit<FieldComponentProps<typeof Pagination, FieldValue>, never> {}
+export type FormPaginationProps<FieldValue extends number | null | undefined = number | null | undefined, AsComponent extends As = "nav"> = MergeWithAs<
+    ComponentPropsWithoutRef<"nav">,
+    ComponentPropsWithoutRef<AsComponent>,
+    PaginationProps,
+    AsComponent
+> & {
+    field: Field<FieldValue>
+}
 
-export function FormPagination<FieldValue extends number | null | undefined = number | null | undefined>({
+export function FormPagination<FieldValue extends number | null | undefined = number | null | undefined, AsComponent extends As = "nav">({
     field,
     ...rest
-}: FormPaginationProps<FieldValue>): ReactNode {
-    return <Pagination page={field.state.value ?? 1} onPageChange={field.handleChange as (value: number) => void} {...getFieldProps(field, true)} {...rest} />
+}: FormPaginationProps<FieldValue, AsComponent>): ReactNode {
+    return (
+        <Pagination<AsComponent>
+            page={field.state.value ?? 1}
+            onPageChange={field.handleChange as (value: number) => void as any}
+            {...getFieldProps(field, true)}
+            {...rest}
+        />
+    )
 }

package/src/components/FormRadioGroup.tsx

@@ -1,18 +1,30 @@
 "use client"
 
-import { ReactNode } from "react"
-import { RadioGroup } from "@heroui/react"
-import { FieldComponentProps } from "soda-tanstack-form"
-import { StrictOmit } from "soda-type"
+import { ComponentPropsWithoutRef, ReactNode } from "react"
+import { As, MergeWithAs, RadioGroup, RadioGroupProps } from "@heroui/react"
+import { Field } from "soda-tanstack-form"
 
 import { getFieldProps } from "../utils/getFieldProps"
 
-export interface FormRadioGroupProps<FieldValue extends string | null | undefined = string | null | undefined>
-    extends StrictOmit<FieldComponentProps<typeof RadioGroup, FieldValue>, never> {}
+export type FormRadioGroupProps<FieldValue extends string | null | undefined = string | null | undefined, AsComponent extends As = "div"> = MergeWithAs<
+    ComponentPropsWithoutRef<"div">,
+    ComponentPropsWithoutRef<AsComponent>,
+    RadioGroupProps,
+    AsComponent
+> & {
+    field: Field<FieldValue>
+}
 
-export function FormRadioGroup<FieldValue extends string | null | undefined = string | null | undefined>({
+export function FormRadioGroup<FieldValue extends string | null | undefined = string | null | undefined, AsComponent extends As = "div">({
     field,
     ...rest
-}: FormRadioGroupProps<FieldValue>): ReactNode {
-    return <RadioGroup value={field.state.value ?? ""} onValueChange={field.handleChange as (value: string) => void} {...getFieldProps(field)} {...rest} />
+}: FormRadioGroupProps<FieldValue, AsComponent>): ReactNode {
+    return (
+        <RadioGroup<AsComponent>
+            value={field.state.value ?? ""}
+            onValueChange={field.handleChange as (value: string) => void}
+            {...getFieldProps(field)}
+            {...rest}
+        />
+    )
 }

package/src/components/FormSwitch.tsx

@@ -1,21 +1,26 @@
 "use client"
 
-import { ReactNode } from "react"
-import { Switch } from "@heroui/react"
-import { FieldComponentProps } from "soda-tanstack-form"
-import { StrictOmit } from "soda-type"
+import { ComponentPropsWithoutRef, ReactNode } from "react"
+import { As, MergeWithAs, Switch, SwitchProps } from "@heroui/react"
+import { Field } from "soda-tanstack-form"
 
 import { getFieldProps } from "../utils/getFieldProps"
 
-export interface FormSwitchProps<FieldValue extends boolean | null | undefined = boolean | null | undefined>
-    extends StrictOmit<FieldComponentProps<typeof Switch, FieldValue>, never> {}
+export type FormSwitchProps<FieldValue extends boolean | null | undefined = boolean | null | undefined, AsComponent extends As = "input"> = MergeWithAs<
+    ComponentPropsWithoutRef<"input">,
+    ComponentPropsWithoutRef<AsComponent>,
+    SwitchProps,
+    AsComponent
+> & {
+    field: Field<FieldValue>
+}
 
-export function FormSwitch<FieldValue extends boolean | null | undefined = boolean | null | undefined>({
+export function FormSwitch<FieldValue extends boolean | null | undefined = boolean | null | undefined, AsComponent extends As = "input">({
     field,
     ...rest
-}: FormSwitchProps<FieldValue>): ReactNode {
+}: FormSwitchProps<FieldValue, AsComponent>): ReactNode {
     return (
-        <Switch
+        <Switch<AsComponent>
             isSelected={field.state.value ?? false}
             onValueChange={field.handleChange as (value: boolean) => void}
             {...getFieldProps(field, true)}

package/src/components/FormTextarea.tsx

@@ -1,18 +1,30 @@
 "use client"
 
-import { ReactNode } from "react"
-import { Textarea } from "@heroui/react"
-import { FieldComponentProps } from "soda-tanstack-form"
-import { StrictOmit } from "soda-type"
+import { ComponentPropsWithoutRef, ReactNode } from "react"
+import { As, MergeWithAs, TextAreaProps, Textarea } from "@heroui/react"
+import { Field } from "soda-tanstack-form"
 
 import { getFieldProps } from "../utils/getFieldProps"
 
-export interface FormTextareaProps<FieldValue extends string | null | undefined = string | null | undefined>
-    extends StrictOmit<FieldComponentProps<typeof Textarea, FieldValue>, never> {}
+export type FormTextareaProps<FieldValue extends string | null | undefined = string | null | undefined, AsComponent extends As = "textarea"> = MergeWithAs<
+    ComponentPropsWithoutRef<"input">,
+    ComponentPropsWithoutRef<AsComponent>,
+    TextAreaProps,
+    AsComponent
+> & {
+    field: Field<FieldValue>
+}
 
-export function FormTextarea<FieldValue extends string | null | undefined = string | null | undefined>({
+export function FormTextarea<FieldValue extends string | null | undefined = string | null | undefined, AsComponent extends As = "textarea">({
     field,
     ...rest
-}: FormTextareaProps<FieldValue>): ReactNode {
-    return <Textarea value={field.state.value ?? ""} onValueChange={field.handleChange as (value: string) => void} {...getFieldProps(field)} {...rest} />
+}: FormTextareaProps<FieldValue, AsComponent>): ReactNode {
+    return (
+        <Textarea<AsComponent>
+            value={field.state.value ?? ""}
+            onValueChange={field.handleChange as (value: string) => void}
+            {...getFieldProps(field)}
+            {...rest}
+        />
+    )
 }