@customafk/lunas-ui 0.2.63 → 0.2.65

package/dist/{index-C2KjuFXQ.d.cts → index-DDROD2y9.d.cts}

@@ -1,5 +1,5 @@
-import { VariantProps } from "class-variance-authority";
-import { Label } from "radix-ui";
+import * as React$1 from "react";
+import { ComponentType } from "react";
 
 //#region packages/components/features/tanstack-form/types.d.ts
 /** Layout axis for a field's label–input arrangement. */
@@ -220,6 +220,60 @@ type AnyFieldProps = ({
 /** The `fieldType` discriminant extracted from {@link AnyFieldProps}. */
 type FieldType = AnyFieldProps['fieldType'];
 //#endregion
+//#region node_modules/@radix-ui/react-primitive/dist/index.d.mts
+declare module 'react' {
+  interface CSSProperties {
+    [varName: `--radix-${string}`]: string | number | undefined | null;
+  }
+}
+declare const NODES: readonly ["a", "button", "div", "form", "h2", "h3", "img", "input", "label", "li", "nav", "ol", "p", "select", "span", "svg", "ul"];
+type Primitives = { [E in (typeof NODES)[number]]: PrimitiveForwardRefComponent<E> };
+type PrimitivePropsWithRef<E extends React$1.ElementType> = React$1.ComponentPropsWithRef<E> & {
+  asChild?: boolean;
+};
+interface PrimitiveForwardRefComponent<E extends React$1.ElementType> extends React$1.ForwardRefExoticComponent<PrimitivePropsWithRef<E>> {}
+declare const Primitive: Primitives;
+/**
+ * Flush custom event dispatch
+ * https://github.com/radix-ui/primitives/pull/1378
+ *
+ * React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types.
+ *
+ * Internally, React prioritises events in the following order:
+ *  - discrete
+ *  - continuous
+ *  - default
+ *
+ * https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L294-L350
+ *
+ * `discrete` is an  important distinction as updates within these events are applied immediately.
+ * React however, is not able to infer the priority of custom event types due to how they are detected internally.
+ * Because of this, it's possible for updates from custom events to be unexpectedly batched when
+ * dispatched by another `discrete` event.
+ *
+ * In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch.
+ * This utility should be used when dispatching a custom event from within another `discrete` event, this utility
+ * is not necessary when dispatching known event types, or if dispatching a custom type inside a non-discrete event.
+ * For example:
+ *
+ * dispatching a known click 👎
+ * target.dispatchEvent(new Event(‘click’))
+ *
+ * dispatching a custom type within a non-discrete event 👎
+ * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(‘customType’))}
+ *
+ * dispatching a custom type within a `discrete` event 👍
+ * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(‘customType’))}
+ *
+ * Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's  not recommended to use
+ * this utility with them. This is because it's possible for those handlers to be called implicitly during render
+ * e.g. when focus is within a component as it is unmounted, or when managing focus on mount.
+ */
+//#endregion
+//#region node_modules/@radix-ui/react-label/dist/index.d.mts
+type PrimitiveLabelProps = React$1.ComponentPropsWithoutRef<typeof Primitive.label>;
+interface LabelProps extends PrimitiveLabelProps {}
+//#endregion
 //#region node_modules/@tanstack/form-core/dist/esm/standardSchemaValidator.d.ts
 type TStandardSchemaValidatorValue<TData, TSource extends ValidationSource = ValidationSource> = {
   value: TData;
@@ -1980,83 +2034,8 @@ declare global {
   var __TANSTACK_EVENT_TARGET__: EventTarget | null;
 }
 //#endregion
-//#region packages/components/features/tanstack-form/components/ui/label.d.ts
-/**
- * Form field label that automatically renders a "Required" badge when the field is marked aria-required.
- *
- * @example
- * import { Label } from '@customafk/lunas-ui/features/tanstack-form';
- *
- * <Label htmlFor="email">Email address</Label>
- */
-declare function Label$1({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof Label.Root>): import("react").JSX.Element;
-//#endregion
 //#region packages/components/features/tanstack-form/components/atoms/simple-array-field.d.ts
-type ArrayColProps = {
-  /**
-   * Fixed column width as a pixel number (e.g. `96`) or any CSS string
-   * (e.g. `'8rem'`, `'20%'`). Omit to let the column expand and fill the
-   * remaining row space (`flex: 1`).
-   */
-  width?: number | string;
-  className?: string;
-  children: React.ReactNode;
-};
-/**
- * Layout helper for columns inside a `SimpleArrayField` row. Controls width
- * without repeating `<div className="w-24">` or `<div className="flex-1">`.
- *
- * @example
- * <SimpleArrayField defaultRow={...}>
- *   {i => (
- *     <>
- *       <ArrayCol>                 // flex-1 — takes remaining space
- *         <AppField name={`items[${i}].name`}>...</AppField>
- *       </ArrayCol>
- *       <ArrayCol width={96}>     // 96 px fixed
- *         <AppField name={`items[${i}].qty`}>...</AppField>
- *       </ArrayCol>
- *       <ArrayCol width="8rem">   // CSS string
- *         <AppField name={`items[${i}].tax`}>...</AppField>
- *       </ArrayCol>
- *     </>
- *   )}
- * </SimpleArrayField>
- */
-declare function ArrayCol({
-  width,
-  className,
-  children
-}: ArrayColProps): import("react").JSX.Element;
-type ArrayHeaderRowProps = {
-  className?: string;
-  children: React.ReactNode;
-};
-/**
- * Styled header row for a `SimpleArrayField` table. Place it directly above
- * `<SimpleArrayField>` and use `<ArrayCol>` children with text labels to align
- * headers with their columns. A spacer matching the delete-button width is
- * appended automatically.
- *
- * @example
- * <ArrayHeaderRow>
- *   <ArrayCol>Name</ArrayCol>
- *   <ArrayCol width={96}>Price</ArrayCol>
- *   <ArrayCol width={80}>Qty</ArrayCol>
- * </ArrayHeaderRow>
- * <SimpleArrayField defaultRow={...}>
- *   {i => (...)}
- * </SimpleArrayField>
- */
-declare function ArrayHeaderRow({
-  className,
-  children
-}: ArrayHeaderRowProps): import("react").JSX.Element;
-type Props$9<T> = {
+type SimpleArrayFieldProps<T> = {
   /**
    * Shape of a brand-new empty row appended when the user clicks "Add row".
    */
@@ -2069,647 +2048,177 @@ type Props$9<T> = {
   addLabel?: string;
   className?: string;
 };
-/**
- * Array field wrapper that manages rows (add / remove) while letting you
- * freely compose any fields inside each row.
- *
- * @example
- * const { AppForm, AppField } = useTanStackForm({ defaultValues: { items: [] } });
- *
- * <AppForm>
- *   <AppField name="items">
- *     {({ SimpleArrayField }) => (
- *       <SimpleArrayField defaultRow={{ name: null, qty: null }}>
- *         {(i) => (
- *           <div className="flex gap-2">
- *             <AppField name={`items[${i}].name`}>
- *               {({ SimpleTextField }) => <SimpleTextField label="Name" />}
- *             </AppField>
- *             <AppField name={`items[${i}].qty`}>
- *               {({ SimpleNumberField }) => <SimpleNumberField label="Qty" />}
- *             </AppField>
- *           </div>
- *         )}
- *       </SimpleArrayField>
- *     )}
- *   </AppField>
- * </AppForm>
- */
-declare function SimpleArrayField<T>({
-  defaultRow,
-  children,
-  addLabel,
-  className
-}: Props$9<T>): import("react").JSX.Element;
 //#endregion
-//#region packages/components/features/tanstack-form/components/atoms/simple-boolean-field.d.ts
-type Props$8 = {
+//#region packages/components/features/tanstack-form/tanstack-form.d.ts
+declare const TextField: ComponentType<TextFieldProps>;
+declare const TextareaField: ComponentType<TextareaFieldProps>;
+declare const TextEditorField: ComponentType<TextEditorFieldProps>;
+declare const NumberField: ComponentType<NumberFieldProps>;
+declare const EmailField: ComponentType<EmailFieldProps>;
+declare const PasswordField: ComponentType<PasswordFieldProps>;
+declare const SelectField: ComponentType<SelectFieldProps>;
+declare const ComboboxField: ComponentType<ComboboxFieldProps>;
+declare const DateField: ComponentType<DateFieldProps>;
+declare const SwitchField: ComponentType<SwitchFieldProps>;
+declare const RadioGroupField: ComponentType<RadioGroupFieldProps>;
+declare const CheckboxField: ComponentType<CheckboxFieldProps>;
+declare const SimpleTextField: ComponentType<SimpleTextFieldProps>;
+declare const SimpleEmailField: ComponentType<{
   label?: string;
+  placeholder?: string;
   required?: boolean;
+  maxLength?: number;
   disabled?: boolean;
-  variant?: 'checkbox' | 'switch';
-};
-declare const SimpleBooleanField: React.FC<Props$8>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/atoms/simple-combobox-field.d.ts
-type Props$7 = {
+}>;
+declare const SimplePasswordField: ComponentType<{
   label?: string;
   placeholder?: string;
   required?: boolean;
   disabled?: boolean;
-  options: Array<{
-    value: string;
-    label: string;
-  }>;
-};
-declare const SimpleComboboxField: React.FC<Props$7>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/atoms/simple-date-field.d.ts
-type Props$6 = {
+}>;
+declare const SimpleTextareaField: ComponentType<{
   label?: string;
   placeholder?: string;
   required?: boolean;
+  maxLength?: number;
+  rows?: number;
   disabled?: boolean;
-  minDate?: Date;
-  maxDate?: Date;
-};
-declare const SimpleDateField: React.FC<Props$6>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/atoms/simple-radio-group-field.d.ts
-type Props$5 = {
+}>;
+declare const SimpleNumberField: ComponentType<{
   label?: string;
+  placeholder?: string;
   required?: boolean;
+  unit?: string;
+  allowNegative?: boolean;
   disabled?: boolean;
+}>;
+declare const SimpleSelectField: ComponentType<{
+  label?: string;
+  placeholder?: string;
+  required?: boolean;
   options: Array<{
     value: string;
     label: string;
   }>;
-  orientation?: 'horizontal' | 'vertical';
-};
-declare const SimpleRadioGroupField: React.FC<Props$5>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/atoms/simple-email-field.d.ts
-type Props$4 = {
+}>;
+/** Kept as its own generic wrapper (instead of `lazyField`) so callers can still write `<SimpleArrayField<Row> />`. */
+declare function SimpleArrayField<T>(props: SimpleArrayFieldProps<T>): import("react").JSX.Element;
+declare const SimpleBooleanField: ComponentType<{
   label?: string;
-  placeholder?: string;
   required?: boolean;
-  maxLength?: number;
   disabled?: boolean;
-};
-declare const SimpleEmailField: React.FC<Props$4>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/atoms/simple-number-field.d.ts
-type Props$3 = {
+  variant?: "checkbox" | "switch";
+}>;
+declare const SimpleComboboxField: ComponentType<{
   label?: string;
   placeholder?: string;
   required?: boolean;
-  unit?: string;
-  allowNegative?: boolean;
   disabled?: boolean;
-};
-declare const SimpleNumberField: React.FC<Props$3>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/atoms/simple-password-field.d.ts
-type Props$2 = {
+  options: Array<{
+    value: string;
+    label: string;
+  }>;
+}>;
+declare const SimpleDateField: ComponentType<{
   label?: string;
   placeholder?: string;
   required?: boolean;
   disabled?: boolean;
-};
-declare const SimplePasswordField: React.FC<Props$2>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/atoms/simple-select-field.d.ts
-type Props$1 = {
+  minDate?: Date;
+  maxDate?: Date;
+}>;
+declare const SimpleRadioGroupField: ComponentType<{
   label?: string;
-  placeholder?: string;
   required?: boolean;
+  disabled?: boolean;
   options: Array<{
     value: string;
     label: string;
   }>;
-};
-declare const SimpleSelectField: React.FC<Props$1>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/atoms/simple-textarea-field.d.ts
-type Props = {
-  label?: string;
-  placeholder?: string;
-  required?: boolean;
-  maxLength?: number;
-  rows?: number;
-  disabled?: boolean;
-};
-declare const SimpleTextareaField: React.FC<Props>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/atoms/simple-text-field.d.ts
-declare const SimpleTextField: React.FC<SimpleTextFieldProps>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/fields/checkbox-field.d.ts
-/**
- * A TanStack Form-connected checkbox group field that manages an array of selected string values,
- * supporting multi-selection and submission-state disabling.
- *
- * @example
- * import { CheckboxField } from '@customafk/lunas-ui/features/tanstack-form';
- *
- * <form.Field name="roles">
- *   {() => (
- *     <CheckboxField
- *       label="Roles"
- *       options={[
- *         { value: 'admin', label: 'Admin' },
- *         { value: 'editor', label: 'Editor' },
- *       ]}
- *       helperText="Select one or more roles"
- *     />
- *   )}
- * </form.Field>
- */
-declare const CheckboxField: React.FC<CheckboxFieldProps>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/fields/combobox-field.d.ts
-declare const ComboboxField: import("react").NamedExoticComponent<ComboboxFieldProps>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/fields/date-field.d.ts
-declare const DateField: import("react").NamedExoticComponent<DateFieldProps>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/fields/email-field.d.ts
-/**
- * A TanStack Form-connected email input field with an at-sign prefix icon,
- * optional clear button, and inline validation error display.
- *
- * @example
- * import { EmailField } from '@customafk/lunas-ui/features/tanstack-form';
- *
- * <form.Field name="email">
- *   {() => (
- *     <EmailField
- *       label="Email address"
- *       placeholder="you@example.com"
- *       required
- *     />
- *   )}
- * </form.Field>
- */
-declare const EmailField: React.FC<EmailFieldProps>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/fields/number-field.d.ts
-/**
- * A TanStack Form-connected numeric input field supporting rounding rules,
- * decimal precision, unit labels, and submission-state feedback.
- *
- * @example
- * import { NumberField } from '@customafk/lunas-ui/features/tanstack-form';
- *
- * <form.Field name="quantity">
- *   {() => (
- *     <NumberField
- *       label="Quantity"
- *       placeholder="0"
- *       unit="pcs"
- *       decimalPlaces={2}
- *       required
- *     />
- *   )}
- * </form.Field>
- */
-declare const NumberField: import("react").NamedExoticComponent<NumberFieldProps>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/fields/password-field.d.ts
-/**
- * A TanStack Form-connected password input field with a show/hide toggle button
- * and inline validation error display.
- *
- * @example
- * import { PasswordField } from '@customafk/lunas-ui/features/tanstack-form';
- *
- * <form.Field name="password">
- *   {() => (
- *     <PasswordField
- *       label="Password"
- *       placeholder="Enter your password"
- *       helperText="Must be at least 8 characters"
- *     />
- *   )}
- * </form.Field>
- */
-declare const PasswordField: React.FC<PasswordFieldProps>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/fields/radio-group-field.d.ts
-declare const RadioGroupField: React.FC<RadioGroupFieldProps>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/fields/select-field.d.ts
-declare const SelectField: import("react").NamedExoticComponent<SelectFieldProps>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/fields/switch-field.d.ts
-/**
- * A TanStack Form-connected boolean toggle field rendered as a labelled switch,
- * positioned absolutely in the top-right corner of the field card.
- *
- * @example
- * import { SwitchField } from '@customafk/lunas-ui/features/tanstack-form';
- *
- * <form.Field name="notifications">
- *   {() => (
- *     <SwitchField
- *       label="Enable notifications"
- *       description="Receive email alerts for important events"
- *       helperText="You can change this at any time"
- *     />
- *   )}
- * </form.Field>
- */
-declare const SwitchField: React.FC<SwitchFieldProps>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/fields/text-field.d.ts
-/**
- * A TanStack Form-connected single-line text input with label, validation, and optional features.
- *
- * Must be rendered inside an `AppField` context from `useTanStackForm`.
- * The field value type is `string | null` — `null` represents an empty/unset state.
- *
- * ---
- *
- * **Basic usage**
- * @example
- * const { AppField } = useTanStackForm({ defaultValues: { name: null } });
- *
- * <AppField name="name">
- *   {field => <field.TextField label="Full name" placeholder="Nguyễn Văn A" />}
- * </AppField>
- *
- * ---
- *
- * **With validation**
- * @example
- * <AppField
- *   name="username"
- *   validators={{ onChange: ({ value }) => !value ? 'Bắt buộc' : undefined }}
- * >
- *   {field => <field.TextField label="Username" required />}
- * </AppField>
- *
- * ---
- *
- * **With character counter and max length**
- * @example
- * <AppField name="bio">
- *   {field => (
- *     <field.TextField
- *       label="Bio"
- *       counter
- *       maxLength={160}
- *       placeholder="Giới thiệu bản thân…"
- *     />
- *   )}
- * </AppField>
- *
- * ---
- *
- * **With clear button and helper note**
- * @example
- * <AppField name="search">
- *   {field => (
- *     <field.TextField
- *       label="Tìm kiếm"
- *       showClearButton
- *       helperText="Nhập ít nhất 3 ký tự để tìm kiếm."
- *     />
- *   )}
- * </AppField>
- *
- * ---
- *
- * **Horizontal layout**
- * @example
- * <AppField name="code">
- *   {field => (
- *     <field.TextField
- *       label="Mã sản phẩm"
- *       orientation="horizontal"
- *       tooltip="Mã duy nhất định danh sản phẩm trong hệ thống."
- *     />
- *   )}
- * </AppField>
- */
-declare const TextField: import("react").NamedExoticComponent<TextFieldProps>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/fields/textarea-field.d.ts
-declare const TextareaField: import("react").NamedExoticComponent<TextareaFieldProps>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/fields/text-editor-field.d.ts
-declare const TextEditorField: React.FC<TextEditorFieldProps>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/forms/action-submit.d.ts
-/**
- * Renders a submit button wired to the current TanStack Form context, automatically handling loading and disabled states.
- *
- * @example
- * import { TanStackActionSubmit } from '@customafk/lunas-ui/features/tanstack-form';
- *
- * // Inside a TanStack Form provider:
- * <TanStackActionSubmit label="Save Changes" className="mt-4" />
- */
-declare const TanStackActionSubmit: React.FC<{
-  /** Button label text. Defaults to `'Submit'` when omitted. */label?: string; /** Additional CSS class names applied to the button element. */
+  orientation?: "horizontal" | "vertical";
+}>;
+declare const ArrayCol: ComponentType<{
+  width?: number | string;
   className?: string;
+  children: React.ReactNode;
 }>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/forms/actions-form.d.ts
-/**
- * Renders a form action bar with a Cancel button and a context-aware submit button (Add New or Update) driven by TanStack Form state.
- *
- * @example
- * import { TanStackActionsForm } from '@customafk/lunas-ui/features/tanstack-form';
- *
- * // Inside a TanStack Form provider:
- * <TanStackActionsForm type="create" />
- *
- * // For an update workflow:
- * <TanStackActionsForm type="update" />
- */
-declare const TanStackActionsForm: React.FC<React.PropsWithChildren<{
-  /**
-   * Determines which submit button variant is rendered.
-   * - `'create'` — shows an "Add New" button that resets the form on success.
-   * - `'update'` — shows an "Update" button that resets the form on success.
-   * Defaults to `'create'`.
-   */
-  type?: 'create' | 'update';
-}>>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/forms/card-form.d.ts
-/**
- * Renders a card-style form section with a header, optional description, a delete button, and a content area for fields.
- *
- * @example
- * import { TanStackCardForm } from '@customafk/lunas-ui/features/tanstack-form';
- *
- * <TanStackCardForm
- *   title="Shipping Address"
- *   description="Where should we deliver your order?"
- *   onDelete={() => removeAddress(id)}
- * >
- *   <TextField name="street" />
- * </TanStackCardForm>
- */
-declare const TanStackCardForm: React.FC<React.PropsWithChildren<{
-  /** Bold heading text shown at the top of the card. */title: string; /** Optional secondary text rendered beneath the title. */
-  description?: string; /** When provided, renders a danger "Remove" button in the card's top-right corner. */
-  onDelete?: () => void | Promise<void>;
-}>>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/forms/container-form.d.ts
-/**
- * Wraps a set of TanStack form sections in a vertically-stacked flex container.
- *
- * @example
- * import { TanStackContainerForm } from '@customafk/lunas-ui/features/tanstack-form';
- *
- * <TanStackContainerForm>
- *   <TanStackSectionForm title="Personal Info">
- *     {/* fields *\/}
- *   </TanStackSectionForm>
- * </TanStackContainerForm>
- */
-declare const TanStackContainerForm: React.FC<React.PropsWithChildren>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/forms/dialog-form.d.ts
-/**
- * Renders a modal dialog that wraps a TanStack Form with a title, scrollable content area, and built-in submit/cancel actions.
- *
- * @example
- * import { TanStackDialogForm } from '@customafk/lunas-ui/features/tanstack-form';
- *
- * <TanStackDialogForm
- *   title="Create User"
- *   submitText="Create"
- *   className="max-w-lg"
- *   open={isOpen}
- *   onOpenChange={setIsOpen}
- * >
- *   <NameField />
- *   <EmailField />
- * </TanStackDialogForm>
- */
-declare const TanStackDialogForm: React.FC<React.PropsWithChildren<{
-  /** Heading text displayed in the dialog title bar. */title: string; /** Custom label for the submit button. Defaults to the `SubmitButton` component's built-in label when omitted. */
-  submitText?: string; /** Optional fixed width for the dialog content area, as a pixel number (e.g. `600`) or any CSS string (e.g. `'50%'`, `'40rem'`). Omit to let the dialog size itself based on content. */
-  width?: number | string; /** Optional fixed max-width for the dialog content area, as a pixel number (e.g. `600`) or any CSS string (e.g. `'50%'`, `'40rem'`). Omit to let the dialog size itself based on content and viewport. */
-  maxWidth?: number | string; /** Optional additional class name(s) to apply to the dialog content container. */
-  className?: string; /** Controlled open state of the dialog. */
-  open?: boolean; /** Callback fired when the dialog open state changes; the form is reset on close. */
+declare const ArrayHeaderRow: ComponentType<{
+  className?: string;
+  children: React.ReactNode;
+}>;
+declare const TanStackDialogForm: ComponentType<{
+  title: string;
+  submitText?: string;
+  width?: number | string;
+  maxWidth?: number | string;
+  className?: string;
+  open?: boolean;
   onOpenChange?: (open: boolean) => void;
-}>>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/forms/group-field.d.ts
-/**
- * Renders a labeled field group with an optional description, helper text, and a bottom separator.
- *
- * @example
- * import { TanStackFieldGroup } from '@customafk/lunas-ui/features/tanstack-form';
- *
- * <TanStackFieldGroup
- *   label="Contact Details"
- *   description="Enter your contact information."
- *   helperText="All fields are required."
- *   orientation="horizontal"
- * >
- *   <EmailField />
- * </TanStackFieldGroup>
- */
-declare const TanStackFieldGroup: React.FC<React.PropsWithChildren<{
-  /** Primary label displayed above the field content. */label: string; /** Secondary descriptive text shown beneath the label. */
-  description?: string; /** Supplementary helper note rendered below the field content. */
-  helperText?: string; /** Layout orientation of the label-to-content axis. Defaults to `'responsive'`. */
-  orientation?: 'horizontal' | 'vertical' | 'responsive';
-}>>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/forms/popover-form.d.ts
-/**
- * Renders a slide-in side-panel dialog that wraps a TanStack form with built-in submit and cancel actions.
- *
- * @example
- * import { TanStackPopoverForm } from '@customafk/lunas-ui/features/tanstack-form';
- *
- * <TanStackPopoverForm
- *   title="Edit Profile"
- *   open={isOpen}
- *   onOpenChange={setIsOpen}
- * >
- *   <EmailField />
- * </TanStackPopoverForm>
- */
-declare const TanStackPopoverForm: React.FC<React.PropsWithChildren<{
-  /** Heading text displayed in the panel header. */title: string; /** Controlled open state of the popover dialog. */
-  open?: boolean; /** Additional CSS class names applied to the scrollable content area. */
-  contentClassName?: string; /** Callback fired when the open state changes. */
+} & {
+  children?: import("react").ReactNode | undefined;
+}>;
+declare const TanStackPopoverForm: ComponentType<{
+  title: string;
+  open?: boolean;
+  contentClassName?: string;
   onOpenChange?: (open: boolean) => void;
-}>>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/forms/section-form.d.ts
-/**
- * Renders a card-like form section with a titled header, separator, and a content area for form fields.
- *
- * @example
- * import { TanStackSectionForm } from '@customafk/lunas-ui/features/tanstack-form';
- *
- * <TanStackSectionForm title="Account Settings">
- *   <EmailField />
- *   <PasswordField />
- * </TanStackSectionForm>
- */
-declare const TanStackSectionForm: React.FC<React.PropsWithChildren<{
-  /** Heading text displayed in the section header bar. */title: string;
-}>>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/forms/title-field.d.ts
-/**
- * Renders a standalone section title with an optional description and helper note, followed by a separator.
- *
- * @example
- * import { TanStackTitleField } from '@customafk/lunas-ui/features/tanstack-form';
- *
- * <TanStackTitleField
- *   title="Billing Address"
- *   description="Provide the address associated with your payment method."
- *   helperText="Must match your bank records."
- * />
- */
-declare const TanStackTitleField: React.FC<{
-  /** The heading text rendered as a legend element. */title: string; /** Optional supplementary text displayed beneath the title. */
-  description?: string; /** Optional helper note shown below the description area. */
+} & {
+  children?: import("react").ReactNode | undefined;
+}>;
+declare const TanStackContainerForm: ComponentType<{
+  children?: import("react").ReactNode | undefined;
+}>;
+declare const TanStackSectionForm: ComponentType<{
+  title: string;
+} & {
+  children?: import("react").ReactNode | undefined;
+}>;
+declare const TanStackCardForm: ComponentType<{
+  title: string;
+  description?: string;
+  onDelete?: () => void | Promise<void>;
+} & {
+  children?: import("react").ReactNode | undefined;
+}>;
+declare const TanStackFieldGroup: ComponentType<{
+  label: string;
+  description?: string;
   helperText?: string;
+  orientation?: "horizontal" | "vertical" | "responsive";
+} & {
+  children?: import("react").ReactNode | undefined;
 }>;
-//#endregion
-//#region packages/components/features/tanstack-form/components/ui/field.d.ts
-declare const fieldVariants: (props?: ({
+declare const TanStackTitleField: ComponentType<{
+  title: string;
+  description?: string;
+  helperText?: string;
+}>;
+declare const TanStackActionsForm: ComponentType<{
+  type?: "create" | "update";
+} & {
+  children?: import("react").ReactNode | undefined;
+}>;
+declare const TanStackActionSubmit: ComponentType<{
+  label?: string;
+  className?: string;
+}>;
+declare const FieldGroup: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+declare const Field: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("class-variance-authority").VariantProps<(props?: ({
   orientation?: "vertical" | "horizontal" | "responsive" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-/**
- * Outermost `<fieldset>` wrapper that stacks multiple `Field` rows with consistent vertical spacing.
- *
- * @example
- * import { FieldSet } from '@customafk/lunas-ui/features/tanstack-form';
- *
- * <FieldSet>
- *   <Field><FieldLabel>Name</FieldLabel><FieldContent><input /></FieldContent></Field>
- * </FieldSet>
- */
-/**
- * Container `<div>` that groups a set of `Field` rows with container-query support for responsive layouts.
- *
- * @example
- * import { FieldGroup } from '@customafk/lunas-ui/features/tanstack-form';
- *
- * <FieldGroup>
- *   <Field>…</Field>
- *   <Field>…</Field>
- * </FieldGroup>
- */
-declare const FieldGroup: import("react").MemoExoticComponent<({
-  className,
-  ...props
-}: React.ComponentProps<"div">) => import("react").JSX.Element>;
-/**
- * Single form field row that arranges label, input, and meta elements with configurable orientation.
- *
- * @example
- * import { Field } from '@customafk/lunas-ui/features/tanstack-form';
- *
- * <Field orientation="horizontal">
- *   <FieldLabel htmlFor="username">Username</FieldLabel>
- *   <FieldContent><input id="username" /></FieldContent>
- * </Field>
- */
-declare const Field: import("react").MemoExoticComponent<({
-  className,
-  orientation,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) => import("react").JSX.Element>;
-/**
- * Flex column wrapper that houses the primary input control together with description and error slots.
- *
- * @example
- * import { FieldContent } from '@customafk/lunas-ui/features/tanstack-form';
- *
- * <FieldContent>
- *   <input type="text" />
- *   <FieldDescription>Enter your full name.</FieldDescription>
- * </FieldContent>
- */
-declare const FieldContent: import("react").MemoExoticComponent<({
-  className,
-  ...props
-}: React.ComponentProps<"div">) => import("react").JSX.Element>;
-/**
- * Positioned wrapper for the main input element that enables absolutely-placed adornments (icons, spinners).
- *
- * @example
- * import { FieldContentMain } from '@customafk/lunas-ui/features/tanstack-form';
- *
- * <FieldContentMain>
- *   <input type="text" className="pr-8" />
- *   <SearchIcon className="absolute right-2 top-2" />
- * </FieldContentMain>
- */
-declare const FieldContentMain: import("react").MemoExoticComponent<({
-  className,
-  ...props
-}: React.ComponentProps<"div">) => import("react").JSX.Element>;
-/**
- * Styled `<label>` element for a `Field`, extending the base `Label` with field-group-aware spacing and border states.
- *
- * @example
- * import { FieldLabel } from '@customafk/lunas-ui/features/tanstack-form';
- *
- * <FieldLabel htmlFor="email" aria-required>Email</FieldLabel>
- */
-declare const FieldLabel: import("react").MemoExoticComponent<({
-  className,
-  ...props
-}: React.ComponentProps<typeof Label$1>) => import("react").JSX.Element>;
-/**
- * Inline title element (non-`<label>`) for fields whose label cannot be a native `<label>`, such as custom checkbox groups.
- *
- * @example
- * import { FieldTitle } from '@customafk/lunas-ui/features/tanstack-form';
- *
- * <FieldTitle>Notification preferences</FieldTitle>
- */
-/**
- * Visual divider row that optionally displays a centered text label, used to separate logical sections within a `FieldGroup`.
- *
- * @example
- * import { FieldSeparator } from '@customafk/lunas-ui/features/tanstack-form';
- *
- * <FieldSeparator>or</FieldSeparator>
- */
-declare const FieldSeparator: import("react").MemoExoticComponent<({
-  children,
-  className,
-  ...props
-}: React.PropsWithChildren<React.ComponentProps<"div">>) => import("react").JSX.Element>;
-/**
- * Props for {@link FieldError}.
- */
-type FieldErrorProps = React.ComponentProps<'div'> & {
+} & import("class-variance-authority/types").ClassProp) | undefined) => string>>;
+declare const FieldContent: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+declare const FieldLabel: ComponentType<LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+declare const FieldContentMain: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+declare const FieldSeparator: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+  children?: import("react").ReactNode | undefined;
+}>;
+declare const FieldError: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
   errors?: Array<{
     code?: string;
     message?: string;
   } | undefined>;
   requiredMessage?: string;
-};
-declare const FieldError: import("react").MemoExoticComponent<({
-  className,
-  children,
-  errors,
-  requiredMessage,
-  ...props
-}: FieldErrorProps) => import("react").JSX.Element | null>;
-//#endregion
-//#region packages/components/features/tanstack-form/tanstack-form.d.ts
-declare const useTanStackFieldContext: <TData>() => FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>, useTanStackFormContext: () => import("@tanstack/react-form").ReactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any, any, any>;
+}>;
 /**
  * Factory result from {@link createFormHook} pre-wired with all Lunas UI field and form components.
  *
@@ -2766,33 +2275,33 @@ declare const useTanStackFieldContext: <TData>() => FieldApi<any, string, TData,
  * ));
  */
 declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFormData> | undefined, TOnChange extends FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta>(props: FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, {
-    readonly TextField: import("react").NamedExoticComponent<TextFieldProps>;
-    readonly TextareaField: import("react").NamedExoticComponent<TextareaFieldProps>;
-    readonly TextEditorField: import("react").FC<TextEditorFieldProps>;
-    readonly NumberField: import("react").NamedExoticComponent<NumberFieldProps>;
-    readonly EmailField: import("react").FC<EmailFieldProps>;
-    readonly PasswordField: import("react").FC<PasswordFieldProps>;
-    readonly SelectField: import("react").NamedExoticComponent<SelectFieldProps>;
-    readonly ComboboxField: import("react").NamedExoticComponent<ComboboxFieldProps>;
-    readonly DateField: import("react").NamedExoticComponent<DateFieldProps>;
-    readonly SwitchField: import("react").FC<SwitchFieldProps>;
-    readonly RadioGroupField: import("react").FC<RadioGroupFieldProps>;
-    readonly CheckboxField: import("react").FC<CheckboxFieldProps>;
-    readonly SimpleTextField: import("react").FC<SimpleTextFieldProps>;
-    readonly SimpleEmailField: import("react").FC<{
+    readonly TextField: ComponentType<TextFieldProps>;
+    readonly TextareaField: ComponentType<TextareaFieldProps>;
+    readonly TextEditorField: ComponentType<TextEditorFieldProps>;
+    readonly NumberField: ComponentType<NumberFieldProps>;
+    readonly EmailField: ComponentType<EmailFieldProps>;
+    readonly PasswordField: ComponentType<PasswordFieldProps>;
+    readonly SelectField: ComponentType<SelectFieldProps>;
+    readonly ComboboxField: ComponentType<ComboboxFieldProps>;
+    readonly DateField: ComponentType<DateFieldProps>;
+    readonly SwitchField: ComponentType<SwitchFieldProps>;
+    readonly RadioGroupField: ComponentType<RadioGroupFieldProps>;
+    readonly CheckboxField: ComponentType<CheckboxFieldProps>;
+    readonly SimpleTextField: ComponentType<SimpleTextFieldProps>;
+    readonly SimpleEmailField: ComponentType<{
       label?: string;
       placeholder?: string;
       required?: boolean;
       maxLength?: number;
       disabled?: boolean;
     }>;
-    readonly SimplePasswordField: import("react").FC<{
+    readonly SimplePasswordField: ComponentType<{
       label?: string;
       placeholder?: string;
       required?: boolean;
       disabled?: boolean;
     }>;
-    readonly SimpleTextareaField: import("react").FC<{
+    readonly SimpleTextareaField: ComponentType<{
       label?: string;
       placeholder?: string;
       required?: boolean;
@@ -2800,7 +2309,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
       rows?: number;
       disabled?: boolean;
     }>;
-    readonly SimpleNumberField: import("react").FC<{
+    readonly SimpleNumberField: ComponentType<{
       label?: string;
       placeholder?: string;
       required?: boolean;
@@ -2808,7 +2317,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
       allowNegative?: boolean;
       disabled?: boolean;
     }>;
-    readonly SimpleSelectField: import("react").FC<{
+    readonly SimpleSelectField: ComponentType<{
       label?: string;
       placeholder?: string;
       required?: boolean;
@@ -2818,13 +2327,13 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
       }>;
     }>;
     readonly SimpleArrayField: typeof SimpleArrayField;
-    readonly SimpleBooleanField: import("react").FC<{
+    readonly SimpleBooleanField: ComponentType<{
       label?: string;
       required?: boolean;
       disabled?: boolean;
       variant?: "checkbox" | "switch";
     }>;
-    readonly SimpleComboboxField: import("react").FC<{
+    readonly SimpleComboboxField: ComponentType<{
       label?: string;
       placeholder?: string;
       required?: boolean;
@@ -2834,7 +2343,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
         label: string;
       }>;
     }>;
-    readonly SimpleDateField: import("react").FC<{
+    readonly SimpleDateField: ComponentType<{
       label?: string;
       placeholder?: string;
       required?: boolean;
@@ -2842,7 +2351,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
       minDate?: Date;
       maxDate?: Date;
     }>;
-    readonly SimpleRadioGroupField: import("react").FC<{
+    readonly SimpleRadioGroupField: ComponentType<{
       label?: string;
       required?: boolean;
       disabled?: boolean;
@@ -2852,49 +2361,25 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
       }>;
       orientation?: "horizontal" | "vertical";
     }>;
-    readonly FieldGroup: import("react").MemoExoticComponent<({
-      className,
-      ...props
-    }: React.ComponentProps<"div">) => import("react").JSX.Element>;
-    readonly Field: import("react").MemoExoticComponent<({
-      className,
-      orientation,
-      ...props
-    }: React.ComponentProps<"div"> & import("class-variance-authority").VariantProps<(props?: ({
+    readonly FieldGroup: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+    readonly Field: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("class-variance-authority").VariantProps<(props?: ({
       orientation?: "vertical" | "horizontal" | "responsive" | null | undefined;
-    } & import("class-variance-authority/types").ClassProp) | undefined) => string>) => import("react").JSX.Element>;
-    readonly FieldContent: import("react").MemoExoticComponent<({
-      className,
-      ...props
-    }: React.ComponentProps<"div">) => import("react").JSX.Element>;
-    readonly FieldLabel: import("react").MemoExoticComponent<({
-      className,
-      ...props
-    }: React.ComponentProps<typeof Label$1>) => import("react").JSX.Element>;
-    readonly FieldContentMain: import("react").MemoExoticComponent<({
-      className,
-      ...props
-    }: React.ComponentProps<"div">) => import("react").JSX.Element>;
-    readonly FieldSeparator: import("react").MemoExoticComponent<({
-      children,
-      className,
-      ...props
-    }: React.PropsWithChildren<React.ComponentProps<"div">>) => import("react").JSX.Element>;
-    readonly FieldError: import("react").MemoExoticComponent<({
-      className,
-      children,
-      errors,
-      requiredMessage,
-      ...props
-    }: import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string>>;
+    readonly FieldContent: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+    readonly FieldLabel: ComponentType<LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+    readonly FieldContentMain: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+    readonly FieldSeparator: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+      children?: import("react").ReactNode | undefined;
+    }>;
+    readonly FieldError: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
       errors?: Array<{
         code?: string;
         message?: string;
       } | undefined>;
       requiredMessage?: string;
-    }) => import("react").JSX.Element | null>;
+    }>;
   }, {
-    readonly TanStackDialogForm: import("react").FC<import("react").PropsWithChildren<{
+    readonly TanStackDialogForm: ComponentType<{
       title: string;
       submitText?: string;
       width?: number | string;
@@ -2902,75 +2387,94 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
       className?: string;
       open?: boolean;
       onOpenChange?: (open: boolean) => void;
-    }>>;
-    readonly TanStackPopoverForm: import("react").FC<import("react").PropsWithChildren<{
+    } & {
+      children?: import("react").ReactNode | undefined;
+    }>;
+    readonly TanStackPopoverForm: ComponentType<{
       title: string;
       open?: boolean;
       contentClassName?: string;
       onOpenChange?: (open: boolean) => void;
-    }>>;
-    readonly TanStackContainerForm: import("react").FC<{
+    } & {
+      children?: import("react").ReactNode | undefined;
+    }>;
+    readonly TanStackContainerForm: ComponentType<{
       children?: import("react").ReactNode | undefined;
     }>;
-    readonly TanStackSectionForm: import("react").FC<import("react").PropsWithChildren<{
+    readonly TanStackSectionForm: ComponentType<{
       title: string;
-    }>>;
-    readonly TanStackCardForm: import("react").FC<import("react").PropsWithChildren<{
+    } & {
+      children?: import("react").ReactNode | undefined;
+    }>;
+    readonly TanStackCardForm: ComponentType<{
       title: string;
       description?: string;
       onDelete?: () => void | Promise<void>;
-    }>>;
-    readonly TanStackFieldGroup: import("react").FC<import("react").PropsWithChildren<{
+    } & {
+      children?: import("react").ReactNode | undefined;
+    }>;
+    readonly TanStackFieldGroup: ComponentType<{
       label: string;
       description?: string;
       helperText?: string;
       orientation?: "horizontal" | "vertical" | "responsive";
-    }>>;
-    readonly TanStackTitleField: import("react").FC<{
+    } & {
+      children?: import("react").ReactNode | undefined;
+    }>;
+    readonly TanStackTitleField: ComponentType<{
       title: string;
       description?: string;
       helperText?: string;
     }>;
-    readonly TanStackActionsForm: import("react").FC<import("react").PropsWithChildren<{
+    readonly TanStackActionsForm: ComponentType<{
       type?: "create" | "update";
-    }>>;
-    readonly TanStackActionSubmit: import("react").FC<{
+    } & {
+      children?: import("react").ReactNode | undefined;
+    }>;
+    readonly TanStackActionSubmit: ComponentType<{
       label?: string;
       className?: string;
     }>;
-    readonly ArrayCol: typeof ArrayCol;
-    readonly ArrayHeaderRow: typeof ArrayHeaderRow;
+    readonly ArrayCol: ComponentType<{
+      width?: number | string;
+      className?: string;
+      children: React.ReactNode;
+    }>;
+    readonly ArrayHeaderRow: ComponentType<{
+      className?: string;
+      children: React.ReactNode;
+    }>;
   }>, withTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFormData> | undefined, TOnChange extends FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta, TRenderProps extends object = {}>({
     render,
     props
   }: import("@tanstack/react-form").WithFormProps<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, {
-    readonly TextField: import("react").NamedExoticComponent<TextFieldProps>;
-    readonly TextareaField: import("react").NamedExoticComponent<TextareaFieldProps>;
-    readonly TextEditorField: import("react").FC<TextEditorFieldProps>;
-    readonly NumberField: import("react").NamedExoticComponent<NumberFieldProps>;
-    readonly EmailField: import("react").FC<EmailFieldProps>;
-    readonly PasswordField: import("react").FC<PasswordFieldProps>;
-    readonly SelectField: import("react").NamedExoticComponent<SelectFieldProps>;
-    readonly ComboboxField: import("react").NamedExoticComponent<ComboboxFieldProps>;
-    readonly DateField: import("react").NamedExoticComponent<DateFieldProps>;
-    readonly SwitchField: import("react").FC<SwitchFieldProps>;
-    readonly RadioGroupField: import("react").FC<RadioGroupFieldProps>;
-    readonly CheckboxField: import("react").FC<CheckboxFieldProps>;
-    readonly SimpleTextField: import("react").FC<SimpleTextFieldProps>;
-    readonly SimpleEmailField: import("react").FC<{
+    readonly TextField: ComponentType<TextFieldProps>;
+    readonly TextareaField: ComponentType<TextareaFieldProps>;
+    readonly TextEditorField: ComponentType<TextEditorFieldProps>;
+    readonly NumberField: ComponentType<NumberFieldProps>;
+    readonly EmailField: ComponentType<EmailFieldProps>;
+    readonly PasswordField: ComponentType<PasswordFieldProps>;
+    readonly SelectField: ComponentType<SelectFieldProps>;
+    readonly ComboboxField: ComponentType<ComboboxFieldProps>;
+    readonly DateField: ComponentType<DateFieldProps>;
+    readonly SwitchField: ComponentType<SwitchFieldProps>;
+    readonly RadioGroupField: ComponentType<RadioGroupFieldProps>;
+    readonly CheckboxField: ComponentType<CheckboxFieldProps>;
+    readonly SimpleTextField: ComponentType<SimpleTextFieldProps>;
+    readonly SimpleEmailField: ComponentType<{
       label?: string;
       placeholder?: string;
       required?: boolean;
       maxLength?: number;
       disabled?: boolean;
     }>;
-    readonly SimplePasswordField: import("react").FC<{
+    readonly SimplePasswordField: ComponentType<{
       label?: string;
       placeholder?: string;
       required?: boolean;
       disabled?: boolean;
     }>;
-    readonly SimpleTextareaField: import("react").FC<{
+    readonly SimpleTextareaField: ComponentType<{
       label?: string;
       placeholder?: string;
       required?: boolean;
@@ -2978,7 +2482,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
       rows?: number;
       disabled?: boolean;
     }>;
-    readonly SimpleNumberField: import("react").FC<{
+    readonly SimpleNumberField: ComponentType<{
       label?: string;
       placeholder?: string;
       required?: boolean;
@@ -2986,7 +2490,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
       allowNegative?: boolean;
       disabled?: boolean;
     }>;
-    readonly SimpleSelectField: import("react").FC<{
+    readonly SimpleSelectField: ComponentType<{
       label?: string;
       placeholder?: string;
       required?: boolean;
@@ -2996,13 +2500,13 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
       }>;
     }>;
     readonly SimpleArrayField: typeof SimpleArrayField;
-    readonly SimpleBooleanField: import("react").FC<{
+    readonly SimpleBooleanField: ComponentType<{
       label?: string;
       required?: boolean;
       disabled?: boolean;
       variant?: "checkbox" | "switch";
     }>;
-    readonly SimpleComboboxField: import("react").FC<{
+    readonly SimpleComboboxField: ComponentType<{
       label?: string;
       placeholder?: string;
       required?: boolean;
@@ -3012,7 +2516,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
         label: string;
       }>;
     }>;
-    readonly SimpleDateField: import("react").FC<{
+    readonly SimpleDateField: ComponentType<{
       label?: string;
       placeholder?: string;
       required?: boolean;
@@ -3020,7 +2524,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
       minDate?: Date;
       maxDate?: Date;
     }>;
-    readonly SimpleRadioGroupField: import("react").FC<{
+    readonly SimpleRadioGroupField: ComponentType<{
       label?: string;
       required?: boolean;
       disabled?: boolean;
@@ -3030,49 +2534,25 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
       }>;
       orientation?: "horizontal" | "vertical";
     }>;
-    readonly FieldGroup: import("react").MemoExoticComponent<({
-      className,
-      ...props
-    }: React.ComponentProps<"div">) => import("react").JSX.Element>;
-    readonly Field: import("react").MemoExoticComponent<({
-      className,
-      orientation,
-      ...props
-    }: React.ComponentProps<"div"> & import("class-variance-authority").VariantProps<(props?: ({
+    readonly FieldGroup: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+    readonly Field: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("class-variance-authority").VariantProps<(props?: ({
       orientation?: "vertical" | "horizontal" | "responsive" | null | undefined;
-    } & import("class-variance-authority/types").ClassProp) | undefined) => string>) => import("react").JSX.Element>;
-    readonly FieldContent: import("react").MemoExoticComponent<({
-      className,
-      ...props
-    }: React.ComponentProps<"div">) => import("react").JSX.Element>;
-    readonly FieldLabel: import("react").MemoExoticComponent<({
-      className,
-      ...props
-    }: React.ComponentProps<typeof Label$1>) => import("react").JSX.Element>;
-    readonly FieldContentMain: import("react").MemoExoticComponent<({
-      className,
-      ...props
-    }: React.ComponentProps<"div">) => import("react").JSX.Element>;
-    readonly FieldSeparator: import("react").MemoExoticComponent<({
-      children,
-      className,
-      ...props
-    }: React.PropsWithChildren<React.ComponentProps<"div">>) => import("react").JSX.Element>;
-    readonly FieldError: import("react").MemoExoticComponent<({
-      className,
-      children,
-      errors,
-      requiredMessage,
-      ...props
-    }: import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string>>;
+    readonly FieldContent: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+    readonly FieldLabel: ComponentType<LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+    readonly FieldContentMain: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+    readonly FieldSeparator: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+      children?: import("react").ReactNode | undefined;
+    }>;
+    readonly FieldError: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
       errors?: Array<{
         code?: string;
         message?: string;
       } | undefined>;
       requiredMessage?: string;
-    }) => import("react").JSX.Element | null>;
+    }>;
   }, {
-    readonly TanStackDialogForm: import("react").FC<import("react").PropsWithChildren<{
+    readonly TanStackDialogForm: ComponentType<{
       title: string;
       submitText?: string;
       width?: number | string;
@@ -3080,73 +2560,92 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
       className?: string;
       open?: boolean;
       onOpenChange?: (open: boolean) => void;
-    }>>;
-    readonly TanStackPopoverForm: import("react").FC<import("react").PropsWithChildren<{
+    } & {
+      children?: import("react").ReactNode | undefined;
+    }>;
+    readonly TanStackPopoverForm: ComponentType<{
       title: string;
       open?: boolean;
       contentClassName?: string;
       onOpenChange?: (open: boolean) => void;
-    }>>;
-    readonly TanStackContainerForm: import("react").FC<{
+    } & {
       children?: import("react").ReactNode | undefined;
     }>;
-    readonly TanStackSectionForm: import("react").FC<import("react").PropsWithChildren<{
+    readonly TanStackContainerForm: ComponentType<{
+      children?: import("react").ReactNode | undefined;
+    }>;
+    readonly TanStackSectionForm: ComponentType<{
       title: string;
-    }>>;
-    readonly TanStackCardForm: import("react").FC<import("react").PropsWithChildren<{
+    } & {
+      children?: import("react").ReactNode | undefined;
+    }>;
+    readonly TanStackCardForm: ComponentType<{
       title: string;
       description?: string;
       onDelete?: () => void | Promise<void>;
-    }>>;
-    readonly TanStackFieldGroup: import("react").FC<import("react").PropsWithChildren<{
+    } & {
+      children?: import("react").ReactNode | undefined;
+    }>;
+    readonly TanStackFieldGroup: ComponentType<{
       label: string;
       description?: string;
       helperText?: string;
       orientation?: "horizontal" | "vertical" | "responsive";
-    }>>;
-    readonly TanStackTitleField: import("react").FC<{
+    } & {
+      children?: import("react").ReactNode | undefined;
+    }>;
+    readonly TanStackTitleField: ComponentType<{
       title: string;
       description?: string;
       helperText?: string;
     }>;
-    readonly TanStackActionsForm: import("react").FC<import("react").PropsWithChildren<{
+    readonly TanStackActionsForm: ComponentType<{
       type?: "create" | "update";
-    }>>;
-    readonly TanStackActionSubmit: import("react").FC<{
+    } & {
+      children?: import("react").ReactNode | undefined;
+    }>;
+    readonly TanStackActionSubmit: ComponentType<{
       label?: string;
       className?: string;
     }>;
-    readonly ArrayCol: typeof ArrayCol;
-    readonly ArrayHeaderRow: typeof ArrayHeaderRow;
+    readonly ArrayCol: ComponentType<{
+      width?: number | string;
+      className?: string;
+      children: React.ReactNode;
+    }>;
+    readonly ArrayHeaderRow: ComponentType<{
+      className?: string;
+      children: React.ReactNode;
+    }>;
   }, TRenderProps>) => import("react").FunctionComponent<import("react").PropsWithChildren<NoInfer<[unknown] extends [TRenderProps] ? any : TRenderProps> & {
     form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [FormValidateOrFn<TFormData> | undefined] extends [TOnMount] ? [TOnMount] extends [TOnMount & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount : TOnMount, [FormValidateOrFn<TFormData> | undefined] extends [TOnChange] ? [TOnChange] extends [TOnChange & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange : TOnChange, [FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync] ? [TOnChangeAsync] extends [TOnChangeAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync : TOnChangeAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnBlur] ? [TOnBlur] extends [TOnBlur & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur : TOnBlur, [FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync] ? [TOnBlurAsync] extends [TOnBlurAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync : TOnBlurAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit] ? [TOnSubmit] extends [TOnSubmit & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit : TOnSubmit, [FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync] ? [TOnSubmitAsync] extends [TOnSubmitAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync : TOnSubmitAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnDynamic] ? [TOnDynamic] extends [TOnDynamic & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamic : TOnDynamic, [FormValidateOrFn<TFormData> | undefined] extends [TOnDynamicAsync] ? [TOnDynamicAsync] extends [TOnDynamicAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamicAsync : TOnDynamicAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnServer] ? [TOnServer] extends [TOnServer & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer : TOnServer, [unknown] extends [TSubmitMeta] ? any : TSubmitMeta, {
-      readonly TextField: import("react").NamedExoticComponent<TextFieldProps>;
-      readonly TextareaField: import("react").NamedExoticComponent<TextareaFieldProps>;
-      readonly TextEditorField: import("react").FC<TextEditorFieldProps>;
-      readonly NumberField: import("react").NamedExoticComponent<NumberFieldProps>;
-      readonly EmailField: import("react").FC<EmailFieldProps>;
-      readonly PasswordField: import("react").FC<PasswordFieldProps>;
-      readonly SelectField: import("react").NamedExoticComponent<SelectFieldProps>;
-      readonly ComboboxField: import("react").NamedExoticComponent<ComboboxFieldProps>;
-      readonly DateField: import("react").NamedExoticComponent<DateFieldProps>;
-      readonly SwitchField: import("react").FC<SwitchFieldProps>;
-      readonly RadioGroupField: import("react").FC<RadioGroupFieldProps>;
-      readonly CheckboxField: import("react").FC<CheckboxFieldProps>;
-      readonly SimpleTextField: import("react").FC<SimpleTextFieldProps>;
-      readonly SimpleEmailField: import("react").FC<{
+      readonly TextField: ComponentType<TextFieldProps>;
+      readonly TextareaField: ComponentType<TextareaFieldProps>;
+      readonly TextEditorField: ComponentType<TextEditorFieldProps>;
+      readonly NumberField: ComponentType<NumberFieldProps>;
+      readonly EmailField: ComponentType<EmailFieldProps>;
+      readonly PasswordField: ComponentType<PasswordFieldProps>;
+      readonly SelectField: ComponentType<SelectFieldProps>;
+      readonly ComboboxField: ComponentType<ComboboxFieldProps>;
+      readonly DateField: ComponentType<DateFieldProps>;
+      readonly SwitchField: ComponentType<SwitchFieldProps>;
+      readonly RadioGroupField: ComponentType<RadioGroupFieldProps>;
+      readonly CheckboxField: ComponentType<CheckboxFieldProps>;
+      readonly SimpleTextField: ComponentType<SimpleTextFieldProps>;
+      readonly SimpleEmailField: ComponentType<{
         label?: string;
         placeholder?: string;
         required?: boolean;
         maxLength?: number;
         disabled?: boolean;
       }>;
-      readonly SimplePasswordField: import("react").FC<{
+      readonly SimplePasswordField: ComponentType<{
         label?: string;
         placeholder?: string;
         required?: boolean;
         disabled?: boolean;
       }>;
-      readonly SimpleTextareaField: import("react").FC<{
+      readonly SimpleTextareaField: ComponentType<{
         label?: string;
         placeholder?: string;
         required?: boolean;
@@ -3154,7 +2653,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
         rows?: number;
         disabled?: boolean;
       }>;
-      readonly SimpleNumberField: import("react").FC<{
+      readonly SimpleNumberField: ComponentType<{
         label?: string;
         placeholder?: string;
         required?: boolean;
@@ -3162,7 +2661,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
         allowNegative?: boolean;
         disabled?: boolean;
       }>;
-      readonly SimpleSelectField: import("react").FC<{
+      readonly SimpleSelectField: ComponentType<{
         label?: string;
         placeholder?: string;
         required?: boolean;
@@ -3172,13 +2671,13 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
         }>;
       }>;
       readonly SimpleArrayField: typeof SimpleArrayField;
-      readonly SimpleBooleanField: import("react").FC<{
+      readonly SimpleBooleanField: ComponentType<{
         label?: string;
         required?: boolean;
         disabled?: boolean;
         variant?: "checkbox" | "switch";
       }>;
-      readonly SimpleComboboxField: import("react").FC<{
+      readonly SimpleComboboxField: ComponentType<{
         label?: string;
         placeholder?: string;
         required?: boolean;
@@ -3188,7 +2687,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
           label: string;
         }>;
       }>;
-      readonly SimpleDateField: import("react").FC<{
+      readonly SimpleDateField: ComponentType<{
         label?: string;
         placeholder?: string;
         required?: boolean;
@@ -3196,7 +2695,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
         minDate?: Date;
         maxDate?: Date;
       }>;
-      readonly SimpleRadioGroupField: import("react").FC<{
+      readonly SimpleRadioGroupField: ComponentType<{
         label?: string;
         required?: boolean;
         disabled?: boolean;
@@ -3206,49 +2705,25 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
         }>;
         orientation?: "horizontal" | "vertical";
       }>;
-      readonly FieldGroup: import("react").MemoExoticComponent<({
-        className,
-        ...props
-      }: React.ComponentProps<"div">) => import("react").JSX.Element>;
-      readonly Field: import("react").MemoExoticComponent<({
-        className,
-        orientation,
-        ...props
-      }: React.ComponentProps<"div"> & import("class-variance-authority").VariantProps<(props?: ({
+      readonly FieldGroup: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+      readonly Field: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("class-variance-authority").VariantProps<(props?: ({
         orientation?: "vertical" | "horizontal" | "responsive" | null | undefined;
-      } & import("class-variance-authority/types").ClassProp) | undefined) => string>) => import("react").JSX.Element>;
-      readonly FieldContent: import("react").MemoExoticComponent<({
-        className,
-        ...props
-      }: React.ComponentProps<"div">) => import("react").JSX.Element>;
-      readonly FieldLabel: import("react").MemoExoticComponent<({
-        className,
-        ...props
-      }: React.ComponentProps<typeof Label$1>) => import("react").JSX.Element>;
-      readonly FieldContentMain: import("react").MemoExoticComponent<({
-        className,
-        ...props
-      }: React.ComponentProps<"div">) => import("react").JSX.Element>;
-      readonly FieldSeparator: import("react").MemoExoticComponent<({
-        children,
-        className,
-        ...props
-      }: React.PropsWithChildren<React.ComponentProps<"div">>) => import("react").JSX.Element>;
-      readonly FieldError: import("react").MemoExoticComponent<({
-        className,
-        children,
-        errors,
-        requiredMessage,
-        ...props
-      }: import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+      } & import("class-variance-authority/types").ClassProp) | undefined) => string>>;
+      readonly FieldContent: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+      readonly FieldLabel: ComponentType<LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+      readonly FieldContentMain: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+      readonly FieldSeparator: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+        children?: import("react").ReactNode | undefined;
+      }>;
+      readonly FieldError: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
         errors?: Array<{
           code?: string;
           message?: string;
         } | undefined>;
         requiredMessage?: string;
-      }) => import("react").JSX.Element | null>;
+      }>;
     }, {
-      readonly TanStackDialogForm: import("react").FC<import("react").PropsWithChildren<{
+      readonly TanStackDialogForm: ComponentType<{
         title: string;
         submitText?: string;
         width?: number | string;
@@ -3256,77 +2731,96 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
         className?: string;
         open?: boolean;
         onOpenChange?: (open: boolean) => void;
-      }>>;
-      readonly TanStackPopoverForm: import("react").FC<import("react").PropsWithChildren<{
+      } & {
+        children?: import("react").ReactNode | undefined;
+      }>;
+      readonly TanStackPopoverForm: ComponentType<{
         title: string;
         open?: boolean;
         contentClassName?: string;
         onOpenChange?: (open: boolean) => void;
-      }>>;
-      readonly TanStackContainerForm: import("react").FC<{
+      } & {
+        children?: import("react").ReactNode | undefined;
+      }>;
+      readonly TanStackContainerForm: ComponentType<{
         children?: import("react").ReactNode | undefined;
       }>;
-      readonly TanStackSectionForm: import("react").FC<import("react").PropsWithChildren<{
+      readonly TanStackSectionForm: ComponentType<{
         title: string;
-      }>>;
-      readonly TanStackCardForm: import("react").FC<import("react").PropsWithChildren<{
+      } & {
+        children?: import("react").ReactNode | undefined;
+      }>;
+      readonly TanStackCardForm: ComponentType<{
         title: string;
         description?: string;
         onDelete?: () => void | Promise<void>;
-      }>>;
-      readonly TanStackFieldGroup: import("react").FC<import("react").PropsWithChildren<{
+      } & {
+        children?: import("react").ReactNode | undefined;
+      }>;
+      readonly TanStackFieldGroup: ComponentType<{
         label: string;
         description?: string;
         helperText?: string;
         orientation?: "horizontal" | "vertical" | "responsive";
-      }>>;
-      readonly TanStackTitleField: import("react").FC<{
+      } & {
+        children?: import("react").ReactNode | undefined;
+      }>;
+      readonly TanStackTitleField: ComponentType<{
         title: string;
         description?: string;
         helperText?: string;
       }>;
-      readonly TanStackActionsForm: import("react").FC<import("react").PropsWithChildren<{
+      readonly TanStackActionsForm: ComponentType<{
         type?: "create" | "update";
-      }>>;
-      readonly TanStackActionSubmit: import("react").FC<{
+      } & {
+        children?: import("react").ReactNode | undefined;
+      }>;
+      readonly TanStackActionSubmit: ComponentType<{
         label?: string;
         className?: string;
       }>;
-      readonly ArrayCol: typeof ArrayCol;
-      readonly ArrayHeaderRow: typeof ArrayHeaderRow;
+      readonly ArrayCol: ComponentType<{
+        width?: number | string;
+        className?: string;
+        children: React.ReactNode;
+      }>;
+      readonly ArrayHeaderRow: ComponentType<{
+        className?: string;
+        children: React.ReactNode;
+      }>;
     }>;
   }>>, withTanStackFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps extends object = {}>({
     render,
     props,
     defaultValues
   }: import("@tanstack/react-form").WithFieldGroupProps<TFieldGroupData, {
-    readonly TextField: import("react").NamedExoticComponent<TextFieldProps>;
-    readonly TextareaField: import("react").NamedExoticComponent<TextareaFieldProps>;
-    readonly TextEditorField: import("react").FC<TextEditorFieldProps>;
-    readonly NumberField: import("react").NamedExoticComponent<NumberFieldProps>;
-    readonly EmailField: import("react").FC<EmailFieldProps>;
-    readonly PasswordField: import("react").FC<PasswordFieldProps>;
-    readonly SelectField: import("react").NamedExoticComponent<SelectFieldProps>;
-    readonly ComboboxField: import("react").NamedExoticComponent<ComboboxFieldProps>;
-    readonly DateField: import("react").NamedExoticComponent<DateFieldProps>;
-    readonly SwitchField: import("react").FC<SwitchFieldProps>;
-    readonly RadioGroupField: import("react").FC<RadioGroupFieldProps>;
-    readonly CheckboxField: import("react").FC<CheckboxFieldProps>;
-    readonly SimpleTextField: import("react").FC<SimpleTextFieldProps>;
-    readonly SimpleEmailField: import("react").FC<{
+    readonly TextField: ComponentType<TextFieldProps>;
+    readonly TextareaField: ComponentType<TextareaFieldProps>;
+    readonly TextEditorField: ComponentType<TextEditorFieldProps>;
+    readonly NumberField: ComponentType<NumberFieldProps>;
+    readonly EmailField: ComponentType<EmailFieldProps>;
+    readonly PasswordField: ComponentType<PasswordFieldProps>;
+    readonly SelectField: ComponentType<SelectFieldProps>;
+    readonly ComboboxField: ComponentType<ComboboxFieldProps>;
+    readonly DateField: ComponentType<DateFieldProps>;
+    readonly SwitchField: ComponentType<SwitchFieldProps>;
+    readonly RadioGroupField: ComponentType<RadioGroupFieldProps>;
+    readonly CheckboxField: ComponentType<CheckboxFieldProps>;
+    readonly SimpleTextField: ComponentType<SimpleTextFieldProps>;
+    readonly SimpleEmailField: ComponentType<{
       label?: string;
       placeholder?: string;
       required?: boolean;
       maxLength?: number;
       disabled?: boolean;
     }>;
-    readonly SimplePasswordField: import("react").FC<{
+    readonly SimplePasswordField: ComponentType<{
       label?: string;
       placeholder?: string;
       required?: boolean;
       disabled?: boolean;
     }>;
-    readonly SimpleTextareaField: import("react").FC<{
+    readonly SimpleTextareaField: ComponentType<{
       label?: string;
       placeholder?: string;
       required?: boolean;
@@ -3334,7 +2828,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
       rows?: number;
       disabled?: boolean;
     }>;
-    readonly SimpleNumberField: import("react").FC<{
+    readonly SimpleNumberField: ComponentType<{
       label?: string;
       placeholder?: string;
       required?: boolean;
@@ -3342,7 +2836,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
       allowNegative?: boolean;
       disabled?: boolean;
     }>;
-    readonly SimpleSelectField: import("react").FC<{
+    readonly SimpleSelectField: ComponentType<{
       label?: string;
       placeholder?: string;
       required?: boolean;
@@ -3352,13 +2846,13 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
       }>;
     }>;
     readonly SimpleArrayField: typeof SimpleArrayField;
-    readonly SimpleBooleanField: import("react").FC<{
+    readonly SimpleBooleanField: ComponentType<{
       label?: string;
       required?: boolean;
       disabled?: boolean;
       variant?: "checkbox" | "switch";
     }>;
-    readonly SimpleComboboxField: import("react").FC<{
+    readonly SimpleComboboxField: ComponentType<{
       label?: string;
       placeholder?: string;
       required?: boolean;
@@ -3368,7 +2862,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
         label: string;
       }>;
     }>;
-    readonly SimpleDateField: import("react").FC<{
+    readonly SimpleDateField: ComponentType<{
       label?: string;
       placeholder?: string;
       required?: boolean;
@@ -3376,7 +2870,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
       minDate?: Date;
       maxDate?: Date;
     }>;
-    readonly SimpleRadioGroupField: import("react").FC<{
+    readonly SimpleRadioGroupField: ComponentType<{
       label?: string;
       required?: boolean;
       disabled?: boolean;
@@ -3386,49 +2880,25 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
       }>;
       orientation?: "horizontal" | "vertical";
     }>;
-    readonly FieldGroup: import("react").MemoExoticComponent<({
-      className,
-      ...props
-    }: React.ComponentProps<"div">) => import("react").JSX.Element>;
-    readonly Field: import("react").MemoExoticComponent<({
-      className,
-      orientation,
-      ...props
-    }: React.ComponentProps<"div"> & import("class-variance-authority").VariantProps<(props?: ({
+    readonly FieldGroup: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+    readonly Field: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("class-variance-authority").VariantProps<(props?: ({
       orientation?: "vertical" | "horizontal" | "responsive" | null | undefined;
-    } & import("class-variance-authority/types").ClassProp) | undefined) => string>) => import("react").JSX.Element>;
-    readonly FieldContent: import("react").MemoExoticComponent<({
-      className,
-      ...props
-    }: React.ComponentProps<"div">) => import("react").JSX.Element>;
-    readonly FieldLabel: import("react").MemoExoticComponent<({
-      className,
-      ...props
-    }: React.ComponentProps<typeof Label$1>) => import("react").JSX.Element>;
-    readonly FieldContentMain: import("react").MemoExoticComponent<({
-      className,
-      ...props
-    }: React.ComponentProps<"div">) => import("react").JSX.Element>;
-    readonly FieldSeparator: import("react").MemoExoticComponent<({
-      children,
-      className,
-      ...props
-    }: React.PropsWithChildren<React.ComponentProps<"div">>) => import("react").JSX.Element>;
-    readonly FieldError: import("react").MemoExoticComponent<({
-      className,
-      children,
-      errors,
-      requiredMessage,
-      ...props
-    }: import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string>>;
+    readonly FieldContent: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+    readonly FieldLabel: ComponentType<LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+    readonly FieldContentMain: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+    readonly FieldSeparator: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+      children?: import("react").ReactNode | undefined;
+    }>;
+    readonly FieldError: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
       errors?: Array<{
         code?: string;
         message?: string;
       } | undefined>;
       requiredMessage?: string;
-    }) => import("react").JSX.Element | null>;
+    }>;
   }, {
-    readonly TanStackDialogForm: import("react").FC<import("react").PropsWithChildren<{
+    readonly TanStackDialogForm: ComponentType<{
       title: string;
       submitText?: string;
       width?: number | string;
@@ -3436,73 +2906,92 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
       className?: string;
       open?: boolean;
       onOpenChange?: (open: boolean) => void;
-    }>>;
-    readonly TanStackPopoverForm: import("react").FC<import("react").PropsWithChildren<{
+    } & {
+      children?: import("react").ReactNode | undefined;
+    }>;
+    readonly TanStackPopoverForm: ComponentType<{
       title: string;
       open?: boolean;
       contentClassName?: string;
       onOpenChange?: (open: boolean) => void;
-    }>>;
-    readonly TanStackContainerForm: import("react").FC<{
+    } & {
       children?: import("react").ReactNode | undefined;
     }>;
-    readonly TanStackSectionForm: import("react").FC<import("react").PropsWithChildren<{
+    readonly TanStackContainerForm: ComponentType<{
+      children?: import("react").ReactNode | undefined;
+    }>;
+    readonly TanStackSectionForm: ComponentType<{
       title: string;
-    }>>;
-    readonly TanStackCardForm: import("react").FC<import("react").PropsWithChildren<{
+    } & {
+      children?: import("react").ReactNode | undefined;
+    }>;
+    readonly TanStackCardForm: ComponentType<{
       title: string;
       description?: string;
       onDelete?: () => void | Promise<void>;
-    }>>;
-    readonly TanStackFieldGroup: import("react").FC<import("react").PropsWithChildren<{
+    } & {
+      children?: import("react").ReactNode | undefined;
+    }>;
+    readonly TanStackFieldGroup: ComponentType<{
       label: string;
       description?: string;
       helperText?: string;
       orientation?: "horizontal" | "vertical" | "responsive";
-    }>>;
-    readonly TanStackTitleField: import("react").FC<{
+    } & {
+      children?: import("react").ReactNode | undefined;
+    }>;
+    readonly TanStackTitleField: ComponentType<{
       title: string;
       description?: string;
       helperText?: string;
     }>;
-    readonly TanStackActionsForm: import("react").FC<import("react").PropsWithChildren<{
+    readonly TanStackActionsForm: ComponentType<{
       type?: "create" | "update";
-    }>>;
-    readonly TanStackActionSubmit: import("react").FC<{
+    } & {
+      children?: import("react").ReactNode | undefined;
+    }>;
+    readonly TanStackActionSubmit: ComponentType<{
       label?: string;
       className?: string;
     }>;
-    readonly ArrayCol: typeof ArrayCol;
-    readonly ArrayHeaderRow: typeof ArrayHeaderRow;
+    readonly ArrayCol: ComponentType<{
+      width?: number | string;
+      className?: string;
+      children: React.ReactNode;
+    }>;
+    readonly ArrayHeaderRow: ComponentType<{
+      className?: string;
+      children: React.ReactNode;
+    }>;
   }, TSubmitMeta, TRenderProps>) => <TFormData, TFields extends DeepKeysOfType<TFormData, TFieldGroupData | null | undefined> | FieldsMap<TFormData, TFieldGroupData>, TOnMount extends FormValidateOrFn<TFormData> | undefined, TOnChange extends FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends FormAsyncValidateOrFn<TFormData> | undefined, TFormSubmitMeta>(params: import("react").PropsWithChildren<NoInfer<TRenderProps> & {
     form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta, {
-      readonly TextField: import("react").NamedExoticComponent<TextFieldProps>;
-      readonly TextareaField: import("react").NamedExoticComponent<TextareaFieldProps>;
-      readonly TextEditorField: import("react").FC<TextEditorFieldProps>;
-      readonly NumberField: import("react").NamedExoticComponent<NumberFieldProps>;
-      readonly EmailField: import("react").FC<EmailFieldProps>;
-      readonly PasswordField: import("react").FC<PasswordFieldProps>;
-      readonly SelectField: import("react").NamedExoticComponent<SelectFieldProps>;
-      readonly ComboboxField: import("react").NamedExoticComponent<ComboboxFieldProps>;
-      readonly DateField: import("react").NamedExoticComponent<DateFieldProps>;
-      readonly SwitchField: import("react").FC<SwitchFieldProps>;
-      readonly RadioGroupField: import("react").FC<RadioGroupFieldProps>;
-      readonly CheckboxField: import("react").FC<CheckboxFieldProps>;
-      readonly SimpleTextField: import("react").FC<SimpleTextFieldProps>;
-      readonly SimpleEmailField: import("react").FC<{
+      readonly TextField: ComponentType<TextFieldProps>;
+      readonly TextareaField: ComponentType<TextareaFieldProps>;
+      readonly TextEditorField: ComponentType<TextEditorFieldProps>;
+      readonly NumberField: ComponentType<NumberFieldProps>;
+      readonly EmailField: ComponentType<EmailFieldProps>;
+      readonly PasswordField: ComponentType<PasswordFieldProps>;
+      readonly SelectField: ComponentType<SelectFieldProps>;
+      readonly ComboboxField: ComponentType<ComboboxFieldProps>;
+      readonly DateField: ComponentType<DateFieldProps>;
+      readonly SwitchField: ComponentType<SwitchFieldProps>;
+      readonly RadioGroupField: ComponentType<RadioGroupFieldProps>;
+      readonly CheckboxField: ComponentType<CheckboxFieldProps>;
+      readonly SimpleTextField: ComponentType<SimpleTextFieldProps>;
+      readonly SimpleEmailField: ComponentType<{
         label?: string;
         placeholder?: string;
         required?: boolean;
         maxLength?: number;
         disabled?: boolean;
       }>;
-      readonly SimplePasswordField: import("react").FC<{
+      readonly SimplePasswordField: ComponentType<{
         label?: string;
         placeholder?: string;
         required?: boolean;
         disabled?: boolean;
       }>;
-      readonly SimpleTextareaField: import("react").FC<{
+      readonly SimpleTextareaField: ComponentType<{
         label?: string;
         placeholder?: string;
         required?: boolean;
@@ -3510,7 +2999,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
         rows?: number;
         disabled?: boolean;
       }>;
-      readonly SimpleNumberField: import("react").FC<{
+      readonly SimpleNumberField: ComponentType<{
         label?: string;
         placeholder?: string;
         required?: boolean;
@@ -3518,7 +3007,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
         allowNegative?: boolean;
         disabled?: boolean;
       }>;
-      readonly SimpleSelectField: import("react").FC<{
+      readonly SimpleSelectField: ComponentType<{
         label?: string;
         placeholder?: string;
         required?: boolean;
@@ -3528,13 +3017,13 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
         }>;
       }>;
       readonly SimpleArrayField: typeof SimpleArrayField;
-      readonly SimpleBooleanField: import("react").FC<{
+      readonly SimpleBooleanField: ComponentType<{
         label?: string;
         required?: boolean;
         disabled?: boolean;
         variant?: "checkbox" | "switch";
       }>;
-      readonly SimpleComboboxField: import("react").FC<{
+      readonly SimpleComboboxField: ComponentType<{
         label?: string;
         placeholder?: string;
         required?: boolean;
@@ -3544,7 +3033,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
           label: string;
         }>;
       }>;
-      readonly SimpleDateField: import("react").FC<{
+      readonly SimpleDateField: ComponentType<{
         label?: string;
         placeholder?: string;
         required?: boolean;
@@ -3552,7 +3041,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
         minDate?: Date;
         maxDate?: Date;
       }>;
-      readonly SimpleRadioGroupField: import("react").FC<{
+      readonly SimpleRadioGroupField: ComponentType<{
         label?: string;
         required?: boolean;
         disabled?: boolean;
@@ -3562,49 +3051,25 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
         }>;
         orientation?: "horizontal" | "vertical";
       }>;
-      readonly FieldGroup: import("react").MemoExoticComponent<({
-        className,
-        ...props
-      }: React.ComponentProps<"div">) => import("react").JSX.Element>;
-      readonly Field: import("react").MemoExoticComponent<({
-        className,
-        orientation,
-        ...props
-      }: React.ComponentProps<"div"> & import("class-variance-authority").VariantProps<(props?: ({
+      readonly FieldGroup: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+      readonly Field: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("class-variance-authority").VariantProps<(props?: ({
         orientation?: "vertical" | "horizontal" | "responsive" | null | undefined;
-      } & import("class-variance-authority/types").ClassProp) | undefined) => string>) => import("react").JSX.Element>;
-      readonly FieldContent: import("react").MemoExoticComponent<({
-        className,
-        ...props
-      }: React.ComponentProps<"div">) => import("react").JSX.Element>;
-      readonly FieldLabel: import("react").MemoExoticComponent<({
-        className,
-        ...props
-      }: React.ComponentProps<typeof Label$1>) => import("react").JSX.Element>;
-      readonly FieldContentMain: import("react").MemoExoticComponent<({
-        className,
-        ...props
-      }: React.ComponentProps<"div">) => import("react").JSX.Element>;
-      readonly FieldSeparator: import("react").MemoExoticComponent<({
-        children,
-        className,
-        ...props
-      }: React.PropsWithChildren<React.ComponentProps<"div">>) => import("react").JSX.Element>;
-      readonly FieldError: import("react").MemoExoticComponent<({
-        className,
-        children,
-        errors,
-        requiredMessage,
-        ...props
-      }: import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+      } & import("class-variance-authority/types").ClassProp) | undefined) => string>>;
+      readonly FieldContent: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+      readonly FieldLabel: ComponentType<LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+      readonly FieldContentMain: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+      readonly FieldSeparator: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+        children?: import("react").ReactNode | undefined;
+      }>;
+      readonly FieldError: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
         errors?: Array<{
           code?: string;
           message?: string;
         } | undefined>;
         requiredMessage?: string;
-      }) => import("react").JSX.Element | null>;
+      }>;
     }, {
-      readonly TanStackDialogForm: import("react").FC<import("react").PropsWithChildren<{
+      readonly TanStackDialogForm: ComponentType<{
         title: string;
         submitText?: string;
         width?: number | string;
@@ -3612,72 +3077,91 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
         className?: string;
         open?: boolean;
         onOpenChange?: (open: boolean) => void;
-      }>>;
-      readonly TanStackPopoverForm: import("react").FC<import("react").PropsWithChildren<{
+      } & {
+        children?: import("react").ReactNode | undefined;
+      }>;
+      readonly TanStackPopoverForm: ComponentType<{
         title: string;
         open?: boolean;
         contentClassName?: string;
         onOpenChange?: (open: boolean) => void;
-      }>>;
-      readonly TanStackContainerForm: import("react").FC<{
+      } & {
+        children?: import("react").ReactNode | undefined;
+      }>;
+      readonly TanStackContainerForm: ComponentType<{
         children?: import("react").ReactNode | undefined;
       }>;
-      readonly TanStackSectionForm: import("react").FC<import("react").PropsWithChildren<{
+      readonly TanStackSectionForm: ComponentType<{
         title: string;
-      }>>;
-      readonly TanStackCardForm: import("react").FC<import("react").PropsWithChildren<{
+      } & {
+        children?: import("react").ReactNode | undefined;
+      }>;
+      readonly TanStackCardForm: ComponentType<{
         title: string;
         description?: string;
         onDelete?: () => void | Promise<void>;
-      }>>;
-      readonly TanStackFieldGroup: import("react").FC<import("react").PropsWithChildren<{
+      } & {
+        children?: import("react").ReactNode | undefined;
+      }>;
+      readonly TanStackFieldGroup: ComponentType<{
         label: string;
         description?: string;
         helperText?: string;
         orientation?: "horizontal" | "vertical" | "responsive";
-      }>>;
-      readonly TanStackTitleField: import("react").FC<{
+      } & {
+        children?: import("react").ReactNode | undefined;
+      }>;
+      readonly TanStackTitleField: ComponentType<{
         title: string;
         description?: string;
         helperText?: string;
       }>;
-      readonly TanStackActionsForm: import("react").FC<import("react").PropsWithChildren<{
+      readonly TanStackActionsForm: ComponentType<{
         type?: "create" | "update";
-      }>>;
-      readonly TanStackActionSubmit: import("react").FC<{
+      } & {
+        children?: import("react").ReactNode | undefined;
+      }>;
+      readonly TanStackActionSubmit: ComponentType<{
         label?: string;
         className?: string;
       }>;
-      readonly ArrayCol: typeof ArrayCol;
-      readonly ArrayHeaderRow: typeof ArrayHeaderRow;
+      readonly ArrayCol: ComponentType<{
+        width?: number | string;
+        className?: string;
+        children: React.ReactNode;
+      }>;
+      readonly ArrayHeaderRow: ComponentType<{
+        className?: string;
+        children: React.ReactNode;
+      }>;
     }> | import("@tanstack/react-form").AppFieldExtendedReactFieldGroupApi<unknown, TFormData, string | FieldsMap<unknown, TFormData>, any, any, any, any, any, any, any, any, any, any, unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta, {
-      readonly TextField: import("react").NamedExoticComponent<TextFieldProps>;
-      readonly TextareaField: import("react").NamedExoticComponent<TextareaFieldProps>;
-      readonly TextEditorField: import("react").FC<TextEditorFieldProps>;
-      readonly NumberField: import("react").NamedExoticComponent<NumberFieldProps>;
-      readonly EmailField: import("react").FC<EmailFieldProps>;
-      readonly PasswordField: import("react").FC<PasswordFieldProps>;
-      readonly SelectField: import("react").NamedExoticComponent<SelectFieldProps>;
-      readonly ComboboxField: import("react").NamedExoticComponent<ComboboxFieldProps>;
-      readonly DateField: import("react").NamedExoticComponent<DateFieldProps>;
-      readonly SwitchField: import("react").FC<SwitchFieldProps>;
-      readonly RadioGroupField: import("react").FC<RadioGroupFieldProps>;
-      readonly CheckboxField: import("react").FC<CheckboxFieldProps>;
-      readonly SimpleTextField: import("react").FC<SimpleTextFieldProps>;
-      readonly SimpleEmailField: import("react").FC<{
+      readonly TextField: ComponentType<TextFieldProps>;
+      readonly TextareaField: ComponentType<TextareaFieldProps>;
+      readonly TextEditorField: ComponentType<TextEditorFieldProps>;
+      readonly NumberField: ComponentType<NumberFieldProps>;
+      readonly EmailField: ComponentType<EmailFieldProps>;
+      readonly PasswordField: ComponentType<PasswordFieldProps>;
+      readonly SelectField: ComponentType<SelectFieldProps>;
+      readonly ComboboxField: ComponentType<ComboboxFieldProps>;
+      readonly DateField: ComponentType<DateFieldProps>;
+      readonly SwitchField: ComponentType<SwitchFieldProps>;
+      readonly RadioGroupField: ComponentType<RadioGroupFieldProps>;
+      readonly CheckboxField: ComponentType<CheckboxFieldProps>;
+      readonly SimpleTextField: ComponentType<SimpleTextFieldProps>;
+      readonly SimpleEmailField: ComponentType<{
         label?: string;
         placeholder?: string;
         required?: boolean;
         maxLength?: number;
         disabled?: boolean;
       }>;
-      readonly SimplePasswordField: import("react").FC<{
+      readonly SimplePasswordField: ComponentType<{
         label?: string;
         placeholder?: string;
         required?: boolean;
         disabled?: boolean;
       }>;
-      readonly SimpleTextareaField: import("react").FC<{
+      readonly SimpleTextareaField: ComponentType<{
         label?: string;
         placeholder?: string;
         required?: boolean;
@@ -3685,7 +3169,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
         rows?: number;
         disabled?: boolean;
       }>;
-      readonly SimpleNumberField: import("react").FC<{
+      readonly SimpleNumberField: ComponentType<{
         label?: string;
         placeholder?: string;
         required?: boolean;
@@ -3693,7 +3177,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
         allowNegative?: boolean;
         disabled?: boolean;
       }>;
-      readonly SimpleSelectField: import("react").FC<{
+      readonly SimpleSelectField: ComponentType<{
         label?: string;
         placeholder?: string;
         required?: boolean;
@@ -3703,13 +3187,13 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
         }>;
       }>;
       readonly SimpleArrayField: typeof SimpleArrayField;
-      readonly SimpleBooleanField: import("react").FC<{
+      readonly SimpleBooleanField: ComponentType<{
         label?: string;
         required?: boolean;
         disabled?: boolean;
         variant?: "checkbox" | "switch";
       }>;
-      readonly SimpleComboboxField: import("react").FC<{
+      readonly SimpleComboboxField: ComponentType<{
         label?: string;
         placeholder?: string;
         required?: boolean;
@@ -3719,7 +3203,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
           label: string;
         }>;
       }>;
-      readonly SimpleDateField: import("react").FC<{
+      readonly SimpleDateField: ComponentType<{
         label?: string;
         placeholder?: string;
         required?: boolean;
@@ -3727,7 +3211,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
         minDate?: Date;
         maxDate?: Date;
       }>;
-      readonly SimpleRadioGroupField: import("react").FC<{
+      readonly SimpleRadioGroupField: ComponentType<{
         label?: string;
         required?: boolean;
         disabled?: boolean;
@@ -3737,49 +3221,25 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
         }>;
         orientation?: "horizontal" | "vertical";
       }>;
-      readonly FieldGroup: import("react").MemoExoticComponent<({
-        className,
-        ...props
-      }: React.ComponentProps<"div">) => import("react").JSX.Element>;
-      readonly Field: import("react").MemoExoticComponent<({
-        className,
-        orientation,
-        ...props
-      }: React.ComponentProps<"div"> & import("class-variance-authority").VariantProps<(props?: ({
+      readonly FieldGroup: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+      readonly Field: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("class-variance-authority").VariantProps<(props?: ({
         orientation?: "vertical" | "horizontal" | "responsive" | null | undefined;
-      } & import("class-variance-authority/types").ClassProp) | undefined) => string>) => import("react").JSX.Element>;
-      readonly FieldContent: import("react").MemoExoticComponent<({
-        className,
-        ...props
-      }: React.ComponentProps<"div">) => import("react").JSX.Element>;
-      readonly FieldLabel: import("react").MemoExoticComponent<({
-        className,
-        ...props
-      }: React.ComponentProps<typeof Label$1>) => import("react").JSX.Element>;
-      readonly FieldContentMain: import("react").MemoExoticComponent<({
-        className,
-        ...props
-      }: React.ComponentProps<"div">) => import("react").JSX.Element>;
-      readonly FieldSeparator: import("react").MemoExoticComponent<({
-        children,
-        className,
-        ...props
-      }: React.PropsWithChildren<React.ComponentProps<"div">>) => import("react").JSX.Element>;
-      readonly FieldError: import("react").MemoExoticComponent<({
-        className,
-        children,
-        errors,
-        requiredMessage,
-        ...props
-      }: import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+      } & import("class-variance-authority/types").ClassProp) | undefined) => string>>;
+      readonly FieldContent: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+      readonly FieldLabel: ComponentType<LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+      readonly FieldContentMain: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+      readonly FieldSeparator: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+        children?: import("react").ReactNode | undefined;
+      }>;
+      readonly FieldError: ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
         errors?: Array<{
           code?: string;
           message?: string;
         } | undefined>;
         requiredMessage?: string;
-      }) => import("react").JSX.Element | null>;
+      }>;
     }, {
-      readonly TanStackDialogForm: import("react").FC<import("react").PropsWithChildren<{
+      readonly TanStackDialogForm: ComponentType<{
         title: string;
         submitText?: string;
         width?: number | string;
@@ -3787,47 +3247,66 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
         className?: string;
         open?: boolean;
         onOpenChange?: (open: boolean) => void;
-      }>>;
-      readonly TanStackPopoverForm: import("react").FC<import("react").PropsWithChildren<{
+      } & {
+        children?: import("react").ReactNode | undefined;
+      }>;
+      readonly TanStackPopoverForm: ComponentType<{
         title: string;
         open?: boolean;
         contentClassName?: string;
         onOpenChange?: (open: boolean) => void;
-      }>>;
-      readonly TanStackContainerForm: import("react").FC<{
+      } & {
         children?: import("react").ReactNode | undefined;
       }>;
-      readonly TanStackSectionForm: import("react").FC<import("react").PropsWithChildren<{
+      readonly TanStackContainerForm: ComponentType<{
+        children?: import("react").ReactNode | undefined;
+      }>;
+      readonly TanStackSectionForm: ComponentType<{
         title: string;
-      }>>;
-      readonly TanStackCardForm: import("react").FC<import("react").PropsWithChildren<{
+      } & {
+        children?: import("react").ReactNode | undefined;
+      }>;
+      readonly TanStackCardForm: ComponentType<{
         title: string;
         description?: string;
         onDelete?: () => void | Promise<void>;
-      }>>;
-      readonly TanStackFieldGroup: import("react").FC<import("react").PropsWithChildren<{
+      } & {
+        children?: import("react").ReactNode | undefined;
+      }>;
+      readonly TanStackFieldGroup: ComponentType<{
         label: string;
         description?: string;
         helperText?: string;
         orientation?: "horizontal" | "vertical" | "responsive";
-      }>>;
-      readonly TanStackTitleField: import("react").FC<{
+      } & {
+        children?: import("react").ReactNode | undefined;
+      }>;
+      readonly TanStackTitleField: ComponentType<{
         title: string;
         description?: string;
         helperText?: string;
       }>;
-      readonly TanStackActionsForm: import("react").FC<import("react").PropsWithChildren<{
+      readonly TanStackActionsForm: ComponentType<{
         type?: "create" | "update";
-      }>>;
-      readonly TanStackActionSubmit: import("react").FC<{
+      } & {
+        children?: import("react").ReactNode | undefined;
+      }>;
+      readonly TanStackActionSubmit: ComponentType<{
         label?: string;
         className?: string;
       }>;
-      readonly ArrayCol: typeof ArrayCol;
-      readonly ArrayHeaderRow: typeof ArrayHeaderRow;
+      readonly ArrayCol: ComponentType<{
+        width?: number | string;
+        className?: string;
+        children: React.ReactNode;
+      }>;
+      readonly ArrayHeaderRow: ComponentType<{
+        className?: string;
+        children: React.ReactNode;
+      }>;
     }>;
     fields: TFields;
   }>) => ReturnType<import("react").FunctionComponent>;
 //#endregion
-export { EmailFieldProps as $, EmailField as A, SimpleRadioGroupField as B, TextareaField as C, RadioGroupField as D, SelectField as E, SimpleTextareaField as F, ArrayHeaderRow as G, SimpleComboboxField as H, SimpleSelectField as I, BooleanFieldValue as J, SimpleArrayField as K, SimplePasswordField as L, ComboboxField as M, CheckboxField as N, PasswordField as O, SimpleTextField as P, DateFieldValue as Q, SimpleNumberField as R, TextEditorField as S, SwitchField as T, SimpleBooleanField as U, SimpleDateField as V, ArrayCol as W, ComboboxFieldProps as X, CheckboxFieldProps as Y, DateFieldProps as Z, TanStackDialogForm as _, withTanStackForm as a, NumberFieldValue as at, TanStackActionsForm as b, FieldContentMain as c, RadioOption as ct, FieldLabel as d, SimpleTextFieldProps as dt, FieldOrientation as et, FieldSeparator as f, SwitchFieldProps as ft, TanStackFieldGroup as g, TextareaFieldProps as gt, TanStackPopoverForm as h, TextFieldValue as ht, withTanStackFieldGroup as i, NumberFieldProps as it, DateField as j, NumberField as k, FieldError as l, SelectFieldProps as lt, TanStackSectionForm as m, TextFieldProps as mt, useTanStackForm as n, FieldType as nt, Field as o, PasswordFieldProps as ot, TanStackTitleField as p, TextEditorFieldProps as pt, AnyFieldProps as q, useTanStackFormContext as r, MultiSelectFieldValue as rt, FieldContent as s, RadioGroupFieldProps as st, useTanStackFieldContext as t, FieldRounding as tt, FieldGroup as u, SelectOption as ut, TanStackContainerForm as v, TextField as w, TanStackActionSubmit as x, TanStackCardForm as y, SimpleEmailField as z };
-//# sourceMappingURL=index-C2KjuFXQ.d.cts.map
+export { EmailFieldProps as $, TanStackActionSubmit as A, TextField as B, SimpleNumberField as C, SimpleTextField as D, SimpleSelectField as E, TanStackFieldGroup as F, useTanStackFieldContext as G, useTanStackForm as H, TanStackPopoverForm as I, BooleanFieldValue as J, useTanStackFormContext as K, TanStackSectionForm as L, TanStackCardForm as M, TanStackContainerForm as N, SimpleTextareaField as O, TanStackDialogForm as P, DateFieldValue as Q, TanStackTitleField as R, SimpleEmailField as S, SimpleRadioGroupField as T, withTanStackFieldGroup as U, TextareaField as V, withTanStackForm as W, ComboboxFieldProps as X, CheckboxFieldProps as Y, DateFieldProps as Z, SelectField as _, DateField as a, NumberFieldValue as at, SimpleComboboxField as b, FieldContent as c, RadioOption as ct, FieldGroup as d, SimpleTextFieldProps as dt, FieldOrientation as et, FieldLabel as f, SwitchFieldProps as ft, RadioGroupField as g, TextareaFieldProps as gt, PasswordField as h, TextFieldValue as ht, ComboboxField as i, NumberFieldProps as it, TanStackActionsForm as j, SwitchField as k, FieldContentMain as l, SelectFieldProps as lt, NumberField as m, TextFieldProps as mt, ArrayHeaderRow as n, FieldType as nt, EmailField as o, PasswordFieldProps as ot, FieldSeparator as p, TextEditorFieldProps as pt, AnyFieldProps as q, CheckboxField as r, MultiSelectFieldValue as rt, Field as s, RadioGroupFieldProps as st, ArrayCol as t, FieldRounding as tt, FieldError as u, SelectOption as ut, SimpleArrayField as v, SimplePasswordField as w, SimpleDateField as x, SimpleBooleanField as y, TextEditorField as z };
+//# sourceMappingURL=index-DDROD2y9.d.cts.map