import { type ComponentPropsWithoutRef, type ReactNode } from "react";
import { PopoverContent } from "../ui/popover.js";
export { VisualScrubInput, resolvePendingScrubCommit, type PendingScrubCommit, type ScrubInputChangeMeta, type ScrubInputProps, } from "./scrub-input.js";
export { formatScrubValue, getScrubStepFromEvent, normalizeScrubNumber, parseScrubExpression, roundScrubDragValue, scrubSnapsToInteger, SCRUB_DRAG_THRESHOLD_PX, startScrubDrag, updateScrubDrag, type ParsedScrubExpression, type ScrubDragState, type ScrubDragTick, type ScrubExpressionOptions, } from "./scrub-input-utils.js";
export type VisualControlValue = string | number | boolean;
export interface VisualControlOption {
    label: string;
    value: string;
    color?: string;
}
export interface VisualTweakDefinition {
    id: string;
    label: string;
    type: "color-swatch" | "color-swatches" | "segment" | "slider" | "toggle";
    options?: VisualControlOption[];
    min?: number;
    max?: number;
    step?: number;
    defaultValue: VisualControlValue;
    cssVar?: string;
    unit?: string;
}
export declare function VisualInspectorPanel({ title, subtitle, children, className, headerAction, }: {
    title: ReactNode;
    subtitle?: ReactNode;
    children: ReactNode;
    className?: string;
    headerAction?: ReactNode;
}): import("react").JSX.Element;
export declare function VisualInspectorSection({ title, children, className, }: {
    title: ReactNode;
    children: ReactNode;
    className?: string;
}): import("react").JSX.Element;
export declare function VisualControlRow({ label, children, className, }: {
    label: ReactNode;
    children: ReactNode;
    className?: string;
}): import("react").JSX.Element;
export declare function VisualSwatchControl({ options, value, onChange, columns, className, }: {
    options: VisualControlOption[];
    value: string;
    onChange: (value: string) => void;
    columns?: number;
    className?: string;
}): import("react").JSX.Element;
export declare function VisualColorPicker({ label, value, onChange, documentColors, allowTransparent, hexLabel, documentColorsLabel, transparentLabel, className, contentProps, mixed, mixedLabel, variant, glyph, }: {
    label: string;
    value: string;
    onChange: (value: string) => void;
    documentColors?: string[];
    allowTransparent?: boolean;
    hexLabel?: string;
    documentColorsLabel?: string;
    transparentLabel?: string;
    className?: string;
    contentProps?: Omit<ComponentPropsWithoutRef<typeof PopoverContent>, "children"> & Record<`data-${string}`, string | undefined>;
    mixed?: boolean;
    mixedLabel?: string;
    /** `swatch` drops the value text and caret for dense horizontal toolbars. */
    variant?: "outline" | "filled" | "swatch";
    /** With `swatch`, renders this over a bar of the current color instead of a plain square. */
    glyph?: ReactNode;
}): import("react").JSX.Element;
export declare function VisualSegmentedControl({ options, value, onChange, className, }: {
    options: VisualControlOption[];
    value: string | null;
    onChange: (value: string) => void;
    className?: string;
}): import("react").JSX.Element;
export declare function VisualToggleControl({ checked, onChange, label, }: {
    checked: boolean;
    onChange: (checked: boolean) => void;
    label?: string;
}): import("react").JSX.Element;
export declare function VisualSliderControl({ value, onChange, min, max, step, unit, }: {
    value: number;
    onChange: (value: number) => void;
    min?: number;
    max?: number;
    step?: number;
    unit?: string;
}): import("react").JSX.Element;
export declare function VisualTweakControl({ tweak, value, onChange, className, }: {
    tweak: VisualTweakDefinition;
    value: VisualControlValue;
    onChange: (value: VisualControlValue) => void;
    className?: string;
}): import("react").JSX.Element;
//# sourceMappingURL=visual-style-controls.d.ts.map