import { ConditionType } from '@zeniai/client-epic-state';
/**
 * `ConditionType` is re-exported here so existing import sites in
 * `web-components` (BillPay + Reimbursement detail pages, stories)
 * keep working unchanged. The canonical definition lives in
 * `client-epic-state` (derived from `Criteria["type"]`) so the UI
 * discriminator can't drift from the data model.
 */
export type { ConditionType };
/**
 * Approval Rules 3.0 — unified condition row.
 *
 * A single row in the Set Conditions section, laid out as one
 * horizontal line:
 *
 *   [ Type ▾ ] [ Operator/Comparator ] [ Value(s) ] [ 🗑 ]
 *
 * For Amount: operator slot holds the comparator dropdown
 * (Greater than / Less than / Between), and the value slot is one
 * number input (or two for "Between"). For Vendor / Department: the
 * operator slot is a segmented `is` / `is not` toggle, and the value
 * slot is a multi-select of vendor or department names.
 *
 * Form-state model — controls bind directly to the existing form
 * paths used by the (now-deprecated for screen use) per-variant rows:
 *   - `amountCriteria.comparator`, `amountCriteria.min.amount`,
 *     `amountCriteria.max.amount`
 *   - `vendorCriteria.operator`, `vendorCriteria.selection`
 *   - `departmentCriteria.operator`, `departmentCriteria.selection`
 *
 * The "list of conditions" is a *visual* construct owned by the
 * parent: it tracks the ordered list of active types and renders one
 * ConditionRow per type. When a row is removed the parent clears the
 * relevant form slot so the payload mapper drops the condition. The
 * leading type dropdown is parent-controlled (not bound to
 * react-hook-form) because that list is the source of truth.
 *
 * Per task #11 (clear-all UX): the Amount row is non-removable. Its
 * trash icon is rendered but visually dimmed and disabled so the row
 * keeps its horizontal alignment with removable rows.
 *
 * Visual polish (this iteration):
 *   1. Each control sits inside a `ControlCard` styled wrapper that
 *      paints the design-system border + background so the raw
 *      react-select primitives don't expose their default UA outlines.
 *   2. The `is` / `is_not` operator is a binary segmented toggle
 *      (built inline below) rather than a dropdown, matching the
 *      target design.
 *   3. The multi-select primitive keeps its built-in
 *      focused → chips / blurred → comma-text rendering — changing
 *      that requires modifying the shared `MultiSelectField`, which
 *      every other consumer depends on. Flagged as a follow-up.
 */
export interface ConditionRowProps {
    availableTypes: readonly ConditionType[];
    /** When `false`, the trash icon is dimmed and inert. */
    canRemove: boolean;
    index: number;
    rowType: ConditionType;
    /**
     * Types currently used by *other* rows (i.e. excludes this row's own
     * type). They are filtered out of the dropdown so the user can't
     * create duplicates.
     */
    usedTypes: ReadonlySet<ConditionType>;
    /** Department multi-select options + label lookup. */
    allDepartmentIds?: string[];
    /** Vendor multi-select options + label lookup. */
    allVendorIds?: string[];
    /** Forwarded to the amount value input when `rowType === "amount"`. */
    currencySymbol?: string;
    departmentNamesById?: Record<string, string>;
    vendorNamesById?: Record<string, string>;
    onRemove: () => void;
    onTypeChange: (next: ConditionType) => void;
}
export declare function ConditionRow({ rowType, index, availableTypes, usedTypes, onTypeChange, onRemove, canRemove, currencySymbol, allVendorIds, vendorNamesById, allDepartmentIds, departmentNamesById, }: ConditionRowProps): import("react/jsx-runtime").JSX.Element;
export default ConditionRow;