@pipe0/react 0.0.2

package/dist/components/defaults/adapters/json-extraction-input.mjs

@@ -0,0 +1,333 @@
+import { Button } from "../../ui/button.mjs";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../ui/select.mjs";
+import { Input } from "../../ui/input.mjs";
+import { IconPlus, IconTrash } from "../../internal/icons.mjs";
+import { HoverInfo } from "../../hover-info.mjs";
+import { Badge } from "../../ui/badge.mjs";
+import { useFieldError } from "../../../hooks/use-field-error.mjs";
+import { Label } from "../../ui/label.mjs";
+import { useJsonataPreview } from "../../../hooks/use-jsonata-preview.mjs";
+import { generateRandomString } from "../../../utils/generate-random-string.mjs";
+import { ToggleAdvancedButton } from "../toggle-advanced-button.mjs";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RECORD_FIELD_TYPES, TYPES_TO_FORMATS } from "@pipe0/base";
+import { Collapsible } from "@base-ui/react/collapsible";
+import { Tabs } from "@base-ui/react/tabs";
+
+//#region src/components/defaults/adapters/json-extraction-input.tsx
+function ExtractionPreview({ exampleValue, extraction }) {
+	const { preview, error, isLoading } = useJsonataPreview(extraction.path, exampleValue);
+	return /* @__PURE__ */ jsxs(Tabs.Root, {
+		defaultValue: "extracted",
+		className: "pz:flex pz:flex-col pz:gap-1 pz:rounded-md pz:border pz:border-input pz:bg-muted/30",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "pz:flex pz:items-center pz:justify-between pz:px-2 pz:py-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "pz:text-xs pz:font-medium pz:text-muted-foreground",
+					children: "Preview"
+				}), /* @__PURE__ */ jsxs(Tabs.List, {
+					className: "pz:inline-flex pz:gap-1",
+					children: [
+						isLoading && /* @__PURE__ */ jsx("span", {
+							className: "pz:text-xs pz:text-muted-foreground",
+							children: "..."
+						}),
+						/* @__PURE__ */ jsx(Tabs.Tab, {
+							value: "extracted",
+							className: "pz:rounded-sm pz:px-2 pz:py-0.5 pz:text-xs pz:hover:bg-accent pz:data-[active]:bg-accent pz:data-[active]:text-accent-foreground",
+							children: "Extracted"
+						}),
+						/* @__PURE__ */ jsx(Tabs.Tab, {
+							value: "full",
+							className: "pz:rounded-sm pz:px-2 pz:py-0.5 pz:text-xs pz:hover:bg-accent pz:data-[active]:bg-accent pz:data-[active]:text-accent-foreground",
+							children: "Full value"
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx(Tabs.Panel, {
+				value: "full",
+				children: /* @__PURE__ */ jsx("pre", {
+					className: "pz:m-0 pz:overflow-auto pz:rounded-b-md pz:bg-muted/30 pz:p-2 pz:text-xs pz:text-foreground",
+					children: JSON.stringify(exampleValue, null, 2)
+				})
+			}),
+			/* @__PURE__ */ jsx(Tabs.Panel, {
+				value: "extracted",
+				children: /* @__PURE__ */ jsx("pre", {
+					className: "pz:m-0 pz:overflow-auto pz:rounded-b-md pz:bg-muted/30 pz:p-2 pz:text-xs pz:text-foreground",
+					children: error ? error : JSON.stringify(preview, null, 2)
+				})
+			})
+		]
+	});
+}
+function ExtractionCard({ extraction, idx, isLast, option, form, basePath, onUpdate, onRemove, onAdd }) {
+	const [showPreview, setShowPreview] = useState(false);
+	const extractionPath = `${basePath}.extractions.${idx}`;
+	const pathError = useFieldError(form, `${extractionPath}.path`);
+	const nameError = useFieldError(form, `${extractionPath}.output_field.name`);
+	const availableFormats = useMemo(() => TYPES_TO_FORMATS[extraction.output_field.type] ?? [], [extraction.output_field.type]);
+	const updatePath = (value) => {
+		onUpdate(idx, {
+			...extraction,
+			path: value
+		});
+	};
+	const updateOutputField = (property, value) => {
+		if (value === null) return;
+		const newOutputField = {
+			...extraction.output_field,
+			[property]: value
+		};
+		if (property === "type") {
+			const newFormats = TYPES_TO_FORMATS[value] ?? [];
+			if (newFormats.length === 0 || !newFormats.includes(newOutputField.format)) newOutputField.format = null;
+		}
+		onUpdate(idx, {
+			...extraction,
+			output_field: newOutputField
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+		className: "pz:flex pz:flex-col pz:gap-2 pz:border-t pz:border-b pz:border-input pz:p-3",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "pz:flex pz:items-center pz:justify-between",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "pz:h-7 pz:px-2 pz:font-semibold pz:select-none pz:text-xs pz:rounded-sm pz:bg-accent pz:border pz:border-input pz:text-muted-foreground pz:grid pz:place-content-center",
+				children: [idx + 1, ". Extraction"]
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "destructive",
+				size: "icon",
+				className: "pz:[&_svg]:size-3 pz:size-7 pz:rounded-sm",
+				onClick: () => onRemove(idx),
+				title: "Remove condition",
+				children: /* @__PURE__ */ jsx(IconTrash, {})
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "pz:flex pz:flex-col pz:gap-2",
+			children: [
+				option.exampleValue && showPreview && /* @__PURE__ */ jsx(ExtractionPreview, {
+					exampleValue: option.exampleValue,
+					extraction
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "pz:flex pz:flex-col pz:gap-1",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "pz:flex pz:items-center pz:justify-between",
+							children: [/* @__PURE__ */ jsxs(Label, {
+								className: "pz:text-xs pz:text-muted-foreground pz:inline-flex pz:items-center pz:gap-1",
+								children: ["Path ", /* @__PURE__ */ jsx(HoverInfo, { children: "Use JSONata" })]
+							}), option.exampleValue ? /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "ghost",
+								size: "sm",
+								onClick: () => setShowPreview(!showPreview),
+								children: showPreview ? "Hide preview" : "Show preview"
+							}) : /* @__PURE__ */ jsx("span", {
+								className: "pz:text-xs pz:text-muted-foreground",
+								children: "No preview available"
+							})]
+						}),
+						/* @__PURE__ */ jsx(Input, {
+							value: extraction.path,
+							onChange: (e) => updatePath(e.target.value),
+							placeholder: "ex. emails[0].value",
+							"aria-invalid": !!pathError
+						}),
+						pathError && /* @__PURE__ */ jsx("span", {
+							className: "pz:text-destructive pz:text-xs pz:font-medium",
+							role: "alert",
+							children: pathError
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "pz:flex pz:items-end pz:gap-2",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "pz:flex pz:flex-col pz:gap-1 pz:flex-1",
+						children: [/* @__PURE__ */ jsx(Label, {
+							className: "pz:text-xs pz:text-muted-foreground",
+							children: "Output Type"
+						}), /* @__PURE__ */ jsxs(Select, {
+							value: extraction.output_field.type,
+							onValueChange: (v) => updateOutputField("type", v),
+							children: [/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, {}) }), /* @__PURE__ */ jsx(SelectContent, { children: RECORD_FIELD_TYPES.map((type) => /* @__PURE__ */ jsx(SelectItem, {
+								value: type,
+								children: type
+							}, type)) })]
+						})]
+					}), availableFormats.length > 0 && /* @__PURE__ */ jsxs("div", {
+						className: "pz:flex pz:flex-col pz:gap-1 pz:flex-1",
+						children: [/* @__PURE__ */ jsx(Label, {
+							className: "pz:text-xs pz:text-muted-foreground",
+							children: "Format"
+						}), /* @__PURE__ */ jsxs(Select, {
+							value: extraction.output_field.format || "",
+							onValueChange: (v) => updateOutputField("format", v),
+							children: [/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select format" }) }), /* @__PURE__ */ jsx(SelectContent, { children: availableFormats.map((format) => /* @__PURE__ */ jsx(SelectItem, {
+								value: format,
+								children: format
+							}, format)) })]
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsxs(Collapsible.Root, { children: [/* @__PURE__ */ jsx(Collapsible.Trigger, { render: /* @__PURE__ */ jsx(ToggleAdvancedButton, { children: "Open advanced" }) }), /* @__PURE__ */ jsxs(Collapsible.Panel, {
+					className: "pz:flex pz:flex-col pz:gap-2 pz:pt-2",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "pz:flex pz:flex-col pz:gap-1",
+						children: [
+							/* @__PURE__ */ jsx(Label, {
+								className: "pz:text-xs pz:text-muted-foreground",
+								children: "Outpue field name"
+							}),
+							/* @__PURE__ */ jsx(Input, {
+								value: extraction.output_field.name,
+								onChange: (e) => updateOutputField("name", e.target.value),
+								"aria-invalid": !!nameError
+							}),
+							nameError && /* @__PURE__ */ jsx("span", {
+								className: "pz:text-destructive pz:text-xs pz:font-medium",
+								role: "alert",
+								children: nameError
+							})
+						]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "pz:flex pz:flex-col pz:gap-1",
+						children: [/* @__PURE__ */ jsx(Label, {
+							className: "pz:text-xs pz:text-muted-foreground",
+							children: "Output field label"
+						}), /* @__PURE__ */ jsx(Input, {
+							value: extraction.output_field.label,
+							onChange: (e) => updateOutputField("label", e.target.value),
+							placeholder: "Describe your new field"
+						})]
+					})]
+				})] })
+			]
+		})]
+	}), isLast && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Button, {
+		type: "button",
+		variant: "link",
+		size: "xs",
+		onClick: onAdd,
+		children: [/* @__PURE__ */ jsx(IconPlus, {}), "Add path"]
+	}) })] });
+}
+function JsonExtractionInputAdapter(field) {
+	const meta = field.meta;
+	const value = field.value ?? {
+		field_name: "",
+		extractions: []
+	};
+	const addExtraction = (fieldName) => {
+		const inputFieldName = fieldName || value.field_name;
+		const isInitial = value.extractions.length === 0;
+		const newValue = {
+			field_name: inputFieldName,
+			extractions: [...value.extractions, {
+				path: "",
+				output_field: {
+					name: `extract_${inputFieldName}_${generateRandomString(4)}`,
+					format: null,
+					label: "Extract JSON",
+					type: "string"
+				}
+			}]
+		};
+		if (isInitial) field.form.setValue(field.path, newValue, {
+			shouldDirty: false,
+			shouldTouch: false,
+			shouldValidate: false
+		});
+		else field.setValue(newValue);
+	};
+	const removeAllExtractions = () => {
+		field.form.resetField(field.path, { defaultValue: {
+			field_name: "",
+			extractions: []
+		} });
+	};
+	const updateExtraction = (idx, ext) => {
+		const newExtractions = [...value.extractions];
+		newExtractions[idx] = ext;
+		field.setValue({
+			...value,
+			extractions: newExtractions
+		});
+	};
+	const removeExtraction = (idx) => {
+		const newExtractions = [...value.extractions];
+		newExtractions.splice(idx, 1);
+		if (newExtractions.length === 0) field.setValue({
+			field_name: "",
+			extractions: []
+		});
+		else field.setValue({
+			...value,
+			extractions: newExtractions
+		});
+	};
+	const option = useMemo(() => meta.fields.find((e) => e.fieldName === value.field_name), [value.field_name, meta.fields]);
+	return /* @__PURE__ */ jsx("div", {
+		"data-p0": "input",
+		className: "pz:flex pz:flex-col pz:gap-3",
+		children: value.field_name && value.extractions.length > 0 && option ? /* @__PURE__ */ jsxs("div", {
+			className: "pz:flex pz:flex-col pz:gap-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "pz:flex pz:items-center pz:justify-between",
+				children: [/* @__PURE__ */ jsxs(Badge, {
+					variant: "secondary",
+					className: "pz:h-7 pz:bg-accent pz:border-input pz:border pz:text-accent-foreground pz:font-normal",
+					children: ["Field: ", /* @__PURE__ */ jsx("b", { children: option.fieldLabel || option.fieldName })]
+				}), /* @__PURE__ */ jsxs(Button, {
+					type: "button",
+					variant: "destructive",
+					size: "xs",
+					className: "pz:font-normal pz:h-7",
+					onClick: removeAllExtractions,
+					children: ["Reset ", /* @__PURE__ */ jsx(IconTrash, {})]
+				})]
+			}), value.extractions.map((extraction, idx) => /* @__PURE__ */ jsx(ExtractionCard, {
+				extraction,
+				idx,
+				isLast: idx === value.extractions.length - 1,
+				option,
+				form: field.form,
+				basePath: field.path,
+				onUpdate: updateExtraction,
+				onRemove: removeExtraction,
+				onAdd: () => addExtraction()
+			}, idx))]
+		}) : meta.fields.length > 0 ? /* @__PURE__ */ jsx("div", {
+			className: "pz:flex pz:flex-col pz:gap-2 pz:rounded-md pz:border-input",
+			children: /* @__PURE__ */ jsxs(Select, {
+				value: "",
+				onValueChange: (v) => {
+					if (v) addExtraction(v);
+				},
+				children: [/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select field" }) }), /* @__PURE__ */ jsx(SelectContent, { children: meta.fields.map((f) => /* @__PURE__ */ jsxs(SelectItem, {
+					value: f.fieldName,
+					children: [
+						f.fieldLabel,
+						" - ",
+						f.fieldName
+					]
+				}, f.fieldName)) })]
+			})
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "pz:flex pz:items-center pz:gap-1.5 pz:rounded-md pz:px-1",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "pz:text-xs pz:font-normal",
+				children: "No JSON field available"
+			}), /* @__PURE__ */ jsx(HoverInfo, { children: "A JSON field is required for this pipe. Add a json field to your pipeline." })]
+		})
+	});
+}
+
+//#endregion
+export { JsonExtractionInputAdapter };
+//# sourceMappingURL=json-extraction-input.mjs.map

