soda-heroui 0.7.9 → 0.8.0

package/dist/components/FormAutocomplete.cjs

@@ -30,8 +30,8 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_namespaceObject = require("@heroui/react");
 const getFieldProps_cjs_namespaceObject = require("../utils/getFieldProps.cjs");
-function FormAutocomplete({ field, ...rest }) {
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.Autocomplete, {
+function FormAutocomplete({ field, component: Autocomplete2 = react_namespaceObject.Autocomplete, ...rest }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Autocomplete2, {
         value: field.state.value ?? "",
         onValueChange: field.handleChange,
         ...(0, getFieldProps_cjs_namespaceObject.getFieldProps)(field),

package/dist/components/FormAutocomplete.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
-import { Autocomplete } from "@heroui/react";
+import { Autocomplete, AutocompleteProps } from "@heroui/react";
 import { FieldComponentProps } from "soda-tanstack-form";
 export interface FormAutocompleteProps<FieldValue extends string | null | undefined = string | null | undefined, RenderItem extends object = object> extends FieldComponentProps<typeof Autocomplete<RenderItem>, FieldValue> {
+    component?: <T extends object>(props: AutocompleteProps<T>) => ReactNode;
 }
-export declare function FormAutocomplete<FieldValue extends string | null | undefined = string | null | undefined, RenderItem extends object = object>({ field, ...rest }: FormAutocompleteProps<FieldValue, RenderItem>): ReactNode;
+export declare function FormAutocomplete<FieldValue extends string | null | undefined = string | null | undefined, RenderItem extends object = object>({ field, component: Autocomplete2, ...rest }: FormAutocompleteProps<FieldValue, RenderItem>): ReactNode;

package/dist/components/FormAutocomplete.js

@@ -2,8 +2,8 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
 import * as __WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__ from "@heroui/react";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_getFieldProps_js_0615ad2a__ from "../utils/getFieldProps.js";
-function FormAutocomplete({ field, ...rest }) {
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__.Autocomplete, {
+function FormAutocomplete({ field, component: Autocomplete2 = __WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__.Autocomplete, ...rest }) {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Autocomplete2, {
         value: field.state.value ?? "",
         onValueChange: field.handleChange,
         ...(0, __WEBPACK_EXTERNAL_MODULE__utils_getFieldProps_js_0615ad2a__.getFieldProps)(field),

package/dist/components/FormCalendar.cjs

@@ -33,10 +33,10 @@ const react_namespaceObject = require("@heroui/react");
 const getFieldProps_cjs_namespaceObject = require("../utils/getFieldProps.cjs");
 const external_FormProvider_cjs_namespaceObject = require("./FormProvider.cjs");
 const external_FormTimeInput_cjs_namespaceObject = require("./FormTimeInput.cjs");
-function FormCalendar({ field, valueMode, emptyValue, ...rest }) {
+function FormCalendar({ field, valueMode, emptyValue, component: Calendar2 = react_namespaceObject.Calendar, ...rest }) {
     const context = (0, external_react_namespaceObject.useContext)(external_FormProvider_cjs_namespaceObject.FormContext);
     emptyValue ??= context.emptyValue;
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.Calendar, {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Calendar2, {
         value: (0, external_FormTimeInput_cjs_namespaceObject.getFieldValue)(field),
         onChange: (0, external_FormTimeInput_cjs_namespaceObject.getOnChange)({
             field,

package/dist/components/FormCalendar.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { Calendar } from "@heroui/react";
+import { Calendar, CalendarProps, DateValue } from "@heroui/react";
 import { FieldComponentProps } from "soda-tanstack-form";
 import { StrictOmit } from "soda-type";
 import { EmptyValue } from "./FormProvider";
@@ -7,5 +7,6 @@ import { TimeValueMode, TimeValueModeMap } from "./FormTimeInput";
 export interface FormCalendarProps<ValueMode extends TimeValueMode = "date", FieldValue extends TimeValueModeMap<ValueMode> | null | undefined = TimeValueModeMap<ValueMode> | null | undefined> extends StrictOmit<FieldComponentProps<typeof Calendar, FieldValue>, never> {
     valueMode?: ValueMode;
     emptyValue?: EmptyValue;
+    component?: <T extends DateValue>(props: CalendarProps<T>) => ReactNode;
 }
-export declare function FormCalendar<ValueMode extends TimeValueMode = "date", FieldValue extends TimeValueModeMap<ValueMode> | null | undefined = TimeValueModeMap<ValueMode> | null | undefined>({ field, valueMode, emptyValue, ...rest }: FormCalendarProps<ValueMode, FieldValue>): ReactNode;
+export declare function FormCalendar<ValueMode extends TimeValueMode = "date", FieldValue extends TimeValueModeMap<ValueMode> | null | undefined = TimeValueModeMap<ValueMode> | null | undefined>({ field, valueMode, emptyValue, component: Calendar2, ...rest }: FormCalendarProps<ValueMode, FieldValue>): ReactNode;

package/dist/components/FormCalendar.js

@@ -5,10 +5,10 @@ import * as __WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__ from "@heroui/rea
 import * as __WEBPACK_EXTERNAL_MODULE__utils_getFieldProps_js_0615ad2a__ from "../utils/getFieldProps.js";
 import * as __WEBPACK_EXTERNAL_MODULE__FormProvider_js_a80efa64__ from "./FormProvider.js";
 import * as __WEBPACK_EXTERNAL_MODULE__FormTimeInput_js_9364800a__ from "./FormTimeInput.js";
-function FormCalendar({ field, valueMode, emptyValue, ...rest }) {
+function FormCalendar({ field, valueMode, emptyValue, component: Calendar2 = __WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__.Calendar, ...rest }) {
     const context = (0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(__WEBPACK_EXTERNAL_MODULE__FormProvider_js_a80efa64__.FormContext);
     emptyValue ??= context.emptyValue;
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__.Calendar, {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Calendar2, {
         value: (0, __WEBPACK_EXTERNAL_MODULE__FormTimeInput_js_9364800a__.getFieldValue)(field),
         onChange: (0, __WEBPACK_EXTERNAL_MODULE__FormTimeInput_js_9364800a__.getOnChange)({
             field,

package/dist/components/FormCheckbox.cjs

@@ -30,8 +30,8 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_namespaceObject = require("@heroui/react");
 const getFieldProps_cjs_namespaceObject = require("../utils/getFieldProps.cjs");
-function FormCheckbox({ field, ...rest }) {
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.Checkbox, {
+function FormCheckbox({ field, component: Checkbox2 = react_namespaceObject.Checkbox, ...rest }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Checkbox2, {
         isSelected: field.state.value ?? false,
         onValueChange: field.handleChange,
         ...(0, getFieldProps_cjs_namespaceObject.getFieldProps)(field, true),

package/dist/components/FormCheckbox.d.ts

@@ -3,5 +3,6 @@ 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>;
+    component?: <AsComponent extends As = "input">(props: MergeWithAs<ComponentPropsWithoutRef<"input">, ComponentPropsWithoutRef<AsComponent>, CheckboxProps, AsComponent>) => ReactNode;
 };
-export declare function FormCheckbox<FieldValue extends boolean | null | undefined = boolean | null | undefined, AsComponent extends As = "input">({ field, ...rest }: FormCheckboxProps<FieldValue, AsComponent>): ReactNode;
+export declare function FormCheckbox<FieldValue extends boolean | null | undefined = boolean | null | undefined, AsComponent extends As = "input">({ field, component: Checkbox2, ...rest }: FormCheckboxProps<FieldValue, AsComponent>): ReactNode;

package/dist/components/FormCheckbox.js

@@ -2,8 +2,8 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
 import * as __WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__ from "@heroui/react";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_getFieldProps_js_0615ad2a__ from "../utils/getFieldProps.js";
-function FormCheckbox({ field, ...rest }) {
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__.Checkbox, {
+function FormCheckbox({ field, component: Checkbox2 = __WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__.Checkbox, ...rest }) {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Checkbox2, {
         isSelected: field.state.value ?? false,
         onValueChange: field.handleChange,
         ...(0, __WEBPACK_EXTERNAL_MODULE__utils_getFieldProps_js_0615ad2a__.getFieldProps)(field, true),

package/dist/components/FormCheckboxGroup.cjs

@@ -30,8 +30,8 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_namespaceObject = require("@heroui/react");
 const getFieldProps_cjs_namespaceObject = require("../utils/getFieldProps.cjs");
-function FormCheckboxGroup({ field, ...rest }) {
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.CheckboxGroup, {
+function FormCheckboxGroup({ field, component: CheckboxGroup2 = react_namespaceObject.CheckboxGroup, ...rest }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CheckboxGroup2, {
         value: field.state.value ?? [],
         onValueChange: field.handleChange,
         ...(0, getFieldProps_cjs_namespaceObject.getFieldProps)(field),

package/dist/components/FormCheckboxGroup.d.ts

@@ -3,5 +3,6 @@ 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>;
+    component?: <AsComponent extends As = "div">(props: MergeWithAs<ComponentPropsWithoutRef<"div">, ComponentPropsWithoutRef<AsComponent>, CheckboxGroupProps, AsComponent>) => ReactNode;
 };
-export declare function FormCheckboxGroup<FieldValue extends string[] | null | undefined = string[] | null | undefined, AsComponent extends As = "div">({ field, ...rest }: FormCheckboxGroupProps<FieldValue, AsComponent>): ReactNode;
+export declare function FormCheckboxGroup<FieldValue extends string[] | null | undefined = string[] | null | undefined, AsComponent extends As = "div">({ field, component: CheckboxGroup2, ...rest }: FormCheckboxGroupProps<FieldValue, AsComponent>): ReactNode;

package/dist/components/FormCheckboxGroup.js

@@ -2,8 +2,8 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
 import * as __WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__ from "@heroui/react";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_getFieldProps_js_0615ad2a__ from "../utils/getFieldProps.js";
-function FormCheckboxGroup({ field, ...rest }) {
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__.CheckboxGroup, {
+function FormCheckboxGroup({ field, component: CheckboxGroup2 = __WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__.CheckboxGroup, ...rest }) {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(CheckboxGroup2, {
         value: field.state.value ?? [],
         onValueChange: field.handleChange,
         ...(0, __WEBPACK_EXTERNAL_MODULE__utils_getFieldProps_js_0615ad2a__.getFieldProps)(field),

package/dist/components/FormDateInput.cjs

@@ -33,10 +33,10 @@ const react_namespaceObject = require("@heroui/react");
 const getFieldProps_cjs_namespaceObject = require("../utils/getFieldProps.cjs");
 const external_FormProvider_cjs_namespaceObject = require("./FormProvider.cjs");
 const external_FormTimeInput_cjs_namespaceObject = require("./FormTimeInput.cjs");
-function FormDateInput({ field, valueMode, emptyValue, ...rest }) {
+function FormDateInput({ field, valueMode, emptyValue, component: DateInput2 = react_namespaceObject.DateInput, ...rest }) {
     const context = (0, external_react_namespaceObject.useContext)(external_FormProvider_cjs_namespaceObject.FormContext);
     emptyValue ??= context.emptyValue;
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.DateInput, {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DateInput2, {
         value: (0, external_FormTimeInput_cjs_namespaceObject.getFieldValue)(field),
         onChange: (0, external_FormTimeInput_cjs_namespaceObject.getOnChange)({
             field,

package/dist/components/FormDateInput.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { DateInput } from "@heroui/react";
+import { DateInput, DateInputProps, DateValue } from "@heroui/react";
 import { FieldComponentProps } from "soda-tanstack-form";
 import { StrictOmit } from "soda-type";
 import { EmptyValue } from "./FormProvider";
@@ -7,5 +7,6 @@ import { TimeValueMode, TimeValueModeMap } from "./FormTimeInput";
 export interface FormDateInputProps<ValueMode extends TimeValueMode = "date", FieldValue extends TimeValueModeMap<ValueMode> | null | undefined = TimeValueModeMap<ValueMode> | null | undefined> extends StrictOmit<FieldComponentProps<typeof DateInput, FieldValue>, never> {
     valueMode?: ValueMode;
     emptyValue?: EmptyValue;
+    component?: <T extends DateValue>(props: DateInputProps<T>) => ReactNode;
 }
-export declare function FormDateInput<ValueMode extends TimeValueMode = "date", FieldValue extends TimeValueModeMap<ValueMode> | null | undefined = TimeValueModeMap<ValueMode> | null | undefined>({ field, valueMode, emptyValue, ...rest }: FormDateInputProps<ValueMode, FieldValue>): ReactNode;
+export declare function FormDateInput<ValueMode extends TimeValueMode = "date", FieldValue extends TimeValueModeMap<ValueMode> | null | undefined = TimeValueModeMap<ValueMode> | null | undefined>({ field, valueMode, emptyValue, component: DateInput2, ...rest }: FormDateInputProps<ValueMode, FieldValue>): ReactNode;

package/dist/components/FormDateInput.js

@@ -5,10 +5,10 @@ import * as __WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__ from "@heroui/rea
 import * as __WEBPACK_EXTERNAL_MODULE__utils_getFieldProps_js_0615ad2a__ from "../utils/getFieldProps.js";
 import * as __WEBPACK_EXTERNAL_MODULE__FormProvider_js_a80efa64__ from "./FormProvider.js";
 import * as __WEBPACK_EXTERNAL_MODULE__FormTimeInput_js_9364800a__ from "./FormTimeInput.js";
-function FormDateInput({ field, valueMode, emptyValue, ...rest }) {
+function FormDateInput({ field, valueMode, emptyValue, component: DateInput2 = __WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__.DateInput, ...rest }) {
     const context = (0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(__WEBPACK_EXTERNAL_MODULE__FormProvider_js_a80efa64__.FormContext);
     emptyValue ??= context.emptyValue;
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__.DateInput, {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(DateInput2, {
         value: (0, __WEBPACK_EXTERNAL_MODULE__FormTimeInput_js_9364800a__.getFieldValue)(field),
         onChange: (0, __WEBPACK_EXTERNAL_MODULE__FormTimeInput_js_9364800a__.getOnChange)({
             field,

package/dist/components/FormDatePicker.cjs

@@ -33,10 +33,10 @@ const react_namespaceObject = require("@heroui/react");
 const getFieldProps_cjs_namespaceObject = require("../utils/getFieldProps.cjs");
 const external_FormProvider_cjs_namespaceObject = require("./FormProvider.cjs");
 const external_FormTimeInput_cjs_namespaceObject = require("./FormTimeInput.cjs");
-function FormDatePicker({ field, valueMode, emptyValue, ...rest }) {
+function FormDatePicker({ field, valueMode, emptyValue, component: DatePicker2 = react_namespaceObject.DatePicker, ...rest }) {
     const context = (0, external_react_namespaceObject.useContext)(external_FormProvider_cjs_namespaceObject.FormContext);
     emptyValue ??= context.emptyValue;
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.DatePicker, {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DatePicker2, {
         value: (0, external_FormTimeInput_cjs_namespaceObject.getFieldValue)(field),
         onChange: (0, external_FormTimeInput_cjs_namespaceObject.getOnChange)({
             field,

package/dist/components/FormDatePicker.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { DatePicker } from "@heroui/react";
+import { DatePicker, DatePickerProps, DateValue } from "@heroui/react";
 import { FieldComponentProps } from "soda-tanstack-form";
 import { StrictOmit } from "soda-type";
 import { EmptyValue } from "./FormProvider";
@@ -7,5 +7,6 @@ import { TimeValueMode, TimeValueModeMap } from "./FormTimeInput";
 export interface FormDatePickerProps<ValueMode extends TimeValueMode = "date", FieldValue extends TimeValueModeMap<ValueMode> | null | undefined = TimeValueModeMap<ValueMode> | null | undefined> extends StrictOmit<FieldComponentProps<typeof DatePicker, FieldValue>, never> {
     valueMode?: ValueMode;
     emptyValue?: EmptyValue;
+    component?: <T extends DateValue>(props: DatePickerProps<T>) => ReactNode;
 }
-export declare function FormDatePicker<ValueMode extends TimeValueMode = "date", FieldValue extends TimeValueModeMap<ValueMode> | null | undefined = TimeValueModeMap<ValueMode> | null | undefined>({ field, valueMode, emptyValue, ...rest }: FormDatePickerProps<ValueMode, FieldValue>): ReactNode;
+export declare function FormDatePicker<ValueMode extends TimeValueMode = "date", FieldValue extends TimeValueModeMap<ValueMode> | null | undefined = TimeValueModeMap<ValueMode> | null | undefined>({ field, valueMode, emptyValue, component: DatePicker2, ...rest }: FormDatePickerProps<ValueMode, FieldValue>): ReactNode;

package/dist/components/FormDatePicker.js

@@ -5,10 +5,10 @@ import * as __WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__ from "@heroui/rea
 import * as __WEBPACK_EXTERNAL_MODULE__utils_getFieldProps_js_0615ad2a__ from "../utils/getFieldProps.js";
 import * as __WEBPACK_EXTERNAL_MODULE__FormProvider_js_a80efa64__ from "./FormProvider.js";
 import * as __WEBPACK_EXTERNAL_MODULE__FormTimeInput_js_9364800a__ from "./FormTimeInput.js";
-function FormDatePicker({ field, valueMode, emptyValue, ...rest }) {
+function FormDatePicker({ field, valueMode, emptyValue, component: DatePicker2 = __WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__.DatePicker, ...rest }) {
     const context = (0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(__WEBPACK_EXTERNAL_MODULE__FormProvider_js_a80efa64__.FormContext);
     emptyValue ??= context.emptyValue;
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__.DatePicker, {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(DatePicker2, {
         value: (0, __WEBPACK_EXTERNAL_MODULE__FormTimeInput_js_9364800a__.getFieldValue)(field),
         onChange: (0, __WEBPACK_EXTERNAL_MODULE__FormTimeInput_js_9364800a__.getOnChange)({
             field,

package/dist/components/FormDateRangePicker.cjs

@@ -33,11 +33,11 @@ const react_namespaceObject = require("@heroui/react");
 const getFieldProps_cjs_namespaceObject = require("../utils/getFieldProps.cjs");
 const external_FormProvider_cjs_namespaceObject = require("./FormProvider.cjs");
 const external_FormRangeCalendar_cjs_namespaceObject = require("./FormRangeCalendar.cjs");
-function FormDateRangePicker({ field: _field, valueMode, emptyValue, ...rest }) {
+function FormDateRangePicker({ field: _field, valueMode, emptyValue, component: DateRangePicker2 = react_namespaceObject.DateRangePicker, ...rest }) {
     const field = _field;
     const context = (0, external_react_namespaceObject.useContext)(external_FormProvider_cjs_namespaceObject.FormContext);
     emptyValue ??= context.emptyValue;
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.DateRangePicker, {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DateRangePicker2, {
         value: (0, external_FormRangeCalendar_cjs_namespaceObject.getFieldRangeValue)(field),
         onChange: (0, external_FormRangeCalendar_cjs_namespaceObject.getOnRangeChange)({
             field,

package/dist/components/FormDateRangePicker.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { DateRangePicker } from "@heroui/react";
+import { DateRangePicker, DateRangePickerProps, DateValue } from "@heroui/react";
 import { FieldComponentProps } from "soda-tanstack-form";
 import { StrictOmit } from "soda-type";
 import { EmptyValue } from "./FormProvider";
@@ -7,5 +7,6 @@ import { TimeValueMode, TimeValueModeMap } from "./FormTimeInput";
 export interface FormDateRangePickerProps<ValueMode extends TimeValueMode = "date", FieldValue extends [TimeValueModeMap<ValueMode>, TimeValueModeMap<ValueMode>] | null | undefined = [TimeValueModeMap<ValueMode>, TimeValueModeMap<ValueMode>] | null | undefined> extends StrictOmit<FieldComponentProps<typeof DateRangePicker, FieldValue>, never> {
     valueMode?: ValueMode;
     emptyValue?: EmptyValue;
+    component?: <T extends DateValue>(props: DateRangePickerProps<T>) => ReactNode;
 }
-export declare function FormDateRangePicker<ValueMode extends TimeValueMode = "date", FieldValue extends [TimeValueModeMap<ValueMode>, TimeValueModeMap<ValueMode>] | null | undefined = [TimeValueModeMap<ValueMode>, TimeValueModeMap<ValueMode>] | null | undefined>({ field: _field, valueMode, emptyValue, ...rest }: FormDateRangePickerProps<ValueMode, FieldValue>): ReactNode;
+export declare function FormDateRangePicker<ValueMode extends TimeValueMode = "date", FieldValue extends [TimeValueModeMap<ValueMode>, TimeValueModeMap<ValueMode>] | null | undefined = [TimeValueModeMap<ValueMode>, TimeValueModeMap<ValueMode>] | null | undefined>({ field: _field, valueMode, emptyValue, component: DateRangePicker2, ...rest }: FormDateRangePickerProps<ValueMode, FieldValue>): ReactNode;

package/dist/components/FormDateRangePicker.js

@@ -5,11 +5,11 @@ import * as __WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__ from "@heroui/rea
 import * as __WEBPACK_EXTERNAL_MODULE__utils_getFieldProps_js_0615ad2a__ from "../utils/getFieldProps.js";
 import * as __WEBPACK_EXTERNAL_MODULE__FormProvider_js_a80efa64__ from "./FormProvider.js";
 import * as __WEBPACK_EXTERNAL_MODULE__FormRangeCalendar_js_70d23bc2__ from "./FormRangeCalendar.js";
-function FormDateRangePicker({ field: _field, valueMode, emptyValue, ...rest }) {
+function FormDateRangePicker({ field: _field, valueMode, emptyValue, component: DateRangePicker2 = __WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__.DateRangePicker, ...rest }) {
     const field = _field;
     const context = (0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(__WEBPACK_EXTERNAL_MODULE__FormProvider_js_a80efa64__.FormContext);
     emptyValue ??= context.emptyValue;
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__.DateRangePicker, {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(DateRangePicker2, {
         value: (0, __WEBPACK_EXTERNAL_MODULE__FormRangeCalendar_js_70d23bc2__.getFieldRangeValue)(field),
         onChange: (0, __WEBPACK_EXTERNAL_MODULE__FormRangeCalendar_js_70d23bc2__.getOnRangeChange)({
             field,

package/dist/components/FormInput.cjs

@@ -30,8 +30,8 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_namespaceObject = require("@heroui/react");
 const getFieldProps_cjs_namespaceObject = require("../utils/getFieldProps.cjs");
-function FormInput({ field, ...rest }) {
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.Input, {
+function FormInput({ field, component: Input2 = react_namespaceObject.Input, ...rest }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Input2, {
         value: field.state.value ?? "",
         onValueChange: field.handleChange,
         ...(0, getFieldProps_cjs_namespaceObject.getFieldProps)(field),

package/dist/components/FormInput.d.ts

@@ -3,5 +3,6 @@ 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>;
+    component?: <AsComponent extends As = "input">(props: MergeWithAs<ComponentPropsWithoutRef<"input">, ComponentPropsWithoutRef<AsComponent>, InputProps, AsComponent>) => ReactNode;
 };
-export declare function FormInput<FieldValue extends string | null | undefined = string | null | undefined, AsComponent extends As = "input">({ field, ...rest }: FormInputProps<FieldValue, AsComponent>): ReactNode;
+export declare function FormInput<FieldValue extends string | null | undefined = string | null | undefined, AsComponent extends As = "input">({ field, component: Input2, ...rest }: FormInputProps<FieldValue, AsComponent>): ReactNode;

package/dist/components/FormInput.js

@@ -2,8 +2,8 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
 import * as __WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__ from "@heroui/react";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_getFieldProps_js_0615ad2a__ from "../utils/getFieldProps.js";
-function FormInput({ field, ...rest }) {
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__.Input, {
+function FormInput({ field, component: Input2 = __WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__.Input, ...rest }) {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Input2, {
         value: field.state.value ?? "",
         onValueChange: field.handleChange,
         ...(0, __WEBPACK_EXTERNAL_MODULE__utils_getFieldProps_js_0615ad2a__.getFieldProps)(field),

package/dist/components/FormInputOtp.cjs

@@ -30,8 +30,8 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_namespaceObject = require("@heroui/react");
 const getFieldProps_cjs_namespaceObject = require("../utils/getFieldProps.cjs");
-function FormInputOtp({ field, ...rest }) {
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.InputOtp, {
+function FormInputOtp({ field, component: InputOtp2 = react_namespaceObject.InputOtp, ...rest }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(InputOtp2, {
         value: field.state.value ?? "",
         onValueChange: field.handleChange,
         ...(0, getFieldProps_cjs_namespaceObject.getFieldProps)(field),

package/dist/components/FormInputOtp.d.ts

@@ -3,5 +3,6 @@ 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>;
+    component?: <AsComponent extends As = "input">(props: MergeWithAs<ComponentPropsWithoutRef<"input">, ComponentPropsWithoutRef<AsComponent>, InputOtpProps, AsComponent>) => ReactNode;
 };
-export declare function FormInputOtp<FieldValue extends string | null | undefined = string | null | undefined, AsComponent extends As = "input">({ field, ...rest }: FormInputOtpProps<FieldValue, AsComponent>): ReactNode;
+export declare function FormInputOtp<FieldValue extends string | null | undefined = string | null | undefined, AsComponent extends As = "input">({ field, component: InputOtp2, ...rest }: FormInputOtpProps<FieldValue, AsComponent>): ReactNode;

package/dist/components/FormInputOtp.js

@@ -2,8 +2,8 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
 import * as __WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__ from "@heroui/react";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_getFieldProps_js_0615ad2a__ from "../utils/getFieldProps.js";
-function FormInputOtp({ field, ...rest }) {
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__.InputOtp, {
+function FormInputOtp({ field, component: InputOtp2 = __WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__.InputOtp, ...rest }) {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(InputOtp2, {
         value: field.state.value ?? "",
         onValueChange: field.handleChange,
         ...(0, __WEBPACK_EXTERNAL_MODULE__utils_getFieldProps_js_0615ad2a__.getFieldProps)(field),

package/dist/components/FormNumberInput.cjs

@@ -30,8 +30,8 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_namespaceObject = require("@heroui/react");
 const getFieldProps_cjs_namespaceObject = require("../utils/getFieldProps.cjs");
-function FormNumberInput({ field, ...rest }) {
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.NumberInput, {
+function FormNumberInput({ field, component: NumberInput2 = react_namespaceObject.NumberInput, ...rest }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(NumberInput2, {
         value: field.state.value ?? 0,
         onValueChange: field.handleChange,
         ...(0, getFieldProps_cjs_namespaceObject.getFieldProps)(field),

package/dist/components/FormNumberInput.d.ts

@@ -3,5 +3,6 @@ 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>;
+    component?: <AsComponent extends As = "input">(props: MergeWithAs<ComponentPropsWithoutRef<"input">, ComponentPropsWithoutRef<AsComponent>, NumberInputProps, AsComponent>) => ReactNode;
 };
-export declare function FormNumberInput<FieldValue extends number | null | undefined = number | null | undefined, AsComponent extends As = "input">({ field, ...rest }: FormNumberInputProps<FieldValue, AsComponent>): ReactNode;
+export declare function FormNumberInput<FieldValue extends number | null | undefined = number | null | undefined, AsComponent extends As = "input">({ field, component: NumberInput2, ...rest }: FormNumberInputProps<FieldValue, AsComponent>): ReactNode;

package/dist/components/FormNumberInput.js

@@ -2,8 +2,8 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
 import * as __WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__ from "@heroui/react";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_getFieldProps_js_0615ad2a__ from "../utils/getFieldProps.js";
-function FormNumberInput({ field, ...rest }) {
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__.NumberInput, {
+function FormNumberInput({ field, component: NumberInput2 = __WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__.NumberInput, ...rest }) {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(NumberInput2, {
         value: field.state.value ?? 0,
         onValueChange: field.handleChange,
         ...(0, __WEBPACK_EXTERNAL_MODULE__utils_getFieldProps_js_0615ad2a__.getFieldProps)(field),

package/dist/components/FormPagination.cjs

@@ -30,8 +30,8 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_namespaceObject = require("@heroui/react");
 const getFieldProps_cjs_namespaceObject = require("../utils/getFieldProps.cjs");
-function FormPagination({ field, ...rest }) {
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.Pagination, {
+function FormPagination({ field, component: Pagination2 = react_namespaceObject.Pagination, ...rest }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Pagination2, {
         page: field.state.value ?? 1,
         onPageChange: field.handleChange,
         ...(0, getFieldProps_cjs_namespaceObject.getFieldProps)(field, true),

package/dist/components/FormPagination.d.ts

@@ -3,5 +3,6 @@ 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>;
+    component?: <AsComponent extends As = "nav">(props: MergeWithAs<ComponentPropsWithoutRef<"nav">, ComponentPropsWithoutRef<AsComponent>, PaginationProps, AsComponent>) => ReactNode;
 };
-export declare function FormPagination<FieldValue extends number | null | undefined = number | null | undefined, AsComponent extends As = "nav">({ field, ...rest }: FormPaginationProps<FieldValue, AsComponent>): ReactNode;
+export declare function FormPagination<FieldValue extends number | null | undefined = number | null | undefined, AsComponent extends As = "nav">({ field, component: Pagination2, ...rest }: FormPaginationProps<FieldValue, AsComponent>): ReactNode;

package/dist/components/FormPagination.js

@@ -2,8 +2,8 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
 import * as __WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__ from "@heroui/react";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_getFieldProps_js_0615ad2a__ from "../utils/getFieldProps.js";
-function FormPagination({ field, ...rest }) {
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__.Pagination, {
+function FormPagination({ field, component: Pagination2 = __WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__.Pagination, ...rest }) {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Pagination2, {
         page: field.state.value ?? 1,
         onPageChange: field.handleChange,
         ...(0, __WEBPACK_EXTERNAL_MODULE__utils_getFieldProps_js_0615ad2a__.getFieldProps)(field, true),

package/dist/components/FormRadioGroup.cjs

@@ -30,8 +30,8 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_namespaceObject = require("@heroui/react");
 const getFieldProps_cjs_namespaceObject = require("../utils/getFieldProps.cjs");
-function FormRadioGroup({ field, ...rest }) {
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.RadioGroup, {
+function FormRadioGroup({ field, component: RadioGroup2 = react_namespaceObject.RadioGroup, ...rest }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(RadioGroup2, {
         value: field.state.value ?? "",
         onValueChange: field.handleChange,
         ...(0, getFieldProps_cjs_namespaceObject.getFieldProps)(field),

package/dist/components/FormRadioGroup.d.ts

@@ -3,5 +3,6 @@ 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>;
+    component?: <AsComponent extends As = "div">(props: MergeWithAs<ComponentPropsWithoutRef<"div">, ComponentPropsWithoutRef<AsComponent>, RadioGroupProps, AsComponent>) => ReactNode;
 };
-export declare function FormRadioGroup<FieldValue extends string | null | undefined = string | null | undefined, AsComponent extends As = "div">({ field, ...rest }: FormRadioGroupProps<FieldValue, AsComponent>): ReactNode;
+export declare function FormRadioGroup<FieldValue extends string | null | undefined = string | null | undefined, AsComponent extends As = "div">({ field, component: RadioGroup2, ...rest }: FormRadioGroupProps<FieldValue, AsComponent>): ReactNode;

package/dist/components/FormRadioGroup.js

@@ -2,8 +2,8 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
 import * as __WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__ from "@heroui/react";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_getFieldProps_js_0615ad2a__ from "../utils/getFieldProps.js";
-function FormRadioGroup({ field, ...rest }) {
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__.RadioGroup, {
+function FormRadioGroup({ field, component: RadioGroup2 = __WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__.RadioGroup, ...rest }) {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(RadioGroup2, {
         value: field.state.value ?? "",
         onValueChange: field.handleChange,
         ...(0, __WEBPACK_EXTERNAL_MODULE__utils_getFieldProps_js_0615ad2a__.getFieldProps)(field),

package/dist/components/FormRangeCalendar.cjs

@@ -71,11 +71,11 @@ function getOnRangeChange({ field, valueMode, emptyValue }) {
         }));
     };
 }
-function FormRangeCalendar({ field: _field, valueMode, emptyValue, ...rest }) {
+function FormRangeCalendar({ field: _field, valueMode, emptyValue, component: RangeCalendar2 = react_namespaceObject.RangeCalendar, ...rest }) {
     const field = _field;
     const context = (0, external_react_namespaceObject.useContext)(external_FormProvider_cjs_namespaceObject.FormContext);
     emptyValue ??= context.emptyValue;
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.RangeCalendar, {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(RangeCalendar2, {
         value: getFieldRangeValue(field),
         onChange: getOnRangeChange({
             field,

package/dist/components/FormRangeCalendar.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode, SetStateAction } from "react";
-import { DateValue, RangeCalendar, RangeValue } from "@heroui/react";
+import { DateValue, RangeCalendar, RangeCalendarProps, RangeValue } from "@heroui/react";
 import { Field, FieldComponentProps } from "soda-tanstack-form";
 import { StrictOmit } from "soda-type";
 import { EmptyValue } from "./FormProvider";
@@ -7,6 +7,7 @@ import { TimeValueMode, TimeValueModeMap } from "./FormTimeInput";
 export interface FormRangeCalendarProps<ValueMode extends TimeValueMode = "date", FieldValue extends [TimeValueModeMap<ValueMode>, TimeValueModeMap<ValueMode>] | null | undefined = [TimeValueModeMap<ValueMode>, TimeValueModeMap<ValueMode>] | null | undefined> extends StrictOmit<FieldComponentProps<typeof RangeCalendar, FieldValue>, never> {
     valueMode?: ValueMode;
     emptyValue?: EmptyValue;
+    component?: <T extends DateValue>(props: RangeCalendarProps<T>) => ReactNode;
 }
 export declare function getRangeValue(value: [Date, Date] | [number, number] | null | undefined): RangeValue<DateValue> | null;
 export declare function getFieldRangeValue<T extends [Date, Date] | [number, number] | null | undefined>(field: Field<T>): RangeValue<DateValue> | null;
@@ -22,4 +23,4 @@ export interface GetOnRangeChangeParams<T extends [Date, Date] | [number, number
     emptyValue?: EmptyValue;
 }
 export declare function getOnRangeChange<T extends [Date, Date] | [number, number] | null | undefined>({ field, valueMode, emptyValue }: GetOnRangeChangeParams<T>): (value: RangeValue<DateValue> | null) => void;
-export declare function FormRangeCalendar<ValueMode extends TimeValueMode = "date", FieldValue extends [TimeValueModeMap<ValueMode>, TimeValueModeMap<ValueMode>] | null | undefined = [TimeValueModeMap<ValueMode>, TimeValueModeMap<ValueMode>] | null | undefined>({ field: _field, valueMode, emptyValue, ...rest }: FormRangeCalendarProps<ValueMode, FieldValue>): ReactNode;
+export declare function FormRangeCalendar<ValueMode extends TimeValueMode = "date", FieldValue extends [TimeValueModeMap<ValueMode>, TimeValueModeMap<ValueMode>] | null | undefined = [TimeValueModeMap<ValueMode>, TimeValueModeMap<ValueMode>] | null | undefined>({ field: _field, valueMode, emptyValue, component: RangeCalendar2, ...rest }: FormRangeCalendarProps<ValueMode, FieldValue>): ReactNode;

package/dist/components/FormRangeCalendar.js

@@ -39,11 +39,11 @@ function getOnRangeChange({ field, valueMode, emptyValue }) {
         }));
     };
 }
-function FormRangeCalendar({ field: _field, valueMode, emptyValue, ...rest }) {
+function FormRangeCalendar({ field: _field, valueMode, emptyValue, component: RangeCalendar2 = __WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__.RangeCalendar, ...rest }) {
     const field = _field;
     const context = (0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(__WEBPACK_EXTERNAL_MODULE__FormProvider_js_a80efa64__.FormContext);
     emptyValue ??= context.emptyValue;
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__.RangeCalendar, {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(RangeCalendar2, {
         value: getFieldRangeValue(field),
         onChange: getOnRangeChange({
             field,

package/dist/components/FormSelect.cjs

@@ -33,10 +33,10 @@ const react_namespaceObject = require("@heroui/react");
 const external_deepsea_tools_namespaceObject = require("deepsea-tools");
 const getFieldProps_cjs_namespaceObject = require("../utils/getFieldProps.cjs");
 const external_FormProvider_cjs_namespaceObject = require("./FormProvider.cjs");
-function FormSelect({ field, multiple, emptyValue, ...rest }) {
+function FormSelect({ field, multiple, emptyValue, component: Select2 = react_namespaceObject.Select, ...rest }) {
     const context = (0, external_react_namespaceObject.useContext)(external_FormProvider_cjs_namespaceObject.FormContext);
     emptyValue ??= context.emptyValue;
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.Select, {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Select2, {
         selectedKeys: (0, external_deepsea_tools_namespaceObject.isNonNullable)(field.state.value) ? multiple ? field.state.value : [
             field.state.value
         ] : [],

package/dist/components/FormSelect.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { Select } from "@heroui/react";
+import { Select, SelectProps } from "@heroui/react";
 import { Key } from "@react-types/shared";
 import { FieldComponentProps } from "soda-tanstack-form";
 import { StrictOmit } from "soda-type";
@@ -7,5 +7,6 @@ import { EmptyValue } from "./FormProvider";
 export interface FormSelectProps<Multiple extends boolean = false, Value extends (Multiple extends true ? Key[] : Key) | null | undefined = (Multiple extends true ? Key[] : Key) | null | undefined, RenderItem extends object = object> extends StrictOmit<FieldComponentProps<typeof Select<RenderItem>, Value>, "multiple"> {
     multiple?: Multiple;
     emptyValue?: EmptyValue;
+    component?: <RenderItem extends object>(props: SelectProps<RenderItem>) => ReactNode;
 }
-export declare function FormSelect<Multiple extends boolean = false, Value extends (Multiple extends true ? Key[] : Key) | null | undefined = (Multiple extends true ? Key[] : Key) | null | undefined, RenderItem extends object = object>({ field, multiple, emptyValue, ...rest }: FormSelectProps<Multiple, Value, RenderItem>): ReactNode;
+export declare function FormSelect<Multiple extends boolean = false, Value extends (Multiple extends true ? Key[] : Key) | null | undefined = (Multiple extends true ? Key[] : Key) | null | undefined, RenderItem extends object = object>({ field, multiple, emptyValue, component: Select2, ...rest }: FormSelectProps<Multiple, Value, RenderItem>): ReactNode;

package/dist/components/FormSelect.js

@@ -5,10 +5,10 @@ import * as __WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__ from "@heroui/rea
 import * as __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__ from "deepsea-tools";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_getFieldProps_js_0615ad2a__ from "../utils/getFieldProps.js";
 import * as __WEBPACK_EXTERNAL_MODULE__FormProvider_js_a80efa64__ from "./FormProvider.js";
-function FormSelect({ field, multiple, emptyValue, ...rest }) {
+function FormSelect({ field, multiple, emptyValue, component: Select2 = __WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__.Select, ...rest }) {
     const context = (0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(__WEBPACK_EXTERNAL_MODULE__FormProvider_js_a80efa64__.FormContext);
     emptyValue ??= context.emptyValue;
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__heroui_react_7b65ca80__.Select, {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Select2, {
         selectedKeys: (0, __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__.isNonNullable)(field.state.value) ? multiple ? field.state.value : [
             field.state.value
         ] : [],

package/dist/components/FormSwitch.cjs

@@ -30,8 +30,8 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_namespaceObject = require("@heroui/react");
 const getFieldProps_cjs_namespaceObject = require("../utils/getFieldProps.cjs");
-function FormSwitch({ field, ...rest }) {
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.Switch, {
+function FormSwitch({ field, component: Switch2 = react_namespaceObject.Switch, ...rest }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Switch2, {
         isSelected: field.state.value ?? false,
         onValueChange: field.handleChange,
         ...(0, getFieldProps_cjs_namespaceObject.getFieldProps)(field, true),

package/dist/components/FormSwitch.d.ts

@@ -3,5 +3,6 @@ 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>;
+    component?: <AsComponent extends As = "input">(props: MergeWithAs<ComponentPropsWithoutRef<"input">, ComponentPropsWithoutRef<AsComponent>, SwitchProps, AsComponent>) => ReactNode;
 };
-export declare function FormSwitch<FieldValue extends boolean | null | undefined = boolean | null | undefined, AsComponent extends As = "input">({ field, ...rest }: FormSwitchProps<FieldValue, AsComponent>): ReactNode;
+export declare function FormSwitch<FieldValue extends boolean | null | undefined = boolean | null | undefined, AsComponent extends As = "input">({ field, component: Switch2, ...rest }: FormSwitchProps<FieldValue, AsComponent>): ReactNode;