@10x-media/form-builder 0.1.0-beta.0

package/dist/constants-B-BUfetP.d.ts

@@ -0,0 +1,288 @@
+import { n as AnyFormFieldDefinition } from "./fieldTypes-B8jkNRob.js";
+import { Field, Payload, PayloadRequest, Where } from "payload";
+
+//#region src/submissions/types.d.ts
+/** A single answered field: the field's machine name and its typed value. */
+type SubmissionValue = {
+  field: string;
+  value: unknown;
+};
+/** A localized, self-describing snapshot of an answered field, taken at submit time. */
+type SubmissionDescriptor = {
+  field: string;
+  label: string;
+  fieldType: string;
+  optionLabels?: Record<string, string>;
+};
+/** A per-field validation failure (`path` is the field name, for renderer error mapping). */
+type SubmissionFieldError = {
+  path: string;
+  message: string;
+};
+/** A field instance as stored in a form's `fields` blocks array (shared config plus type-specific keys). */
+type FormFieldInstance = {
+  blockType: string;
+  name: string;
+  label?: string;
+  required?: boolean;
+  visibleWhen?: Where;
+  validateWhen?: Where;
+  [key: string]: unknown;
+};
+//#endregion
+//#region src/aggregation/types.d.ts
+/** Which submission statuses to count. `complete` (default) excludes partials; `all` counts everything. */
+type SubmissionStatusFilter = 'complete' | 'partial' | 'all';
+/** One answer option (or distinct value) with its tally. */
+type AggregationBucket = {
+  /** The answer value, stringified (the grouping key). */value: string; /** Display label: current option label, else the submitted snapshot label, else the raw value. */
+  label: string;
+  count: number; /** Share of respondents, 0-100, rounded to one decimal. Can sum past 100 for multi-value fields. */
+  percentage: number;
+};
+/** Aggregated responses for one field across a form's submissions. */
+type FieldAggregation = {
+  field: string;
+  label?: string;
+  fieldType?: string; /** Respondents: submissions with a non-empty answer for this field. The percentage denominator. */
+  total: number;
+  buckets: AggregationBucket[]; /** True when the `maxSubmissions` cap was hit, so the tallies are a (large) sample, not the full set. */
+  truncated: boolean;
+};
+/** The slice of a submission the reducer reads. */
+type AggregationRow = {
+  values?: SubmissionValue[];
+  descriptors?: SubmissionDescriptor[];
+};
+/** Field metadata the reducer needs to label and order buckets, derived from the live form definition. */
+type FieldMeta = {
+  field: string;
+  label?: string;
+  fieldType?: string; /** Ordered known options with current labels; drives bucket order and label resolution. */
+  options?: {
+    value: string;
+    label: string;
+  }[];
+};
+//#endregion
+//#region src/calc/types.d.ts
+/** A serializable, safe-by-construction calculation expression. No strings are parsed; the evaluator tree-walks this closed node set (never `eval`). */
+type CalcExpression = {
+  type: 'lit';
+  value: number;
+} | {
+  type: 'ref';
+  field: string;
+} | {
+  type: 'op';
+  op: '+' | '-' | '*' | '/' | '%';
+  left: CalcExpression;
+  right: CalcExpression;
+} | {
+  type: 'neg';
+  operand: CalcExpression;
+} | {
+  type: 'fn';
+  fn: 'min' | 'max' | 'round' | 'abs' | 'ceil' | 'floor';
+  args: CalcExpression[];
+} | {
+  type: 'weight';
+  field: string;
+  weights: Record<string, number>;
+};
+//#endregion
+//#region src/calc/computeCalcFields.d.ts
+/** Returns the calc expression if the field carries one (non-null object), otherwise undefined. */
+declare const calcExpressionOf: (field: FormFieldInstance) => CalcExpression | undefined;
+/**
+ * Returns answers with every calc field's value derived from its expression,
+ * folded in declaration order so a calc may reference an earlier calc's result.
+ * Identity when no field carries an expression.
+ */
+declare const computeCalcFields: (fields: FormFieldInstance[], answers: Record<string, unknown>) => Record<string, unknown>;
+//#endregion
+//#region src/calc/evaluate.d.ts
+/** Evaluate a calc expression against form answers. Total + safe: no `eval`, always finite, div/mod by zero -> 0, missing ref -> 0, depth-guarded. Isomorphic (client + server). */
+declare const evaluateCalc: (expr: CalcExpression | null | undefined, answers: Record<string, unknown>) => number;
+//#endregion
+//#region src/conditions/evaluate.d.ts
+/**
+ * Evaluate a serializable `Where`-shaped condition against a flat map of (already coerced) form answers.
+ * An absent or empty condition matches (returns true). Operator semantics mirror Payload's query
+ * adapters: coerce then compare; `not_equals`/`not_in` are null-inclusive; `exists` treats `''`/absent
+ * as not-existing; `like` is case-insensitive and space-splits (every word must be a substring), and
+ * `not_like` is its logical negation (at least one word absent); `contains` is a single case-insensitive
+ * substring; comma-delimited `in`/`not_in` string values are split and trimmed. Geo (`near`/`within`/
+ * `intersects`) and `all` are out of scope and evaluate to false. Isomorphic: no `req`/DB access, so the
+ * renderer reuses it client-side.
+ */
+declare const evaluateCondition: (where: Where | null | undefined, answers: Record<string, unknown>) => boolean;
+//#endregion
+//#region src/fields/registry.d.ts
+type FieldTypeRegistry = Map<string, AnyFormFieldDefinition>;
+/** Per-type opt-in: `false` removes a built-in, `true` keeps it, an object adds a new type or replaces one. */
+type FieldTypeOption = boolean | AnyFormFieldDefinition;
+type FieldTypesConfig = Record<string, FieldTypeOption>;
+//#endregion
+//#region src/prefill/valuesFromSearchParams.d.ts
+type PrefillOptions = {
+  /** Map a query-param name to a field name. Unmapped params use their own name. */map?: Record<string, string>; /** If set, only these field names may be prefilled. */
+  allow?: string[]; /** These field names may never be prefilled. */
+  deny?: string[];
+};
+/**
+ * Map URL/query params to typed initial values for KNOWN fields only, coerced by each field's value
+ * kind. Unknown, denied, or un-allowed params are ignored; invalid numbers are dropped. Prefilled
+ * values are never trusted -- they still validate on submit. Pass the result to `<Form initialValues>`.
+ */
+declare const valuesFromSearchParams: (params: URLSearchParams | Record<string, string>, fields: FormFieldInstance[], registry: FieldTypeRegistry, options?: PrefillOptions) => Record<string, unknown>;
+//#endregion
+//#region src/events/types.d.ts
+type FormEventBase = {
+  formId: string;
+  at: string;
+};
+type FormEvent = (FormEventBase & {
+  type: 'form.viewed';
+}) | (FormEventBase & {
+  type: 'form.started';
+}) | (FormEventBase & {
+  type: 'step.viewed';
+  stepId: string;
+}) | (FormEventBase & {
+  type: 'step.completed';
+  stepId: string;
+}) | (FormEventBase & {
+  type: 'field.errored';
+  field: string;
+  message: string;
+}) | (FormEventBase & {
+  type: 'form.abandoned';
+}) | (FormEventBase & {
+  type: 'submission.created';
+  submissionId?: string;
+});
+type FormEventSink = {
+  emit: (event: FormEvent) => Promise<void> | void;
+};
+//#endregion
+//#region src/validation/types.d.ts
+type ValidationSeverity = 'error' | 'warning';
+/** A rule outcome: pass, a plain error string, or an explicit message + severity. */
+type ValidationRuleResult = true | string | {
+  message: string;
+  severity?: ValidationSeverity;
+};
+/** Resolves this rule instance's message (custom override or localized default) with `{var}` interpolation. */
+type MessageFn = (vars?: Record<string, unknown>) => string;
+/** Resolved per-instance rule params (loose at the DB boundary, narrowed by the author's generic). */
+type ValidationParams = Record<string, unknown>;
+type ValidationRuleValidateArgs<TParams extends ValidationParams, TValue, TData extends Record<string, unknown> = Record<string, unknown>> = {
+  value: TValue | null | undefined;
+  params: TParams;
+  siblingData: TData;
+  data: TData;
+  field: FormFieldInstance;
+  fieldType: string;
+  operation: 'create' | 'update';
+  event: 'onChange' | 'submit';
+  locale: string;
+  message: MessageFn; /** Server only. Absent in the client (req-less) context, so a server-only rule cannot run there. */
+  req?: PayloadRequest;
+  payload?: Payload; /** Server only. The form being submitted, for form-scoped lookups (e.g. notAlreadySubmitted). */
+  formId?: number | string;
+};
+type ValidationRuleValidate<TParams extends ValidationParams, TValue, TData extends Record<string, unknown> = Record<string, unknown>> = (args: ValidationRuleValidateArgs<TParams, TValue, TData>) => Promise<ValidationRuleResult> | ValidationRuleResult;
+/**
+ * A validation rule type, authored once. `params` is a Payload `Field[]` rendered in the per-field
+ * constraint list; `validate` returns `true | string | { message, severity }`. `client` defaults from
+ * whether the rule is pure (a rule that is async or uses `req`/`payload` must set `client: false`).
+ */
+type ValidationRuleDefinition<TParams extends ValidationParams = ValidationParams, TValue = unknown, TData extends Record<string, unknown> = Record<string, unknown>> = {
+  type: string;
+  label: string;
+  description?: string; /** Field type slugs this rule may be added to. Omit for all field types. */
+  appliesTo?: string[];
+  params?: Field[];
+  defaultMessage: string; /** Runs client-side too. Defaults to `true`; set `false` for async or `req`/`payload`-using rules. */
+  client?: boolean; /** Default severity when `validate` returns a bare string. Defaults to `error`. */
+  severity?: ValidationSeverity;
+  validate: ValidationRuleValidate<TParams, TValue, TData>;
+};
+/** Erased shape stored in the heterogeneous registry; params re-narrow per matched rule at execution. */
+type AnyValidationRuleValidate = (args: {
+  value: unknown;
+  params: ValidationParams;
+  siblingData: Record<string, unknown>;
+  data: Record<string, unknown>;
+  field: FormFieldInstance;
+  fieldType: string;
+  operation: 'create' | 'update';
+  event: 'onChange' | 'submit';
+  locale: string;
+  message: MessageFn;
+  req?: PayloadRequest;
+  payload?: Payload;
+  formId?: number | string;
+}) => Promise<ValidationRuleResult> | ValidationRuleResult;
+type AnyValidationRuleDefinition = {
+  type: string;
+  label: string;
+  description?: string;
+  appliesTo?: string[];
+  params?: Field[];
+  defaultMessage: string;
+  client?: boolean;
+  severity?: ValidationSeverity;
+  validate: AnyValidationRuleValidate;
+};
+//#endregion
+//#region src/presentations/types.d.ts
+/** How a presentation surfaces the form. Drives wrapper selection and CSS. */
+type PresentationSurface = 'inline' | 'page' | 'overlay';
+type PresentationDensity = 'comfortable' | 'compact';
+/**
+ * Serializable, framework-agnostic description of a presentation. The admin select and the
+ * stored `defaultPresentation` use only this; the React `Wrapper` is added in `./react`. No React here.
+ */
+type PresentationDescriptor = {
+  name: string; /** i18n key or literal shown in the admin select. */
+  label: string;
+  surface: PresentationSurface;
+  density: PresentationDensity; /** Overlay surfaces request dismissal after a successful submit. */
+  dismissOnSuccess?: boolean;
+};
+//#endregion
+//#region src/recall/interpolate.d.ts
+/**
+ * Replace `{{ name }}` and `{{ name|fallback }}` tokens. `resolve` returns the recalled value (''
+ * when absent); the fallback (or '') is substituted when `resolve` yields ''. Token-free input is
+ * returned unchanged, so this is a no-op for ordinary text.
+ */
+declare const interpolate: (template: string, resolve: (name: string) => string) => string;
+//#endregion
+//#region src/recall/resolver.d.ts
+type RecallResolver = (name: string) => string;
+/** Derive a value->label map from a select-like field instance's `options`. */
+declare const optionLabelsFor: (field: FormFieldInstance) => Record<string, string> | undefined;
+/**
+ * Build a recall resolver: `{{name}}` -> the field's current value, formatted via its type's `format`
+ * (so a select shows its option label, a checkbox Yes/No, a date localized). Missing field or empty
+ * value -> ''. Pure and isomorphic; the renderer and server templates share it.
+ */
+declare const buildRecallResolver: (args: {
+  fields: FormFieldInstance[];
+  values: Record<string, unknown>;
+  registry: Map<string, AnyFormFieldDefinition>;
+  locale: string;
+  t: (key: string) => string;
+}) => RecallResolver;
+//#endregion
+//#region src/spam/constants.d.ts
+/** Default honeypot decoy field name. Plausible to bots, unlikely to collide with a real field name. */
+declare const DEFAULT_HONEYPOT_FIELD = "confirm_email";
+/** Reserved `values` entry carrying a captcha token from the client. */
+declare const CAPTCHA_TOKEN_KEY = "__fb_captcha";
+//#endregion
+export { FieldMeta as A, evaluateCalc as C, AggregationBucket as D, CalcExpression as E, SubmissionValue as F, FormFieldInstance as M, SubmissionDescriptor as N, AggregationRow as O, SubmissionFieldError as P, evaluateCondition as S, computeCalcFields as T, PrefillOptions as _, optionLabelsFor as a, FieldTypeRegistry as b, PresentationDescriptor as c, ValidationParams as d, ValidationRuleDefinition as f, FormEventSink as g, FormEvent as h, buildRecallResolver as i, SubmissionStatusFilter as j, FieldAggregation as k, PresentationSurface as l, ValidationSeverity as m, DEFAULT_HONEYPOT_FIELD as n, interpolate as o, ValidationRuleResult as p, RecallResolver as r, PresentationDensity as s, CAPTCHA_TOKEN_KEY as t, AnyValidationRuleDefinition as u, valuesFromSearchParams as v, calcExpressionOf as w, FieldTypesConfig as x, FieldTypeOption as y };
+//# sourceMappingURL=constants-B-BUfetP.d.ts.map