package/dist/components/defaults/adapters/json-extraction-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-extraction-input.mjs","names":[],"sources":["../../../../src/components/defaults/adapters/json-extraction-input.tsx"],"sourcesContent":["import { Collapsible } from \"@base-ui/react/collapsible\";\nimport { Tabs } from \"@base-ui/react/tabs\";\nimport type { JSONExtraction, JSONExtractionMeta } from \"@pipe0/base\";\nimport { RECORD_FIELD_TYPES, TYPES_TO_FORMATS } from \"@pipe0/base\";\nimport { useMemo, useState } from \"react\";\nimport type { UseFormReturn } from \"react-hook-form\";\nimport { useFieldError } from \"../../../hooks/use-field-error.js\";\nimport { useJsonataPreview } from \"../../../hooks/use-jsonata-preview.js\";\nimport type { FieldHandle } from \"../../../types/field-handle.js\";\nimport { generateRandomString } from \"../../../utils/generate-random-string.js\";\nimport { HoverInfo } from \"../../hover-info.js\";\nimport { IconPlus, IconTrash } from \"../../internal/icons.js\";\nimport { Badge } from \"../../ui/badge.js\";\nimport { Button } from \"../../ui/button.js\";\nimport { Input } from \"../../ui/input.js\";\nimport { Label } from \"../../ui/label.js\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"../../ui/select.js\";\nimport { ToggleAdvancedButton } from \"../toggle-advanced-button.js\";\n\nfunction ExtractionPreview({\n  exampleValue,\n  extraction,\n}: {\n  extraction: JSONExtraction[\"extractions\"][number];\n  exampleValue: unknown;\n}) {\n  const { preview, error, isLoading } = useJsonataPreview(extraction.path, exampleValue);\n\n  return (\n    <Tabs.Root\n      defaultValue=\"extracted\"\n      className=\"pz:flex pz:flex-col pz:gap-1 pz:rounded-md pz:border pz:border-input pz:bg-muted/30\"\n    >\n      <div className=\"pz:flex pz:items-center pz:justify-between pz:px-2 pz:py-1\">\n        <span className=\"pz:text-xs pz:font-medium pz:text-muted-foreground\">Preview</span>\n        <Tabs.List className=\"pz:inline-flex pz:gap-1\">\n          {isLoading && <span className=\"pz:text-xs pz:text-muted-foreground\">...</span>}\n          <Tabs.Tab\n            value=\"extracted\"\n            className=\"pz:rounded-sm pz:px-2 pz:py-0.5 pz:text-xs pz:hover:bg-accent pz:data-[active]:bg-accent pz:data-[active]:text-accent-foreground\"\n          >\n            Extracted\n          </Tabs.Tab>\n          <Tabs.Tab\n            value=\"full\"\n            className=\"pz:rounded-sm pz:px-2 pz:py-0.5 pz:text-xs pz:hover:bg-accent pz:data-[active]:bg-accent pz:data-[active]:text-accent-foreground\"\n          >\n            Full value\n          </Tabs.Tab>\n        </Tabs.List>\n      </div>\n      <Tabs.Panel value=\"full\">\n        <pre className=\"pz:m-0 pz:overflow-auto pz:rounded-b-md pz:bg-muted/30 pz:p-2 pz:text-xs pz:text-foreground\">\n          {JSON.stringify(exampleValue, null, 2)}\n        </pre>\n      </Tabs.Panel>\n      <Tabs.Panel value=\"extracted\">\n        <pre className=\"pz:m-0 pz:overflow-auto pz:rounded-b-md pz:bg-muted/30 pz:p-2 pz:text-xs pz:text-foreground\">\n          {error ? error : JSON.stringify(preview, null, 2)}\n        </pre>\n      </Tabs.Panel>\n    </Tabs.Root>\n  );\n}\n\nfunction ExtractionCard({\n  extraction,\n  idx,\n  isLast,\n  option,\n  form,\n  basePath,\n  onUpdate,\n  onRemove,\n  onAdd,\n}: {\n  extraction: JSONExtraction[\"extractions\"][number];\n  idx: number;\n  isLast: boolean;\n  option: JSONExtractionMeta[\"fields\"][number];\n  form: UseFormReturn<any>;\n  basePath: string;\n  onUpdate: (idx: number, ext: JSONExtraction[\"extractions\"][number]) => void;\n  onRemove: (idx: number) => void;\n  onAdd: () => void;\n}) {\n  const [showPreview, setShowPreview] = useState(false);\n  const extractionPath = `${basePath}.extractions.${idx}`;\n  const pathError = useFieldError(form, `${extractionPath}.path`);\n  const nameError = useFieldError(form, `${extractionPath}.output_field.name`);\n\n  const availableFormats = useMemo(\n    () => TYPES_TO_FORMATS[extraction.output_field.type as keyof typeof TYPES_TO_FORMATS] ?? [],\n    [extraction.output_field.type],\n  );\n\n  const updatePath = (value: string) => {\n    onUpdate(idx, { ...extraction, path: value });\n  };\n\n  const updateOutputField = (\n    property: \"type\" | \"format\" | \"name\" | \"label\" | \"description\",\n    value: string | null,\n  ) => {\n    if (value === null) return;\n\n    const newOutputField = { ...extraction.output_field, [property]: value };\n    if (property === \"type\") {\n      const newFormats = TYPES_TO_FORMATS[value as keyof typeof TYPES_TO_FORMATS] ?? [];\n      if (newFormats.length === 0 || !newFormats.includes(newOutputField.format as never)) {\n        newOutputField.format = null;\n      }\n    }\n    onUpdate(idx, { ...extraction, output_field: newOutputField });\n  };\n\n  return (\n    <div>\n      <div className=\"pz:flex pz:flex-col pz:gap-2 pz:border-t pz:border-b pz:border-input pz:p-3\">\n        <div className=\"pz:flex pz:items-center pz:justify-between\">\n          <div className=\"pz:h-7 pz:px-2 pz:font-semibold pz:select-none pz:text-xs pz:rounded-sm pz:bg-accent pz:border pz:border-input pz:text-muted-foreground pz:grid pz:place-content-center\">\n            {idx + 1}. Extraction\n          </div>\n\n          <Button\n            variant=\"destructive\"\n            size=\"icon\"\n            className=\"pz:[&_svg]:size-3 pz:size-7 pz:rounded-sm\"\n            onClick={() => onRemove(idx)}\n            title=\"Remove condition\"\n          >\n            <IconTrash />\n          </Button>\n        </div>\n\n        <div className=\"pz:flex pz:flex-col pz:gap-2\">\n          {option.exampleValue && showPreview && (\n            <ExtractionPreview exampleValue={option.exampleValue} extraction={extraction} />\n          )}\n\n          <div className=\"pz:flex pz:flex-col pz:gap-1\">\n            <div className=\"pz:flex pz:items-center pz:justify-between\">\n              <Label className=\"pz:text-xs pz:text-muted-foreground pz:inline-flex pz:items-center pz:gap-1\">\n                Path <HoverInfo>Use JSONata</HoverInfo>\n              </Label>\n              {option.exampleValue ? (\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  onClick={() => setShowPreview(!showPreview)}\n                >\n                  {showPreview ? \"Hide preview\" : \"Show preview\"}\n                </Button>\n              ) : (\n                <span className=\"pz:text-xs pz:text-muted-foreground\">No preview available</span>\n              )}\n            </div>\n            <Input\n              value={extraction.path}\n              onChange={(e) => updatePath(e.target.value)}\n              placeholder=\"ex. emails[0].value\"\n              aria-invalid={!!pathError}\n            />\n            {pathError && (\n              <span className=\"pz:text-destructive pz:text-xs pz:font-medium\" role=\"alert\">\n                {pathError}\n              </span>\n            )}\n          </div>\n\n          <div className=\"pz:flex pz:items-end pz:gap-2\">\n            <div className=\"pz:flex pz:flex-col pz:gap-1 pz:flex-1\">\n              <Label className=\"pz:text-xs pz:text-muted-foreground\">Output Type</Label>\n              <Select\n                value={extraction.output_field.type}\n                onValueChange={(v) => updateOutputField(\"type\", v as string)}\n              >\n                <SelectTrigger>\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  {RECORD_FIELD_TYPES.map((type) => (\n                    <SelectItem key={type} value={type}>\n                      {type}\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            </div>\n            {availableFormats.length > 0 && (\n              <div className=\"pz:flex pz:flex-col pz:gap-1 pz:flex-1\">\n                <Label className=\"pz:text-xs pz:text-muted-foreground\">Format</Label>\n                <Select\n                  value={extraction.output_field.format || \"\"}\n                  onValueChange={(v) => updateOutputField(\"format\", v)}\n                >\n                  <SelectTrigger>\n                    <SelectValue placeholder=\"Select format\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    {availableFormats.map((format) => (\n                      <SelectItem key={format} value={format}>\n                        {format}\n                      </SelectItem>\n                    ))}\n                  </SelectContent>\n                </Select>\n              </div>\n            )}\n          </div>\n\n          <Collapsible.Root>\n            <Collapsible.Trigger\n              render={<ToggleAdvancedButton>Open advanced</ToggleAdvancedButton>}\n            />\n            <Collapsible.Panel className=\"pz:flex pz:flex-col pz:gap-2 pz:pt-2\">\n              <div className=\"pz:flex pz:flex-col pz:gap-1\">\n                <Label className=\"pz:text-xs pz:text-muted-foreground\">Outpue field name</Label>\n                <Input\n                  value={extraction.output_field.name}\n                  onChange={(e) => updateOutputField(\"name\", e.target.value)}\n                  aria-invalid={!!nameError}\n                />\n                {nameError && (\n                  <span className=\"pz:text-destructive pz:text-xs pz:font-medium\" role=\"alert\">\n                    {nameError}\n                  </span>\n                )}\n              </div>\n              <div className=\"pz:flex pz:flex-col pz:gap-1\">\n                <Label className=\"pz:text-xs pz:text-muted-foreground\">Output field label</Label>\n                <Input\n                  value={extraction.output_field.label}\n                  onChange={(e) => updateOutputField(\"label\", e.target.value)}\n                  placeholder=\"Describe your new field\"\n                />\n              </div>\n            </Collapsible.Panel>\n          </Collapsible.Root>\n        </div>\n      </div>\n      {isLast && (\n        <div>\n          <Button type=\"button\" variant=\"link\" size=\"xs\" onClick={onAdd}>\n            <IconPlus />\n            Add path\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport function JsonExtractionInputAdapter(field: FieldHandle<\"json_extraction_input\">) {\n  const meta = field.meta as JSONExtractionMeta;\n  const value = (field.value ?? {\n    field_name: \"\",\n    extractions: [],\n  }) as JSONExtraction;\n\n  const addExtraction = (fieldName?: string) => {\n    const inputFieldName = fieldName || value.field_name;\n    const isInitial = value.extractions.length === 0;\n    const newValue: JSONExtraction = {\n      field_name: inputFieldName,\n      extractions: [\n        ...value.extractions,\n        {\n          path: \"\",\n          output_field: {\n            name: `extract_${inputFieldName}_${generateRandomString(4)}`,\n            format: null,\n            label: \"Extract JSON\",\n            type: \"string\",\n          },\n        },\n      ],\n    };\n    if (isInitial) {\n      // First selection just scaffolds an empty extraction skeleton — the\n      // user hasn't entered real data yet, so don't mark the field as\n      // dirty/touched or trigger validation. RHF's own flags are the\n      // idiomatic way to express this.\n      field.form.setValue(field.path as any, newValue, {\n        shouldDirty: false,\n        shouldTouch: false,\n        shouldValidate: false,\n      });\n    } else {\n      field.setValue(newValue);\n    }\n  };\n\n  const removeAllExtractions = () => {\n    // resetField is the idiomatic RHF way to return a field to a pristine\n    // baseline: clears value, dirty, touched, and errors in one call.\n    field.form.resetField(field.path as any, {\n      defaultValue: { field_name: \"\", extractions: [] },\n    });\n  };\n\n  const updateExtraction = (idx: number, ext: JSONExtraction[\"extractions\"][number]) => {\n    const newExtractions = [...value.extractions];\n    newExtractions[idx] = ext;\n    field.setValue({ ...value, extractions: newExtractions });\n  };\n\n  const removeExtraction = (idx: number) => {\n    const newExtractions = [...value.extractions];\n    newExtractions.splice(idx, 1);\n    if (newExtractions.length === 0) {\n      field.setValue({ field_name: \"\", extractions: [] });\n    } else {\n      field.setValue({ ...value, extractions: newExtractions });\n    }\n  };\n\n  const option = useMemo(\n    () => meta.fields.find((e) => e.fieldName === value.field_name),\n    [value.field_name, meta.fields],\n  );\n\n  return (\n    <div data-p0=\"input\" className=\"pz:flex pz:flex-col pz:gap-3\">\n      {value.field_name && value.extractions.length > 0 && option ? (\n        <div className=\"pz:flex pz:flex-col pz:gap-2\">\n          <div className=\"pz:flex pz:items-center pz:justify-between\">\n            <Badge\n              variant=\"secondary\"\n              className=\"pz:h-7 pz:bg-accent pz:border-input pz:border pz:text-accent-foreground pz:font-normal\"\n            >\n              Field: <b>{option.fieldLabel || option.fieldName}</b>\n            </Badge>\n            <Button\n              type=\"button\"\n              variant=\"destructive\"\n              size=\"xs\"\n              className=\"pz:font-normal pz:h-7\"\n              onClick={removeAllExtractions}\n            >\n              Reset <IconTrash />\n            </Button>\n          </div>\n          {value.extractions.map((extraction, idx) => (\n            <ExtractionCard\n              // biome-ignore lint/suspicious/noArrayIndexKey: index is stable\n              key={idx}\n              extraction={extraction}\n              idx={idx}\n              isLast={idx === value.extractions.length - 1}\n              option={option}\n              form={field.form}\n              basePath={field.path}\n              onUpdate={updateExtraction}\n              onRemove={removeExtraction}\n              onAdd={() => addExtraction()}\n            />\n          ))}\n        </div>\n      ) : meta.fields.length > 0 ? (\n        <div className=\"pz:flex pz:flex-col pz:gap-2 pz:rounded-md pz:border-input\">\n          <Select\n            value=\"\"\n            onValueChange={(v) => {\n              if (v) addExtraction(v);\n            }}\n          >\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select field\" />\n            </SelectTrigger>\n            <SelectContent>\n              {meta.fields.map((f) => (\n                <SelectItem key={f.fieldName} value={f.fieldName}>\n                  {f.fieldLabel} - {f.fieldName}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n      ) : (\n        <div className=\"pz:flex pz:items-center pz:gap-1.5 pz:rounded-md pz:px-1\">\n          <div className=\"pz:text-xs pz:font-normal\">No JSON field available</div>\n          <HoverInfo>\n            A JSON field is required for this pipe. Add a json field to your pipeline.\n          </HoverInfo>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/defaults/adapters/json-schema-input.mjs

