haze-ui 1.12.2 → 1.14.0

package/dist/types/components/Checkbox/Checkbox.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type CheckboxProps = {
-    checked?: Control<boolean> | boolean;
+    checked?: ControlOrValue<boolean>;
     label?: ReactNode;
 } & Omit<ComponentPropsWithoutRef<'input'>, 'checked' | 'type'>;
 export default function Checkbox({ checked: checkedControl, className, label, onChange, ...rest }: CheckboxProps): import("react").JSX.Element;

package/dist/types/components/Collapsible/Collapsible.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type CollapsibleProps = {
-    open?: Control<boolean> | boolean;
+    open?: ControlOrValue<boolean>;
     defaultOpen?: boolean;
     children: ReactNode;
     className?: string;

package/dist/types/components/ColorPicker/ColorPicker.d.ts

@@ -1,6 +1,6 @@
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type ColorPickerProps = {
-    value?: Control<string> | string;
+    value?: ControlOrValue<string>;
     presets?: string[];
     onChange?: (color: string) => void;
     className?: string;

package/dist/types/components/Combobox/Combobox.d.ts

@@ -1,7 +1,7 @@
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type ComboboxProps = {
-    value?: Control<string> | string;
-    open?: Control<boolean> | boolean;
+    value?: ControlOrValue<string>;
+    open?: ControlOrValue<boolean>;
     options: {
         value: string;
         label: string;

package/dist/types/components/Command/Command.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type CommandProps = {
-    query?: Control<string> | string;
+    query?: ControlOrValue<string>;
     children: ReactNode;
     className?: string;
 };

package/dist/types/components/ConfirmDialog/ConfirmDialog.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type ConfirmDialogProps = {
-    open?: Control<boolean> | boolean;
+    open?: ControlOrValue<boolean>;
     onClose?: () => void;
     onConfirm?: () => void;
     onCancel?: () => void;

package/dist/types/components/ContextMenu/ContextMenu.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type ContextMenuProps = {
-    open?: Control<boolean> | boolean;
+    open?: ControlOrValue<boolean>;
     onOpenChange?: (open: boolean) => void;
     children: ReactNode;
     className?: string;

package/dist/types/components/ContextMenu/ContextMenuContent.d.ts

@@ -3,5 +3,5 @@ type ContextMenuContentProps = {
     children: ReactNode;
     className?: string;
 };
-export default function ContextMenuContent({ children, className }: ContextMenuContentProps): import("react").JSX.Element | null;
+export default function ContextMenuContent({ children, className, }: ContextMenuContentProps): import("react").JSX.Element | null;
 export type { ContextMenuContentProps };

package/dist/types/components/ContextMenu/ContextMenuContext.d.ts

@@ -1,10 +1,14 @@
-import type { Dispatch, SetStateAction } from 'react';
+import type { Dispatch, RefObject, SetStateAction } from 'react';
+import type { FloatingBehavior } from '../../utils/floating';
 type ContextMenuContextValue = {
     open: boolean;
     setOpen: Dispatch<SetStateAction<boolean>>;
     x: number;
     y: number;
     setPosition: (x: number, y: number) => void;
+    contentRef: RefObject<HTMLDivElement | null>;
+    /** Floating-panel behavior shared by the root and content. */
+    floating: FloatingBehavior;
 };
 export declare const ContextMenuProvider: import("react").Provider<ContextMenuContextValue | undefined>;
 export declare function useContextMenuContext(): ContextMenuContextValue;

package/dist/types/components/DateRangePicker/DateRangePicker.d.ts

@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react';
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type DateRangePickerProps = {
-    startDate?: Control<string> | string;
-    endDate?: Control<string> | string;
+    startDate?: ControlOrValue<string>;
+    endDate?: ControlOrValue<string>;
     onStartChange?: (value: string) => void;
     onEndChange?: (value: string) => void;
     separator?: ReactNode;

package/dist/types/components/Datepicker/Datepicker.d.ts

@@ -1,7 +1,7 @@
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type DatepickerProps = {
-    value?: Control<string> | string;
-    open?: Control<boolean> | boolean;
+    value?: ControlOrValue<string>;
+    open?: ControlOrValue<boolean>;
     min?: string;
     max?: string;
     placeholder?: string;

package/dist/types/components/Dialog/Dialog.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type DialogProps = {
-    open?: Control<boolean> | boolean;
+    open?: ControlOrValue<boolean>;
     onClose?: () => void;
     /**
      * 对话框标题：渲染为 h2 并以生成的 id 关联 dialog 的

package/dist/types/components/Disclosure/Disclosure.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type DisclosureProps = {
-    open?: Control<boolean> | boolean;
+    open?: ControlOrValue<boolean>;
     summary: ReactNode;
     className?: string;
     children: ReactNode;

package/dist/types/components/Drawer/Drawer.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type DrawerProps = {
-    open?: Control<boolean> | boolean;
+    open?: ControlOrValue<boolean>;
     placement?: 'left' | 'right' | 'top' | 'bottom';
     onClose?: () => void;
     className?: string;

package/dist/types/components/DropdownMenu/DropdownMenu.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type DropdownMenuProps = {
-    open?: Control<boolean> | boolean;
+    open?: ControlOrValue<boolean>;
     onOpenChange?: (open: boolean) => void;
     children: ReactNode;
     className?: string;

package/dist/types/components/DropdownMenu/DropdownMenuContent.d.ts

@@ -4,5 +4,5 @@ type DropdownMenuContentProps = {
     align?: 'start' | 'center' | 'end';
     className?: string;
 };
-export default function DropdownMenuContent({ children, align, className }: DropdownMenuContentProps): import("react").JSX.Element | null;
+export default function DropdownMenuContent({ children, align, className, }: DropdownMenuContentProps): import("react").JSX.Element | null;
 export type { DropdownMenuContentProps };

package/dist/types/components/DropdownMenu/DropdownMenuContext.d.ts

@@ -1,4 +1,5 @@
 import type { Dispatch, RefObject, SetStateAction } from 'react';
+import type { FloatingBehavior } from '../../utils/floating';
 type DropdownMenuContextValue = {
     open: boolean;
     setOpen: Dispatch<SetStateAction<boolean>>;
@@ -14,6 +15,8 @@ type DropdownMenuContextValue = {
     focusRequestRef: {
         current: 'first' | 'last' | null;
     };
+    /** Floating-panel behavior shared by the trigger and content. */
+    floating: FloatingBehavior;
 };
 export declare const DropdownMenuProvider: import("react").Provider<DropdownMenuContextValue | undefined>;
 export declare function useDropdownMenuContext(): DropdownMenuContextValue;

package/dist/types/components/DropdownMenu/DropdownMenuTrigger.d.ts

@@ -3,5 +3,5 @@ type DropdownMenuTriggerProps = {
     children: ReactNode;
     className?: string;
 };
-export default function DropdownMenuTrigger({ children, className }: DropdownMenuTriggerProps): import("react").JSX.Element;
+export default function DropdownMenuTrigger({ children, className, }: DropdownMenuTriggerProps): import("react").JSX.Element;
 export type { DropdownMenuTriggerProps };

package/dist/types/components/InlineEdit/InlineEdit.d.ts

@@ -1,6 +1,6 @@
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type InlineEditProps = {
-    value?: Control<string> | string;
+    value?: ControlOrValue<string>;
     onChange?: (value: string) => void;
     placeholder?: string;
     disabled?: boolean;

package/dist/types/components/Input/Input.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentPropsWithoutRef } from 'react';
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type InputProps = {
-    value?: Control<string> | string;
+    value?: ControlOrValue<string>;
     size?: 'sm' | 'md' | 'lg';
 } & Omit<ComponentPropsWithoutRef<'input'>, 'value' | 'size'>;
 export default function Input({ value: valueControl, size, className, onChange, ...rest }: InputProps): import("react").JSX.Element;

package/dist/types/components/LogViewer/LogViewer.d.ts

@@ -1,4 +1,4 @@
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type LogLevel = 'debug' | 'info' | 'warn' | 'error';
 type LogEntry = {
     level: LogLevel;
@@ -7,7 +7,7 @@ type LogEntry = {
 };
 type LogViewerProps = {
     logs: LogEntry[];
-    filter?: Control<LogLevel | null> | LogLevel | null;
+    filter?: ControlOrValue<LogLevel | null>;
     className?: string;
 };
 export default function LogViewer({ logs, filter: filterControl, className }: LogViewerProps): import("react").JSX.Element;

package/dist/types/components/Menu/Menu.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type MenuProps = {
-    open?: Control<boolean> | boolean;
+    open?: ControlOrValue<boolean>;
     trigger?: ReactNode;
     className?: string;
     children: ReactNode;

package/dist/types/components/ModelPicker/ModelPicker.d.ts

@@ -1,4 +1,4 @@
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type ModelOption = {
     value: string;
     label: string;
@@ -6,7 +6,7 @@ type ModelOption = {
     contextLength?: string;
 };
 type ModelPickerProps = {
-    value?: Control<string> | string;
+    value?: ControlOrValue<string>;
     onChange?: (value: string) => void;
     options: ModelOption[];
     disabled?: boolean;

package/dist/types/components/NumberInput/NumberInput.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentPropsWithoutRef } from 'react';
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type NumberInputProps = {
-    value?: Control<number> | number;
+    value?: ControlOrValue<number>;
     min?: number;
     max?: number;
     step?: number;

package/dist/types/components/OTPInput/OTPInput.d.ts

@@ -1,7 +1,7 @@
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type OTPInputProps = {
     length?: number;
-    value?: Control<string> | string;
+    value?: ControlOrValue<string>;
     onChange?: (value: string) => void;
     className?: string;
 };

package/dist/types/components/Pagination/Pagination.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentPropsWithoutRef } from 'react';
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type PaginationProps = {
-    page?: Control<number> | number;
+    page?: ControlOrValue<number>;
     total: number;
     pageSize?: number;
     size?: 'sm' | 'md' | 'lg';

package/dist/types/components/PasswordInput/PasswordInput.d.ts

@@ -1,6 +1,6 @@
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type PasswordInputProps = {
-    value?: Control<string> | string;
+    value?: ControlOrValue<string>;
     onChange?: (value: string) => void;
     placeholder?: string;
     disabled?: boolean;

package/dist/types/components/Popover/Popover.d.ts

@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react';
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type PopoverProps = {
     content: ReactNode;
-    open?: Control<boolean> | boolean;
+    open?: ControlOrValue<boolean>;
     className?: string;
     children: ReactNode;
 };

package/dist/types/components/Radio/RadioGroup.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type RadioGroupProps = {
-    value?: Control<string> | string;
+    value?: ControlOrValue<string>;
     name?: string;
     className?: string;
     children: ReactNode;

package/dist/types/components/Rating/Rating.d.ts

@@ -1,6 +1,6 @@
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type RatingProps = {
-    value?: Control<number> | number;
+    value?: ControlOrValue<number>;
     count?: number;
     allowHalf?: boolean;
     onChange?: (value: number) => void;

package/dist/types/components/Segmented/Segmented.d.ts

@@ -1,8 +1,8 @@
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 import type { SegmentedOption } from './SegmentedCore';
 type SegmentedProps = {
     options: SegmentedOption[];
-    value?: Control<string> | string;
+    value?: ControlOrValue<string>;
     onChange?: (value: string) => void;
     size?: 'sm' | 'md' | 'lg';
     className?: string;

package/dist/types/components/Select/Select.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type SelectProps = {
-    value?: Control<string> | string;
+    value?: ControlOrValue<string>;
     size?: 'sm' | 'md' | 'lg';
     children: ReactNode;
 } & Omit<ComponentPropsWithoutRef<'select'>, 'value' | 'size'>;

package/dist/types/components/Slider/Slider.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentPropsWithoutRef } from 'react';
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type SliderProps = {
-    value?: Control<number> | number;
+    value?: ControlOrValue<number>;
 } & Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'value'>;
 export default function Slider({ value: valueControl, className, onChange, ...rest }: SliderProps): import("react").JSX.Element;
 export type { SliderProps };

package/dist/types/components/Stepper/Stepper.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type StepperProps = {
-    activeStep?: Control<number> | number;
+    activeStep?: ControlOrValue<number>;
     children: ReactNode;
     className?: string;
 };

package/dist/types/components/Switch/Switch.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentPropsWithoutRef } from 'react';
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type SwitchProps = {
-    checked?: Control<boolean> | boolean;
+    checked?: ControlOrValue<boolean>;
     size?: 'sm' | 'md' | 'lg';
 } & Omit<ComponentPropsWithoutRef<'button'>, 'type' | 'checked' | 'onChange'>;
 export default function Switch({ checked: checkedControl, size, className, onClick, ...rest }: SwitchProps): import("react").JSX.Element;

package/dist/types/components/Tabs/Tabs.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type TabsProps = {
-    value?: Control<string> | string;
+    value?: ControlOrValue<string>;
     className?: string;
     children: ReactNode;
 };

package/dist/types/components/TagInput/TagInput.d.ts

@@ -1,6 +1,6 @@
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type TagInputProps = {
-    value?: Control<string[]> | string[];
+    value?: ControlOrValue<string[]>;
     onChange?: (value: string[]) => void;
     placeholder?: string;
     maxTags?: number;

package/dist/types/components/Textarea/Textarea.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentPropsWithoutRef } from 'react';
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type TextareaProps = {
-    value?: Control<string> | string;
+    value?: ControlOrValue<string>;
     size?: 'sm' | 'md' | 'lg';
 } & Omit<ComponentPropsWithoutRef<'textarea'>, 'value'>;
 export default function Textarea({ value: valueControl, size, className, onChange, ...rest }: TextareaProps): import("react").JSX.Element;

package/dist/types/components/TimePicker/TimePicker.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentPropsWithoutRef } from 'react';
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type TimePickerProps = {
-    value?: Control<string> | string;
+    value?: ControlOrValue<string>;
     onChange?: (value: string) => void;
     placeholder?: string;
     className?: string;

package/dist/types/components/Tooltip/Tooltip.d.ts

@@ -1,9 +1,13 @@
 import type { ReactNode } from 'react';
+import type { ControlOrValue } from 'react-use-control';
 type TooltipProps = {
     content: ReactNode;
     position?: 'top' | 'bottom' | 'left' | 'right';
+    /** Milliseconds of hover/focus before the tooltip appears. */
+    delay?: number;
+    open?: ControlOrValue<boolean>;
     className?: string;
     children: ReactNode;
 };
-export default function Tooltip({ content, position, className, children, }: TooltipProps): import("react").JSX.Element;
+export default function Tooltip({ content, position, delay, open: openControl, className, children, }: TooltipProps): import("react").JSX.Element;
 export type { TooltipProps };

package/dist/types/components/Transfer/Transfer.d.ts

@@ -1,4 +1,4 @@
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 type TransferItem = {
     key: string;
     title: string;
@@ -6,7 +6,7 @@ type TransferItem = {
 };
 type TransferProps = {
     dataSource: TransferItem[];
-    targetKeys?: Control<string[]> | string[];
+    targetKeys?: ControlOrValue<string[]>;
     onChange?: (targetKeys: string[], direction: 'left' | 'right', moveKeys: string[]) => void;
     className?: string;
 };

package/dist/types/components/Tree/types.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { Control } from 'react-use-control';
+import type { ControlOrValue } from 'react-use-control';
 /**
  * Tree 节点数据接口
  */
@@ -63,11 +63,11 @@ export type TreeProps = {
     /** 自定义节点图标渲染 */
     iconRender?: (node: TreeNodeData) => ReactNode;
     /** （受控）展开的节点 */
-    expandedKeys?: Control<string[]> | string[];
+    expandedKeys?: ControlOrValue<string[]>;
     /** （受控）选中的节点 */
-    selectedKeys?: Control<string[]> | string[];
+    selectedKeys?: ControlOrValue<string[]>;
     /** （受控）复选的节点 */
-    checkedKeys?: Control<string[]> | string[];
+    checkedKeys?: ControlOrValue<string[]>;
     /** 自定义类名 */
     className?: string;
     /** 展开/收起回调 */

package/dist/types/form/FormItem.d.ts

@@ -1,12 +1,18 @@
-import type { ReactNode } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import type { FieldError, FieldPath, FieldRules, Name, ValidationMode, FormInstance, PathValueOf } from 'react-f0rm';
 /**
  * Field-level validator, structurally compatible with react-f0rm's
  * `Validator`: return an error (string, FieldError, or an array mixing
  * both) or `undefined` when valid; return a Promise for async validation.
  * `meta.signal` aborts as soon as the round is superseded.
+ *
+ * Generic like react-f0rm's own `useField` `validate`: with `form` (a
+ * `FormInstance<TValues>`) and `name` (a `FieldPath<TValues>`) in scope,
+ * the value argument is `PathValueOf<TValues, P>` — the field's actual
+ * type — instead of `any`. The bare defaults keep untyped call sites
+ * exactly as permissive as before.
  */
-export type FieldValidator = (value: any, meta: {
+export type FieldValidator<TValues extends Record<string, any> = any, P extends FieldPath<TValues> | Name = Name> = (value: PathValueOf<TValues, P>, meta: {
     form: FormInstance;
     signal: AbortSignal;
 }) => string | FieldError | (string | FieldError)[] | undefined | Promise<string | FieldError | (string | FieldError)[] | undefined>;
@@ -32,13 +38,38 @@ export type FormItemBinding<TValues, P extends FieldPath<TValues> | Name> = {
      * react-f0rm's built-in Field/Checkbox/Select. */
     onChange: (next: PathValueOf<TValues, P>) => void;
 };
+/**
+ * Declarative `as` binding for `FormItem` — the same props shape as
+ * react-f0rm `Field`'s `as` (deliberately *not* Radix's `asChild`): pass
+ * any component as the field control and `FormItem` wires the id, aria
+ * attributes, `onBlur` and `onChange` itself.
+ */
+export type FormItemAsProps = {
+    /** Component rendered as the field control. When provided it takes
+     * precedence over the children render-prop. */
+    as?: ComponentType<any>;
+    /** Extra props spread onto the `as` component. They land before the
+     * value props, so `value`/`valueToProps` win conflicts — the same
+     * precedence react-f0rm's `Field` uses. */
+    asProps?: Record<string, any>;
+    /** Converts what the `as` component passes to its `onChange` into the
+     * field value. Defaults to identity — haze cores' `onChange` emits the
+     * next plain value; pass `(e) => e.target.value` when `as` is a raw
+     * DOM-element component. */
+    eventToValue?: (e: any) => any;
+    /** Derives the value props for the `as` component from the field value —
+     * e.g. `(checked) => ({checked})` for `CheckboxCore`. Defaults to
+     * passing `{value}`. */
+    valueToProps?: (value: any) => Record<string, any>;
+};
 export type FormItemProps<TValues extends Record<string, any> = any, P extends FieldPath<TValues> | Name = Name> = {
     form: FormInstance<TValues>;
     name: P;
     label?: ReactNode;
     /** Field-level validator, registered through react-f0rm's own
-     * `useField` channel — validated per the form's `mode` and on submit. */
-    validate?: FieldValidator;
+     * `useField` channel — validated per the form's `mode` and on submit.
+     * With a typed form the value argument is `PathValueOf<TValues, P>`. */
+    validate?: FieldValidator<TValues, P>;
     /** Per-field validation mode override (react-f0rm ≥0.6): when given,
      * this field validates on its own schedule — e.g. `'onBlur'` — instead
      * of the form's `mode`; other fields are unaffected. Omit to keep the
@@ -61,9 +92,19 @@ export type FormItemProps<TValues extends Record<string, any> = any, P extends F
      * `validate` — both sources' errors merge, rules errors ahead. Omit for
      * `validate`-only validation. */
     rules?: FieldRules;
+    /** Custom error renderer: when provided and the field has errors, the
+     * built-in error span renders `renderError(errors[0].message, errorId)`
+     * instead of the bare message. The span itself — id, `role='alert'`,
+     * styling — stays FormItem's, in both the `as` and children modes. */
+    renderError?: (error: string, id: string) => ReactNode;
     className?: string;
+} & FormItemAsProps & ({
+    as: ComponentType<any>;
+    children?: never;
+} | {
+    as?: undefined;
     children: (binding: FormItemBinding<TValues, P>) => ReactNode;
-};
+});
 /**
  * Glue a single field of a react-f0rm form to a haze-ui controlled core.
  * The binding layer is react-f0rm's own headless `useField` hook — the
@@ -85,8 +126,23 @@ export type FormItemProps<TValues extends Record<string, any> = any, P extends F
  * </FormItem>
  * ```
  *
+ * Or declaratively, react-f0rm `Field`-style (`as` and children are
+ * mutually exclusive — pick one):
+ *
+ * ```tsx
+ * <FormItem form={form} name='email' label='Email' as={InputCore} />
+ * ```
+ *
+ * With `as`, the id/aria/onBlur/onChange wiring happens here: the control
+ * gets `id`, `aria-invalid`/`aria-describedby` while the field errors,
+ * and `onChange={(v) => onChange(toValue(v))}` where `toValue` defaults
+ * to identity (haze cores emit plain values — pass
+ * `eventToValue={(e) => e.target.value}` for a raw DOM element) and the
+ * value lands as `{value}` or, with `valueToProps`, whatever props the
+ * control wants (e.g. `{checked}` for CheckboxCore).
+ *
  * When the field has errors, the first error's message is rendered into a
- * `<span id={errorId} role='alert'>` next to the children; with no errors
+ * `<span id={errorId} role='alert'>` next to the control; with no errors
  * no extra element is rendered.
  */
-export default function FormItem<TValues extends Record<string, any> = any, P extends FieldPath<TValues> | Name = Name>({ form, name, label, validate, mode, validateDebounce, delayError, rules, className, children }: FormItemProps<TValues, P>): import("react").JSX.Element;
+export default function FormItem<TValues extends Record<string, any> = any, P extends FieldPath<TValues> | Name = Name>({ form, name, label, validate, mode, validateDebounce, delayError, rules, className, renderError, as: As, asProps, eventToValue, valueToProps, children }: FormItemProps<TValues, P>): import("react").JSX.Element;

package/dist/types/form/index.d.ts

@@ -1,3 +1,3 @@
 export { default as FormItem } from './FormItem';
-export type { FieldValidator, FormItemBinding, FormItemProps } from './FormItem';
+export type { FieldValidator, FormItemAsProps, FormItemBinding, FormItemProps } from './FormItem';
 export type { FormInstance, PathValueOf } from 'react-f0rm';

package/dist/types/index.d.ts

@@ -182,5 +182,6 @@ export type { DiffViewerProps, DiffLine } from './components/DiffViewer';
 export { LogViewer } from './components/LogViewer';
 export type { LogViewerProps, LogEntry, LogLevel } from './components/LogViewer';
 export { FormItem } from './form';
-export type { FieldValidator, FormItemBinding, FormItemProps, FormInstance, PathValueOf, } from './form';
+export type { FieldValidator, FormItemAsProps, FormItemBinding, FormItemProps, FormInstance, PathValueOf, } from './form';
 export { useControl } from 'react-use-control';
+export type { Control, ControlOrValue } from 'react-use-control';