package/dist/exports/client.d.ts

@@ -0,0 +1,21 @@
+import { t as ConditionFieldType } from "../fieldTypes-B8jkNRob.js";
+
+//#region src/client/FormConditionField.d.ts
+/** Props: standard JSON field client props plus the `conditionTypes` map we pass via clientProps. */
+type FormConditionFieldProps = {
+  path?: string;
+  field?: {
+    label?: unknown;
+    name?: string;
+  };
+  label?: unknown;
+  conditionTypes: Record<string, ConditionFieldType>;
+};
+/**
+ * The `Field` mounted on a form field's `visibleWhen`/`validateWhen` json column. Binds the field's own
+ * path with `useField<Where>()` (the QueryPresetsWhereField precedent) and renders the native builder.
+ */
+declare const FormConditionField: (props: FormConditionFieldProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { FormConditionField };
+//# sourceMappingURL=client.d.ts.map

package/dist/exports/client.js

@@ -0,0 +1,320 @@
+"use client";
+import { t as keys } from "../keys-N5xGiUsh.js";
+import { a as operatorValueShape, i as operatorLabelKey, r as firstOperatorFor, t as conditionOperators } from "../fieldTypes-CzhhJXjg.js";
+import { reduceFieldsToValues, transformWhereQuery } from "payload/shared";
+import { DateCondition, FieldLabel, NumberCondition, ReactSelect, SelectCondition, TextCondition, useField, useFormFields, useTranslation } from "@payloadcms/ui";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/translations/useTranslation.ts
+/**
+* `useTranslation` bound to this plugin's keys, so `t(keys.X)` typechecks without
+* a per-call `@ts-expect-error`. Returns Payload's `{ t, i18n }` unchanged.
+*/
+const useTranslation$1 = () => useTranslation();
+//#endregion
+//#region src/client/synthesizeClientField.ts
+/** Project a stored field row into a condition operand, or `null` when the row has no usable name. */
+const operandFromRow = (row, conditionTypes) => {
+	const name = typeof row.name === "string" ? row.name.trim() : "";
+	if (name.length === 0) return null;
+	const conditionType = conditionTypes[row.blockType] ?? "text";
+	return {
+		name,
+		label: typeof row.label === "string" && row.label.length > 0 ? row.label : name,
+		conditionType,
+		options: Array.isArray(row.options) ? row.options : void 0
+	};
+};
+/**
+* Build the minimal `*FieldClient` a Payload leaf condition input requires for a given operand. Casts
+* are localized to these four synths and nowhere else: `FieldBaseClient` requires only `name`, and each
+* leaf is `FieldBaseClient & Pick<…, 'type' | …>` where every picked member but `type` (and `select`'s
+* required `options`) is optional, so the literals are structurally complete. `dateClientField` omits
+* `admin.date`, so `DateCondition` falls back to its default date format. Each synth returns a single
+* concrete client type so leaf `field` props need no narrowing.
+*/
+const textClientField = (operand) => ({
+	name: operand.name,
+	label: operand.label,
+	type: "text"
+});
+const numberClientField = (operand) => ({
+	name: operand.name,
+	label: operand.label,
+	type: "number"
+});
+const dateClientField = (operand) => ({
+	name: operand.name,
+	label: operand.label,
+	type: "date"
+});
+const selectClientField = (operand) => ({
+	name: operand.name,
+	label: operand.label,
+	type: "select",
+	options: operand.options ?? []
+});
+//#endregion
+//#region src/client/ConditionRow.tsx
+/** ReactSelect's `onChange` hands back `Option | Option[]`; narrow it to the single chosen option. */
+const singleOption = (selected) => Array.isArray(selected) ? selected[0] : selected;
+const ConditionRow = ({ condition, operands, onChange, onRemove }) => {
+	const { t, i18n } = useTranslation$1();
+	const operand = operands.find((entry) => entry.name === condition.field);
+	const conditionType = operand?.conditionType ?? "text";
+	const operators = conditionOperators[conditionType];
+	const fieldOptions = operands.map((entry) => ({
+		label: entry.label,
+		value: entry.name
+	}));
+	const operatorOptions = operators.map((operator) => ({
+		label: i18n.t(operatorLabelKey(operator)),
+		value: operator
+	}));
+	const handleFieldChange = (selected) => {
+		const chosen = singleOption(selected);
+		const next = operands.find((entry) => entry.name === chosen?.value);
+		if (!next) return;
+		onChange({
+			field: next.name,
+			operator: firstOperatorFor(next.conditionType),
+			value: void 0
+		});
+	};
+	const handleOperatorChange = (selected) => {
+		const chosen = singleOption(selected);
+		if (!chosen) return;
+		const operator = chosen.value;
+		const keepValue = operatorValueShape(condition.operator) === operatorValueShape(operator);
+		onChange({
+			...condition,
+			operator,
+			value: keepValue ? condition.value : void 0
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "form-builder-condition-row",
+		style: {
+			display: "flex",
+			gap: 8,
+			alignItems: "flex-start"
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				style: { minWidth: 160 },
+				children: /* @__PURE__ */ jsx(ReactSelect, {
+					options: fieldOptions,
+					value: fieldOptions.find((option) => option.value === condition.field),
+					placeholder: t(keys.conditionSelectField),
+					isClearable: false,
+					onChange: handleFieldChange
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: { minWidth: 140 },
+				children: /* @__PURE__ */ jsx(ReactSelect, {
+					options: operatorOptions,
+					value: operatorOptions.find((option) => option.value === condition.operator),
+					disabled: !operand,
+					isClearable: false,
+					onChange: handleOperatorChange
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: { flex: 1 },
+				children: /* @__PURE__ */ jsx(ConditionValue, {
+					conditionType,
+					operand,
+					operator: condition.operator,
+					value: condition.value,
+					onChange: (value) => onChange({
+						...condition,
+						value
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onRemove,
+				"aria-label": t(keys.conditionRemove),
+				children: t(keys.conditionRemove)
+			})
+		]
+	});
+};
+const ConditionValue = ({ conditionType, operand, operator, value, onChange }) => {
+	const { t } = useTranslation$1();
+	if (conditionType === "checkbox" || operatorValueShape(operator) === "boolean") {
+		const options = [{
+			label: t(keys.conditionTrue),
+			value: "true"
+		}, {
+			label: t(keys.conditionFalse),
+			value: "false"
+		}];
+		const handleBooleanChange = (selected) => {
+			onChange(singleOption(selected)?.value === "true");
+		};
+		return /* @__PURE__ */ jsx(ReactSelect, {
+			options,
+			value: options.find((option) => String(option.value) === String(value)) ?? options[0],
+			isClearable: false,
+			onChange: handleBooleanChange
+		});
+	}
+	if (!operand) return null;
+	switch (conditionType) {
+		case "number": return /* @__PURE__ */ jsx(NumberCondition, {
+			disabled: false,
+			field: numberClientField(operand),
+			operator,
+			value,
+			onChange: (next) => onChange(next)
+		});
+		case "date": return /* @__PURE__ */ jsx(DateCondition, {
+			disabled: false,
+			field: dateClientField(operand),
+			operator,
+			value,
+			onChange: (next) => onChange(next)
+		});
+		case "select": return /* @__PURE__ */ jsx(SelectCondition, {
+			disabled: false,
+			field: selectClientField(operand),
+			operator,
+			options: operand.options ?? [],
+			value,
+			onChange: (next) => onChange(next)
+		});
+		default: return /* @__PURE__ */ jsx(TextCondition, {
+			disabled: false,
+			field: textClientField(operand),
+			operator,
+			value,
+			onChange: (next) => onChange(next)
+		});
+	}
+};
+//#endregion
+//#region src/client/ConditionBuilder.tsx
+const toRow = (constraint) => {
+	const field = Object.keys(constraint)[0];
+	if (!field) return null;
+	const ops = constraint[field];
+	const operator = Object.keys(ops)[0];
+	if (!operator) return null;
+	return {
+		field,
+		operator,
+		value: ops[operator]
+	};
+};
+const fromRow = (row) => ({ [row.field]: { [row.operator]: row.value } });
+const readGroups = (value) => {
+	if (!value || Object.keys(value).length === 0) return [];
+	const canonical = transformWhereQuery(value);
+	return (Array.isArray(canonical.or) ? canonical.or : []).map((group) => {
+		return (Array.isArray(group.and) ? group.and : []).map((constraint) => toRow(constraint)).filter((row) => row !== null);
+	});
+};
+const writeGroups = (groups) => ({ or: groups.filter((group) => group.length > 0).map((group) => ({ and: group.map(fromRow) })) });
+const operandsFromData = (data, conditionTypes, selfName) => {
+	return (Array.isArray(data.fields) ? data.fields : []).map((row) => operandFromRow(row, conditionTypes)).filter((operand) => operand !== null && operand.name !== selfName);
+};
+const ConditionBuilder = ({ value, onChange, conditionTypes, selfName }) => {
+	const { t } = useTranslation$1();
+	const operandsJson = useFormFields(([fields]) => JSON.stringify(operandsFromData(reduceFieldsToValues(fields, true), conditionTypes, selfName)));
+	const operands = useMemo(() => JSON.parse(operandsJson), [operandsJson]);
+	const groups = readGroups(value);
+	const emit = (next) => onChange(writeGroups(next));
+	const addCondition = (groupIndex) => {
+		const first = operands[0];
+		if (!first) return;
+		const row = {
+			field: first.name,
+			operator: firstOperatorFor(first.conditionType),
+			value: void 0
+		};
+		emit(groups.length === 0 ? [[row]] : groups.map((group, index) => index === groupIndex ? [...group, row] : group));
+	};
+	const addOrGroup = () => {
+		const first = operands[0];
+		if (!first) return;
+		emit([...groups, [{
+			field: first.name,
+			operator: firstOperatorFor(first.conditionType),
+			value: void 0
+		}]]);
+	};
+	const updateRow = (groupIndex, rowIndex, row) => emit(groups.map((group, index) => index === groupIndex ? group.map((existing, position) => position === rowIndex ? row : existing) : group));
+	const removeRow = (groupIndex, rowIndex) => emit(groups.map((group, index) => index === groupIndex ? group.filter((_, position) => position !== rowIndex) : group).filter((group) => group.length > 0));
+	if (operands.length === 0) return /* @__PURE__ */ jsx("p", {
+		className: "form-builder-condition__hint",
+		children: t(keys.conditionNoFields)
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "form-builder-condition",
+		children: [groups.length === 0 ? /* @__PURE__ */ jsx("p", {
+			className: "form-builder-condition__hint",
+			children: t(keys.conditionEmpty)
+		}) : groups.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", {
+			className: "form-builder-condition__group",
+			children: [
+				groupIndex > 0 ? /* @__PURE__ */ jsx("div", {
+					className: "form-builder-condition__or",
+					children: t(keys.conditionOr)
+				}) : null,
+				group.map((row, rowIndex) => /* @__PURE__ */ jsxs("div", {
+					className: "form-builder-condition__and",
+					children: [rowIndex > 0 ? /* @__PURE__ */ jsx("span", { children: t(keys.conditionAnd) }) : null, /* @__PURE__ */ jsx(ConditionRow, {
+						condition: row,
+						operands,
+						onChange: (next) => updateRow(groupIndex, rowIndex, next),
+						onRemove: () => removeRow(groupIndex, rowIndex)
+					})]
+				}, rowIndex)),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => addCondition(groupIndex),
+					children: t(keys.conditionAddCondition)
+				})
+			]
+		}, groupIndex)), /* @__PURE__ */ jsx("div", {
+			className: "form-builder-condition__actions",
+			children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => groups.length === 0 ? addCondition(0) : addOrGroup(),
+				children: groups.length === 0 ? t(keys.conditionAddCondition) : t(keys.conditionAddOr)
+			})
+		})]
+	});
+};
+//#endregion
+//#region src/client/FormConditionField.tsx
+const toStaticLabel = (label) => {
+	if (typeof label === "string") return label;
+	if (label && typeof label === "object") return label;
+};
+/**
+* The `Field` mounted on a form field's `visibleWhen`/`validateWhen` json column. Binds the field's own
+* path with `useField<Where>()` (the QueryPresetsWhereField precedent) and renders the native builder.
+*/
+const FormConditionField = (props) => {
+	const { path, setValue, value } = useField();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "field-type form-builder-condition-field",
+		children: [/* @__PURE__ */ jsx(FieldLabel, {
+			label: toStaticLabel(props.field?.label ?? props.label),
+			path
+		}), /* @__PURE__ */ jsx(ConditionBuilder, {
+			value: value ?? void 0,
+			onChange: setValue,
+			conditionTypes: props.conditionTypes,
+			selfName: props.field?.name
+		})]
+	});
+};
+//#endregion
+export { FormConditionField };
+
+//# sourceMappingURL=client.js.map