@@ -0,0 +1,30 @@
+import { cn } from "../../../lib/utils.mjs";
+import { SchemaEditor } from "../../internal/schema-editor/SchemaEditor.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/defaults/adapters/json-schema-input.tsx
+/**
+* Visual JSON Schema editor with type tags, nested property management,
+* add/edit/delete properties, and required field toggling.
+*
+* For further customization, provide a custom adapter via FormProvider.
+*/
+function JsonSchemaInputAdapter(field) {
+	const hasError = !!field.error;
+	return /* @__PURE__ */ jsx("div", {
+		"data-p0": "input",
+		"aria-invalid": hasError || void 0,
+		className: cn(hasError && "pz:rounded-md pz:border pz:border-destructive/60 pz:p-1"),
+		children: /* @__PURE__ */ jsx(SchemaEditor, {
+			value: field.value ?? {
+				type: "object",
+				properties: {}
+			},
+			onChange: field.setValue
+		})
+	});
+}
+
+//#endregion
+export { JsonSchemaInputAdapter };
+//# sourceMappingURL=json-schema-input.mjs.map

package/dist/components/defaults/adapters/json-schema-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-input.mjs","names":[],"sources":["../../../../src/components/defaults/adapters/json-schema-input.tsx"],"sourcesContent":["import { cn } from \"../../../lib/utils.js\";\nimport type { FieldHandle } from \"../../../types/field-handle.js\";\nimport { SchemaEditor } from \"../../internal/schema-editor/SchemaEditor.js\";\n\n/**\n * Visual JSON Schema editor with type tags, nested property management,\n * add/edit/delete properties, and required field toggling.\n *\n * For further customization, provide a custom adapter via FormProvider.\n */\nexport function JsonSchemaInputAdapter(field: FieldHandle<\"json_schema_input\">) {\n  const hasError = !!field.error;\n  return (\n    <div\n      data-p0=\"input\"\n      aria-invalid={hasError || undefined}\n      className={cn(hasError && \"pz:rounded-md pz:border pz:border-destructive/60 pz:p-1\")}\n    >\n      <SchemaEditor\n        value={field.value ?? { type: \"object\", properties: {} }}\n        onChange={field.setValue}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAUA,SAAgB,uBAAuB,OAAyC;CAC9E,MAAM,WAAW,CAAC,CAAC,MAAM;AACzB,QACE,oBAAC,OAAD;EACE,WAAQ;EACR,gBAAc,YAAY;EAC1B,WAAW,GAAG,YAAY,0DAA0D;YAEpF,oBAAC,cAAD;GACE,OAAO,MAAM,SAAS;IAAE,MAAM;IAAU,YAAY,EAAE;IAAE;GACxD,UAAU,MAAM;GAChB;EACE"}

