import { ReactNode } from 'react';

/** Props every field in this family accepts. */
export interface FieldProps<T> {
    /** Label shown above the control. */
    label: string;
    /** Current value. `undefined` renders as empty. */
    value: T | undefined;
    /** Called with the new value. */
    onChange?: (value: T) => void;
    /** One line under the label explaining the property. */
    description?: string;
    /**
     * Selected subjects hold different values. The control shows a placeholder
     * instead of a value, and editing applies to all of them.
     */
    mixed?: boolean;
    /** Render read-only. */
    disabled?: boolean;
    /** Validation message, shown in the destructive colour. */
    error?: string;
    /** Extra classes merged onto the field wrapper. */
    className?: string;
}
export interface FieldShellProps {
    /** Label shown above the control, or beside it when `inline`. */
    label: string;
    /** Associates the label with the control. */
    htmlFor?: string;
    /** One line under the control explaining the property. Hidden while `error` is set. */
    description?: string;
    /** Validation message, shown in the destructive colour in place of the description. */
    error?: string;
    /** Selected subjects hold different values — renders the *Mixed* marker beside the label. */
    mixed?: boolean;
    /** The control itself. */
    children: ReactNode;
    /**
     * Render the label beside the control rather than above. Suits checkboxes,
     * where a label on its own line reads as a heading for nothing.
     */
    inline?: boolean;
    /** Extra classes merged onto the field wrapper. */
    className?: string;
}
/**
 * The label, description and error frame shared by every property field.
 *
 * Exported so a bespoke field looks like the built-in ones without copying
 * their markup — which is exactly what went wrong in the examples this family
 * replaces, where the same label styling was pasted into three inspectors.
 *
 * @example
 * ```tsx
 * <FieldShell label="Opacity" description="0 to 1" htmlFor="opacity">
 *   <MyCustomSlider id="opacity" />
 * </FieldShell>
 * ```
 */
export declare const FieldShell: ({ label, htmlFor, description, error, mixed, children, inline, className, }: FieldShellProps) => import("react/jsx-runtime").JSX.Element;
/** Shared control styling, so every field lines up. */
export declare const CONTROL_CLASS: string;
export declare const borderClass: (error?: string) => "border-border" | "border-destructive";
/** A stable id per field, so labels associate without the caller supplying one. */
export declare const fieldId: (label: string, suffix?: string) => string;