import React, { MouseEventHandler } from 'react';
import { TypedField } from '../../../lib/data/field.js';
import { BadgeProps } from '../../badge/badge.js';
import { BoolProps } from '../../boolean/bool.js';
import { ButtonProps } from '../../button/button.js';
import { FormControlProps } from '../../form/formcontrol/formcontrol.js';
import { AProps } from '../../typography/a/a.js';
import { PProps } from '../../typography/p/p.js';

type ValueProps<T extends object = object> = Omit<React.ComponentProps<"a" | "p" | "span">, "onBlur" | "onChange" | "onClick" | "value"> & {
    /** Value to render. */
    value: unknown;
    /** Whether to use a "decorative" component instead of `<P>` if applicable. */
    decorate?: boolean;
    /** Is set, renders an `<A>` with `href` set. */
    href?: string;
    aProps?: AProps;
    boolProps?: Omit<BoolProps, "value">;
    badgeProps?: BadgeProps;
    pProps?: PProps;
    onClick?: MouseEventHandler;
    /** @private indicates that the <Value /> is used internally. */
    nested?: boolean;
} & ValueEditableUnion<T>;
type ValueEditableUnion<T extends object = object> = ({
    /** Whether the value should be editable (requires field). */
    editable: true;
    /** The form field to show when editing. */
    field: TypedField<T>;
} | {
    /** Whether the value should be editable (requires field). */
    editable?: false;
    /** The form field to show when editing. */
    field?: TypedField<T>;
}) & {
    formControlProps?: Partial<FormControlProps>;
    buttonProps?: Partial<ButtonProps>;
    /** Whether the value is currently being edited. */
    editing?: boolean;
    /** An error message to show. */
    error?: string;
    labelEdit?: string;
    /** Gets called when the input is blurred. */
    onBlur?: React.FocusEventHandler;
    /** Gets called when the value changes. */
    onChange?: React.ChangeEventHandler;
    /** Gets called when the edit button is clicked. */
    onEdit?: React.MouseEventHandler;
};
/**
 * Generic wrapper rendering the appropriate component for `value` based on its type.
 * Type can be:
 *
 *  - A primitive, rendered using appropriate subcomponent (see props).
 *  - A React.ReactNode: rendered directly.
 *  - Any other complex type is ignored.
 */
declare const Value: <T extends object = object>(rawProps: ValueProps<T>) => string | React.JSX.Element | React.JSX.Element[] | undefined;

export { Value };
export type { ValueEditableUnion, ValueProps };