package/dist/components/defaults/adapters/key-value-list-input.mjs

@@ -0,0 +1,100 @@
+import { Button } from "../../ui/button.mjs";
+import { FieldLegend } from "../../internal/field-legend.mjs";
+import { LiquidEditor } from "../../internal/LiquidEditor/LiquidEditor.mjs";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Plus, X } from "lucide-react";
+
+//#region src/components/defaults/adapters/key-value-list-input.tsx
+/**
+* Adapter for `pipesKeyValueListInput`. Each row's key and value cells use
+* `LiquidEditor` so they support `/` references (input fields + secrets +
+* constants in one picker). The kvl is used for things like HTTP headers
+* and query params where either column may legitimately reference a field
+* (e.g. a per-record `pageToken`) or a secret (e.g. an Authorization
+* value).
+*
+* The unified legend would otherwise render twice per row (once per
+* cell) — too noisy. The per-cell editors run with `hideLegend`; a
+* single legend renders once below the entire list.
+*/
+function KeyValueListInputAdapter(field) {
+	const { rows, addRow, removeRow, setKey, setValue, searchSecrets, meta } = field;
+	const maxItems = meta.maxItems ?? 50;
+	const canAdd = rows.length < maxItems;
+	const [ids, setIds] = useState(() => rows.map(() => crypto.randomUUID()));
+	if (ids.length < rows.length) setIds((prev) => [...prev, ...Array.from({ length: rows.length - prev.length }, () => crypto.randomUUID())]);
+	const handleAdd = () => {
+		setIds((prev) => [...prev, crypto.randomUUID()]);
+		addRow();
+	};
+	const handleRemove = (index) => {
+		setIds((prev) => prev.filter((_, i) => i !== index));
+		removeRow(index);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-p0": "input",
+		className: "pz:flex pz:flex-col pz:gap-2",
+		children: [
+			rows.length === 0 && /* @__PURE__ */ jsx("p", {
+				className: "pz:text-xs pz:text-muted-foreground",
+				children: meta.keyLabel ? `No ${meta.keyLabel.toLowerCase()}s yet.` : "No entries yet."
+			}),
+			rows.map((row, index) => /* @__PURE__ */ jsxs("div", {
+				className: "pz:flex pz:items-start pz:gap-2",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "pz:basis-1/3 pz:rounded-md pz:border pz:border-input pz:bg-transparent",
+						children: /* @__PURE__ */ jsx(LiquidEditor, {
+							value: row.key,
+							onChange: (v) => setKey(index, v),
+							inputFields: meta.inputFields ?? [],
+							searchSecrets,
+							placeholder: meta.keyPlaceholder ?? meta.keyLabel ?? "Key",
+							hideLegend: true
+						})
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "pz:flex-1 pz:rounded-md pz:border pz:border-input pz:bg-transparent",
+						children: /* @__PURE__ */ jsx(LiquidEditor, {
+							value: row.value,
+							onChange: (v) => setValue(index, v),
+							inputFields: meta.inputFields ?? [],
+							searchSecrets,
+							placeholder: meta.valuePlaceholder ?? meta.valueLabel ?? "Value",
+							hideLegend: true
+						})
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon",
+						"aria-label": "Remove row",
+						onClick: () => handleRemove(index),
+						children: /* @__PURE__ */ jsx(X, { className: "pz:size-4" })
+					})
+				]
+			}, ids[index])),
+			rows.length > 0 && /* @__PURE__ */ jsx(FieldLegend, { entries: [{
+				key: "/",
+				label: "to insert a reference"
+			}] }),
+			/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: "outline",
+				size: "sm",
+				onClick: handleAdd,
+				disabled: !canAdd,
+				children: [
+					/* @__PURE__ */ jsx(Plus, { className: "pz:size-4 pz:mr-1" }),
+					"Add ",
+					meta.keyLabel ?? "row"
+				]
+			}) })
+		]
+	});
+}
+
+//#endregion
+export { KeyValueListInputAdapter };
+//# sourceMappingURL=key-value-list-input.mjs.map

package/dist/components/defaults/adapters/key-value-list-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"key-value-list-input.mjs","names":[],"sources":["../../../../src/components/defaults/adapters/key-value-list-input.tsx"],"sourcesContent":["import { Plus, X } from \"lucide-react\";\nimport { useState } from \"react\";\nimport type { FieldHandle } from \"../../../types/field-handle.js\";\nimport { FieldLegend } from \"../../internal/field-legend.js\";\nimport { LiquidEditor } from \"../../internal/LiquidEditor/LiquidEditor.js\";\nimport { Button } from \"../../ui/button.js\";\n\n/**\n * Adapter for `pipesKeyValueListInput`. Each row's key and value cells use\n * `LiquidEditor` so they support `/` references (input fields + secrets +\n * constants in one picker). The kvl is used for things like HTTP headers\n * and query params where either column may legitimately reference a field\n * (e.g. a per-record `pageToken`) or a secret (e.g. an Authorization\n * value).\n *\n * The unified legend would otherwise render twice per row (once per\n * cell) — too noisy. The per-cell editors run with `hideLegend`; a\n * single legend renders once below the entire list.\n */\nexport function KeyValueListInputAdapter(field: FieldHandle<\"key_value_list_input\">) {\n  const { rows, addRow, removeRow, setKey, setValue, searchSecrets, meta } = field;\n  const maxItems = meta.maxItems ?? 50;\n  const canAdd = rows.length < maxItems;\n\n  // Stable per-row identifiers, kept in lockstep with `rows`. The form value\n  // is positional — `[{key, value}, ...]` — so reordering or removing the\n  // row at index N would alias N's editor onto another row's content if we\n  // keyed by index. We mirror mutations through `handleAdd`/`handleRemove`,\n  // and lazily pad if `rows` was extended externally (e.g. form reset).\n  const [ids, setIds] = useState<string[]>(() => rows.map(() => crypto.randomUUID()));\n  if (ids.length < rows.length) {\n    setIds((prev) => [\n      ...prev,\n      ...Array.from({ length: rows.length - prev.length }, () => crypto.randomUUID()),\n    ]);\n  }\n\n  const handleAdd = () => {\n    setIds((prev) => [...prev, crypto.randomUUID()]);\n    addRow();\n  };\n  const handleRemove = (index: number) => {\n    setIds((prev) => prev.filter((_, i) => i !== index));\n    removeRow(index);\n  };\n\n  return (\n    <div data-p0=\"input\" className=\"pz:flex pz:flex-col pz:gap-2\">\n      {rows.length === 0 && (\n        <p className=\"pz:text-xs pz:text-muted-foreground\">\n          {meta.keyLabel ? `No ${meta.keyLabel.toLowerCase()}s yet.` : \"No entries yet.\"}\n        </p>\n      )}\n      {rows.map((row, index) => (\n        <div key={ids[index]} className=\"pz:flex pz:items-start pz:gap-2\">\n          <div className=\"pz:basis-1/3 pz:rounded-md pz:border pz:border-input pz:bg-transparent\">\n            <LiquidEditor\n              value={row.key}\n              onChange={(v) => setKey(index, v)}\n              inputFields={meta.inputFields ?? []}\n              searchSecrets={searchSecrets}\n              placeholder={meta.keyPlaceholder ?? meta.keyLabel ?? \"Key\"}\n              hideLegend\n            />\n          </div>\n          <div className=\"pz:flex-1 pz:rounded-md pz:border pz:border-input pz:bg-transparent\">\n            <LiquidEditor\n              value={row.value}\n              onChange={(v) => setValue(index, v)}\n              inputFields={meta.inputFields ?? []}\n              searchSecrets={searchSecrets}\n              placeholder={meta.valuePlaceholder ?? meta.valueLabel ?? \"Value\"}\n              hideLegend\n            />\n          </div>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon\"\n            aria-label=\"Remove row\"\n            onClick={() => handleRemove(index)}\n          >\n            <X className=\"pz:size-4\" />\n          </Button>\n        </div>\n      ))}\n      {rows.length > 0 && <FieldLegend entries={[{ key: \"/\", label: \"to insert a reference\" }]} />}\n      <div>\n        <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={handleAdd} disabled={!canAdd}>\n          <Plus className=\"pz:size-4 pz:mr-1\" />\n          Add {meta.keyLabel ?? \"row\"}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,yBAAyB,OAA4C;CACnF,MAAM,EAAE,MAAM,QAAQ,WAAW,QAAQ,UAAU,eAAe,SAAS;CAC3E,MAAM,WAAW,KAAK,YAAY;CAClC,MAAM,SAAS,KAAK,SAAS;CAO7B,MAAM,CAAC,KAAK,UAAU,eAAyB,KAAK,UAAU,OAAO,YAAY,CAAC,CAAC;AACnF,KAAI,IAAI,SAAS,KAAK,OACpB,SAAQ,SAAS,CACf,GAAG,MACH,GAAG,MAAM,KAAK,EAAE,QAAQ,KAAK,SAAS,KAAK,QAAQ,QAAQ,OAAO,YAAY,CAAC,CAChF,CAAC;CAGJ,MAAM,kBAAkB;AACtB,UAAQ,SAAS,CAAC,GAAG,MAAM,OAAO,YAAY,CAAC,CAAC;AAChD,UAAQ;;CAEV,MAAM,gBAAgB,UAAkB;AACtC,UAAQ,SAAS,KAAK,QAAQ,GAAG,MAAM,MAAM,MAAM,CAAC;AACpD,YAAU,MAAM;;AAGlB,QACE,qBAAC,OAAD;EAAK,WAAQ;EAAQ,WAAU;YAA/B;GACG,KAAK,WAAW,KACf,oBAAC,KAAD;IAAG,WAAU;cACV,KAAK,WAAW,MAAM,KAAK,SAAS,aAAa,CAAC,UAAU;IAC3D;GAEL,KAAK,KAAK,KAAK,UACd,qBAAC,OAAD;IAAsB,WAAU;cAAhC;KACE,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,cAAD;OACE,OAAO,IAAI;OACX,WAAW,MAAM,OAAO,OAAO,EAAE;OACjC,aAAa,KAAK,eAAe,EAAE;OACpB;OACf,aAAa,KAAK,kBAAkB,KAAK,YAAY;OACrD;OACA;MACE;KACN,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,cAAD;OACE,OAAO,IAAI;OACX,WAAW,MAAM,SAAS,OAAO,EAAE;OACnC,aAAa,KAAK,eAAe,EAAE;OACpB;OACf,aAAa,KAAK,oBAAoB,KAAK,cAAc;OACzD;OACA;MACE;KACN,oBAAC,QAAD;MACE,MAAK;MACL,SAAQ;MACR,MAAK;MACL,cAAW;MACX,eAAe,aAAa,MAAM;gBAElC,oBAAC,GAAD,EAAG,WAAU,aAAc;MACpB;KACL;MA9BI,IAAI,OA8BR,CACN;GACD,KAAK,SAAS,KAAK,oBAAC,aAAD,EAAa,SAAS,CAAC;IAAE,KAAK;IAAK,OAAO;IAAyB,CAAC,EAAI;GAC5F,oBAAC,OAAD,YACE,qBAAC,QAAD;IAAQ,MAAK;IAAS,SAAQ;IAAU,MAAK;IAAK,SAAS;IAAW,UAAU,CAAC;cAAjF;KACE,oBAAC,MAAD,EAAM,WAAU,qBAAsB;;KACjC,KAAK,YAAY;KACf;OACL;GACF"}

package/dist/components/defaults/adapters/min-max-int-input.mjs

@@ -0,0 +1,65 @@
+import { Input } from "../../ui/input.mjs";
+import { useFieldError } from "../../../hooks/use-field-error.mjs";
+import { Label } from "../../ui/label.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/defaults/adapters/min-max-int-input.tsx
+function MinMaxIntInputAdapter(field) {
+	const minError = useFieldError(field.form, `${field.path}.min`);
+	const maxError = useFieldError(field.form, `${field.path}.max`);
+	const fromPathError = useFieldError(field.form, `${field.path}.from`);
+	const toPathError = useFieldError(field.form, `${field.path}.to`);
+	const fromError = minError ?? fromPathError;
+	const toError = maxError ?? toPathError;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-p0": "input",
+		className: "pz:flex pz:flex-col pz:gap-1",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "pz:flex pz:items-end pz:gap-2",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "pz:flex pz:flex-col pz:gap-1 pz:flex-1",
+					children: [/* @__PURE__ */ jsx(Label, {
+						className: "pz:text-xs pz:text-muted-foreground",
+						children: "Min"
+					}), /* @__PURE__ */ jsx(Input, {
+						type: "number",
+						value: field.from.value ?? "",
+						onChange: (e) => field.from.set(e.target.value === "" ? null : Number(e.target.value)),
+						min: field.meta.min,
+						max: field.meta.max,
+						step: 1,
+						"aria-invalid": !!fromError || !!field.error
+					})]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "pz:pb-2 pz:text-muted-foreground",
+					children: "–"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "pz:flex pz:flex-col pz:gap-1 pz:flex-1",
+					children: [/* @__PURE__ */ jsx(Label, {
+						className: "pz:text-xs pz:text-muted-foreground",
+						children: "Max"
+					}), /* @__PURE__ */ jsx(Input, {
+						type: "number",
+						value: field.to.value ?? "",
+						onChange: (e) => field.to.set(e.target.value === "" ? null : Number(e.target.value)),
+						min: field.meta.min,
+						max: field.meta.max,
+						step: 1,
+						"aria-invalid": !!toError || !!field.error
+					})]
+				})
+			]
+		}), (fromError || toError) && /* @__PURE__ */ jsx("span", {
+			className: "pz:text-destructive pz:text-xs pz:font-medium",
+			role: "alert",
+			children: fromError ?? toError
+		})]
+	});
+}
+
+//#endregion
+export { MinMaxIntInputAdapter };
+//# sourceMappingURL=min-max-int-input.mjs.map

package/dist/components/defaults/adapters/min-max-int-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"min-max-int-input.mjs","names":[],"sources":["../../../../src/components/defaults/adapters/min-max-int-input.tsx"],"sourcesContent":["import { useFieldError } from \"../../../hooks/use-field-error.js\";\nimport type { FieldHandle } from \"../../../types/field-handle.js\";\nimport { Input } from \"../../ui/input.js\";\nimport { Label } from \"../../ui/label.js\";\n\nexport function MinMaxIntInputAdapter(field: FieldHandle<\"min_max_int_input\">) {\n  const minError = useFieldError(field.form, `${field.path}.min`);\n  const maxError = useFieldError(field.form, `${field.path}.max`);\n  const fromPathError = useFieldError(field.form, `${field.path}.from`);\n  const toPathError = useFieldError(field.form, `${field.path}.to`);\n  const fromError = minError ?? fromPathError;\n  const toError = maxError ?? toPathError;\n\n  return (\n    <div data-p0=\"input\" className=\"pz:flex pz:flex-col pz:gap-1\">\n      <div className=\"pz:flex pz:items-end pz:gap-2\">\n        <div className=\"pz:flex pz:flex-col pz:gap-1 pz:flex-1\">\n          <Label className=\"pz:text-xs pz:text-muted-foreground\">Min</Label>\n          <Input\n            type=\"number\"\n            value={field.from.value ?? \"\"}\n            onChange={(e) => field.from.set(e.target.value === \"\" ? null : Number(e.target.value))}\n            min={field.meta.min}\n            max={field.meta.max}\n            step={1}\n            aria-invalid={!!fromError || !!field.error}\n          />\n        </div>\n        <span className=\"pz:pb-2 pz:text-muted-foreground\">–</span>\n        <div className=\"pz:flex pz:flex-col pz:gap-1 pz:flex-1\">\n          <Label className=\"pz:text-xs pz:text-muted-foreground\">Max</Label>\n          <Input\n            type=\"number\"\n            value={field.to.value ?? \"\"}\n            onChange={(e) => field.to.set(e.target.value === \"\" ? null : Number(e.target.value))}\n            min={field.meta.min}\n            max={field.meta.max}\n            step={1}\n            aria-invalid={!!toError || !!field.error}\n          />\n        </div>\n      </div>\n      {(fromError || toError) && (\n        <span className=\"pz:text-destructive pz:text-xs pz:font-medium\" role=\"alert\">\n          {fromError ?? toError}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAKA,SAAgB,sBAAsB,OAAyC;CAC7E,MAAM,WAAW,cAAc,MAAM,MAAM,GAAG,MAAM,KAAK,MAAM;CAC/D,MAAM,WAAW,cAAc,MAAM,MAAM,GAAG,MAAM,KAAK,MAAM;CAC/D,MAAM,gBAAgB,cAAc,MAAM,MAAM,GAAG,MAAM,KAAK,OAAO;CACrE,MAAM,cAAc,cAAc,MAAM,MAAM,GAAG,MAAM,KAAK,KAAK;CACjE,MAAM,YAAY,YAAY;CAC9B,MAAM,UAAU,YAAY;AAE5B,QACE,qBAAC,OAAD;EAAK,WAAQ;EAAQ,WAAU;YAA/B,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MAAO,WAAU;gBAAsC;MAAW,GAClE,oBAAC,OAAD;MACE,MAAK;MACL,OAAO,MAAM,KAAK,SAAS;MAC3B,WAAW,MAAM,MAAM,KAAK,IAAI,EAAE,OAAO,UAAU,KAAK,OAAO,OAAO,EAAE,OAAO,MAAM,CAAC;MACtF,KAAK,MAAM,KAAK;MAChB,KAAK,MAAM,KAAK;MAChB,MAAM;MACN,gBAAc,CAAC,CAAC,aAAa,CAAC,CAAC,MAAM;MACrC,EACE;;IACN,oBAAC,QAAD;KAAM,WAAU;eAAmC;KAAQ;IAC3D,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MAAO,WAAU;gBAAsC;MAAW,GAClE,oBAAC,OAAD;MACE,MAAK;MACL,OAAO,MAAM,GAAG,SAAS;MACzB,WAAW,MAAM,MAAM,GAAG,IAAI,EAAE,OAAO,UAAU,KAAK,OAAO,OAAO,EAAE,OAAO,MAAM,CAAC;MACpF,KAAK,MAAM,KAAK;MAChB,KAAK,MAAM,KAAK;MAChB,MAAM;MACN,gBAAc,CAAC,CAAC,WAAW,CAAC,CAAC,MAAM;MACnC,EACE;;IACF;OACJ,aAAa,YACb,oBAAC,QAAD;GAAM,WAAU;GAAgD,MAAK;aAClE,aAAa;GACT,EAEL"}

package/dist/components/defaults/adapters/multi-create-input.mjs

@@ -0,0 +1,32 @@
+import { useFieldError } from "../../../hooks/use-field-error.mjs";
+import { SuggestCombobox } from "../../internal/combobox/suggest-combobox.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/defaults/adapters/multi-create-input.tsx
+function diffReplay(prev, next, add, remove) {
+	const prevSet = new Set(prev);
+	const nextSet = new Set(next);
+	for (const v of next) if (!prevSet.has(v)) add(v);
+	for (const v of prev) if (!nextSet.has(v)) remove(v);
+}
+function MultiCreateInputAdapter(field) {
+	const itemsError = useFieldError(field.form, field.path);
+	return /* @__PURE__ */ jsx("div", {
+		"data-p0": "input",
+		className: "pz:flex pz:flex-col pz:gap-1",
+		children: /* @__PURE__ */ jsx(SuggestCombobox, {
+			value: field.items,
+			onChange: (next) => diffReplay(field.items, next, field.add, field.remove),
+			options: field.options,
+			loadOptions: field.loadOptions,
+			allowCreate: true,
+			maxItems: field.meta.maxItems,
+			placeholder: field.meta.placeholder,
+			ariaInvalid: !!itemsError || !!field.error
+		})
+	});
+}
+
+//#endregion
+export { MultiCreateInputAdapter };
+//# sourceMappingURL=multi-create-input.mjs.map

package/dist/components/defaults/adapters/multi-create-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-create-input.mjs","names":[],"sources":["../../../../src/components/defaults/adapters/multi-create-input.tsx"],"sourcesContent":["import { useFieldError } from \"../../../hooks/use-field-error.js\";\nimport type { FieldHandle } from \"../../../types/field-handle.js\";\nimport { SuggestCombobox } from \"../../internal/combobox/suggest-combobox.js\";\n\nfunction diffReplay(\n  prev: string[],\n  next: string[],\n  add: (v: string) => void,\n  remove: (v: string) => void,\n) {\n  const prevSet = new Set(prev);\n  const nextSet = new Set(next);\n  for (const v of next) if (!prevSet.has(v)) add(v);\n  for (const v of prev) if (!nextSet.has(v)) remove(v);\n}\n\nexport function MultiCreateInputAdapter(field: FieldHandle<\"multi_create_input\">) {\n  const itemsError = useFieldError(field.form, field.path);\n\n  return (\n    <div data-p0=\"input\" className=\"pz:flex pz:flex-col pz:gap-1\">\n      <SuggestCombobox\n        value={field.items}\n        onChange={(next) => diffReplay(field.items, next, field.add, field.remove)}\n        options={field.options}\n        loadOptions={field.loadOptions}\n        allowCreate\n        maxItems={field.meta.maxItems}\n        placeholder={field.meta.placeholder}\n        ariaInvalid={!!itemsError || !!field.error}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;AAIA,SAAS,WACP,MACA,MACA,KACA,QACA;CACA,MAAM,UAAU,IAAI,IAAI,KAAK;CAC7B,MAAM,UAAU,IAAI,IAAI,KAAK;AAC7B,MAAK,MAAM,KAAK,KAAM,KAAI,CAAC,QAAQ,IAAI,EAAE,CAAE,KAAI,EAAE;AACjD,MAAK,MAAM,KAAK,KAAM,KAAI,CAAC,QAAQ,IAAI,EAAE,CAAE,QAAO,EAAE;;AAGtD,SAAgB,wBAAwB,OAA0C;CAChF,MAAM,aAAa,cAAc,MAAM,MAAM,MAAM,KAAK;AAExD,QACE,oBAAC,OAAD;EAAK,WAAQ;EAAQ,WAAU;YAC7B,oBAAC,iBAAD;GACE,OAAO,MAAM;GACb,WAAW,SAAS,WAAW,MAAM,OAAO,MAAM,MAAM,KAAK,MAAM,OAAO;GAC1E,SAAS,MAAM;GACf,aAAa,MAAM;GACnB;GACA,UAAU,MAAM,KAAK;GACrB,aAAa,MAAM,KAAK;GACxB,aAAa,CAAC,CAAC,cAAc,CAAC,CAAC,MAAM;GACrC;EACE"}