@lattice-php/lattice 0.1.0 → 0.3.0

package/dist/form/components/fields/date-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/date-input.tsx"],"sourcesContent":["import { getBooleanProp, getOptionalNumberProp, getStringProp } from \"@lattice/lattice/core/props\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { Input } from \"../base/input\";\nimport { useControlledField } from \"../use-controlled-field\";\n\ndeclare module \"@lattice/lattice/core/types\" {\n  interface ComponentProps {\n    \"form.date-input\": {\n      autoFocus?: boolean;\n      conditions?: unknown;\n      disabled?: boolean;\n      hidden?: boolean;\n      label?: string;\n      max?: string;\n      min?: string;\n      name?: string;\n      readonly?: boolean;\n      required?: boolean;\n      tabIndex?: number;\n      value?: string;\n    };\n  }\n}\n\nexport const DateInputComponent: RendererComponent<\"form.date-input\"> = ({ node }) => {\n  const { name, value, error, hidden, required, readonly, disabled, commit } =\n    useControlledField(node);\n\n  if (hidden) {\n    return null;\n  }\n\n  return (\n    <FormFieldFrame\n      error={error}\n      label={getStringProp(node.props, \"label\")}\n      name={name}\n      required={required}\n    >\n      <Input\n        autoFocus={getBooleanProp(node.props, \"autoFocus\")}\n        disabled={disabled}\n        id={name}\n        max={getStringProp(node.props, \"max\") || undefined}\n        min={getStringProp(node.props, \"min\") || undefined}\n        name={name}\n        onChange={(event) => commit(event.target.value)}\n        readOnly={readonly}\n        tabIndex={getOptionalNumberProp(node.props, \"tabIndex\")}\n        type=\"date\"\n        value={value}\n      />\n    </FormFieldFrame>\n  );\n};\n"],"mappings":";;;;;;AAyBA,IAAa,sBAA4D,EAAE,WAAW;CACpF,MAAM,EAAE,MAAM,OAAO,OAAO,QAAQ,UAAU,UAAU,UAAU,WAChE,mBAAmB,IAAI;CAEzB,IAAI,QACF,OAAO;CAGT,OACE,oBAAC,gBAAD;EACS;EACP,OAAO,cAAc,KAAK,OAAO,OAAO;EAClC;EACI;YAEV,oBAAC,OAAD;GACE,WAAW,eAAe,KAAK,OAAO,WAAW;GACvC;GACV,IAAI;GACJ,KAAK,cAAc,KAAK,OAAO,KAAK,KAAK,KAAA;GACzC,KAAK,cAAc,KAAK,OAAO,KAAK,KAAK,KAAA;GACnC;GACN,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;GAC9C,UAAU;GACV,UAAU,sBAAsB,KAAK,OAAO,UAAU;GACtD,MAAK;GACE;EACR,CAAA;CACa,CAAA;AAEpB"}
+{"version":3,"file":"date-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/date-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { Input } from \"../base/input\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const DateInputComponent: RendererComponent<\"field.date-input\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, commit }) => (\n        <Input\n          autoFocus={props.autoFocus ?? false}\n          data-test={testId}\n          disabled={disabled}\n          id={name}\n          max={props.max || undefined}\n          min={props.min || undefined}\n          name={name}\n          onChange={(event) => commit(event.target.value)}\n          readOnly={readOnly}\n          tabIndex={props.tabIndex ?? undefined}\n          type=\"date\"\n          value={value}\n        />\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,sBAA6D,EAAE,WAAW;CACrF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,aAC3C,oBAAC,OAAD;GACE,WAAW,MAAM,aAAa;GAC9B,aAAW;GACD;GACV,IAAI;GACJ,KAAK,MAAM,OAAO,KAAA;GAClB,KAAK,MAAM,OAAO,KAAA;GACZ;GACN,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;GACpC;GACV,UAAU,MAAM,YAAY,KAAA;GAC5B,MAAK;GACE;EACR,CAAA;CAEQ,CAAA;AAEjB"}

package/dist/form/components/fields/file-upload.d.ts

@@ -0,0 +1,2 @@
+import { RendererComponent } from '../../../core/types';
+export declare const FileUploadComponent: RendererComponent<"field.file-upload">;

package/dist/form/components/fields/file-upload.js

@@ -0,0 +1,250 @@
+import { testIdentity } from "../../../core/test-id.js";
+import { Icon } from "../../../icons/sprite.js";
+import { useT } from "../../../i18n/instance.js";
+import { apiFetch } from "../../../core/api.js";
+import { useFormContext } from "../context.js";
+import { useFieldScope } from "../field-scope.js";
+import { useFormValues } from "../values.js";
+import { FormFieldFrame } from "../base/field.js";
+import { useDependentField } from "../use-dependent-field.js";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/form/components/fields/file-upload.tsx
+var FileUploadComponent = ({ node }) => {
+	const { t } = useT("lattice");
+	const props = node.props;
+	const { hidden, required, readOnly, disabled } = useDependentField(node);
+	const { action, componentRef, errors } = useFormContext();
+	const name = props.name;
+	const scope = useFieldScope();
+	const domName = scope ? scope.scopedName(name) : name;
+	const errorKey = scope ? scope.errorKey(name) : name;
+	const uploadKey = errorKey;
+	const values = useFormValues();
+	const inputId = useId();
+	const fileInputRef = useRef(null);
+	const previewUrlsRef = useRef(/* @__PURE__ */ new Set());
+	const locked = readOnly || disabled;
+	const signed = props.signed;
+	const multiple = props.multiple;
+	const fieldName = multiple ? `${domName}[]` : domName;
+	const [items, setItems] = useState(useMemo(() => (props.files ?? []).map((file) => ({
+		id: crypto.randomUUID(),
+		name: file.name,
+		size: file.size,
+		status: "ready",
+		progress: 100,
+		key: file.key,
+		url: file.url,
+		token: file.token,
+		existing: true
+	})), [props.files]));
+	const [removedTokens, setRemovedTokens] = useState([]);
+	useEffect(() => () => {
+		previewUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));
+		previewUrlsRef.current.clear();
+	}, []);
+	const multipartFiles = items.filter((item) => item.file && !item.existing).map((item) => item.file);
+	useEffect(() => {
+		if (signed || !fileInputRef.current) return;
+		const transfer = new DataTransfer();
+		multipartFiles.forEach((file) => transfer.items.add(file));
+		fileInputRef.current.files = transfer.files;
+	});
+	function createPreviewUrl(file) {
+		if (!props.image) return;
+		const url = URL.createObjectURL(file);
+		previewUrlsRef.current.add(url);
+		return url;
+	}
+	function revokePreviewUrl(item) {
+		if (!item.url || !previewUrlsRef.current.has(item.url)) return;
+		URL.revokeObjectURL(item.url);
+		previewUrlsRef.current.delete(item.url);
+	}
+	async function signAndUpload(item, file) {
+		const response = await apiFetch(action, {
+			method: "POST",
+			ref: componentRef,
+			body: JSON.stringify({
+				...values,
+				_upload: uploadKey,
+				filename: file.name,
+				contentType: file.type
+			}),
+			throwOnError: false
+		});
+		if (!response.ok) {
+			setItems((prev) => prev.map((entry) => entry.id === item.id ? {
+				...entry,
+				status: "error"
+			} : entry));
+			return;
+		}
+		const sign = await response.json();
+		await new Promise((resolve) => {
+			const request = new XMLHttpRequest();
+			request.open(sign.method, sign.url, true);
+			Object.entries(sign.headers).forEach(([key, value]) => request.setRequestHeader(key, String(value)));
+			request.upload.onprogress = (event) => {
+				if (event.lengthComputable) {
+					const progress = Math.round(event.loaded / event.total * 100);
+					setItems((prev) => prev.map((entry) => entry.id === item.id ? {
+						...entry,
+						progress
+					} : entry));
+				}
+			};
+			request.onload = () => {
+				setItems((prev) => prev.map((entry) => entry.id === item.id ? {
+					...entry,
+					status: request.status < 300 ? "ready" : "error",
+					key: sign.key,
+					progress: 100
+				} : entry));
+				resolve();
+			};
+			request.onerror = () => {
+				setItems((prev) => prev.map((entry) => entry.id === item.id ? {
+					...entry,
+					status: "error"
+				} : entry));
+				resolve();
+			};
+			request.send(file);
+		});
+	}
+	function addFiles(fileList) {
+		if (!fileList || locked) return;
+		const incoming = Array.from(fileList);
+		const next = incoming.map((file) => ({
+			id: crypto.randomUUID(),
+			name: file.name,
+			size: file.size,
+			status: signed ? "uploading" : "ready",
+			progress: 0,
+			file,
+			url: createPreviewUrl(file),
+			existing: false
+		}));
+		if (!multiple) {
+			items.forEach(revokePreviewUrl);
+			if (!scope) {
+				const replacedTokens = items.filter((item) => item.existing && item.token).map((item) => item.token);
+				if (replacedTokens.length > 0) setRemovedTokens((tokens) => [...tokens, ...replacedTokens]);
+			}
+		}
+		setItems((prev) => multiple ? [...prev, ...next] : next);
+		if (signed) next.forEach((item, index) => void signAndUpload(item, incoming[index]));
+	}
+	function removeItem(id) {
+		const target = items.find((item) => item.id === id);
+		if (target) revokePreviewUrl(target);
+		setItems((prev) => {
+			if (target?.existing && target.token && !scope) setRemovedTokens((tokens) => [...tokens, target.token]);
+			return prev.filter((i) => i.id !== id);
+		});
+	}
+	if (hidden) return null;
+	return /* @__PURE__ */ jsx(FormFieldFrame, {
+		error: errors[errorKey],
+		helperText: props.helperText ?? void 0,
+		tooltip: props.tooltip ?? void 0,
+		label: props.label ?? "",
+		name,
+		required,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-3 rounded-lt-sm border border-dashed border-lt-border bg-lt-surface px-4 py-6",
+			"data-test": testIdentity(name),
+			onDragOver: (event) => event.preventDefault(),
+			onDrop: (event) => {
+				event.preventDefault();
+				addFiles(event.dataTransfer.files);
+			},
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					className: "text-sm text-lt-muted-fg",
+					disabled: locked,
+					onClick: () => fileInputRef.current?.click(),
+					type: "button",
+					children: t("file-upload.dropzone", "Drop files here or click to browse")
+				}),
+				/* @__PURE__ */ jsx("ul", {
+					className: props.image ? "grid grid-cols-1 gap-3 sm:grid-cols-2" : "flex flex-col gap-2",
+					children: items.map((item) => /* @__PURE__ */ jsxs("li", {
+						className: props.image ? "flex min-w-0 items-center gap-3 rounded-lt-sm border border-lt-border bg-lt-bg p-2 text-sm" : "flex items-center justify-between gap-3 text-sm",
+						children: [
+							props.image && item.url ? /* @__PURE__ */ jsx("img", {
+								alt: item.name,
+								className: "size-16 shrink-0 rounded-lt-sm border border-lt-border object-cover",
+								"data-test": testIdentity(`${name}-preview`),
+								src: item.url
+							}) : null,
+							/* @__PURE__ */ jsxs("div", {
+								className: "min-w-0 flex-1",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: "block truncate",
+										"data-test": testIdentity(`${name}-item`),
+										children: item.name
+									}),
+									item.status === "uploading" && /* @__PURE__ */ jsxs("span", {
+										className: "text-xs text-lt-muted-fg",
+										children: [item.progress, "%"]
+									}),
+									item.status === "error" && /* @__PURE__ */ jsx("span", {
+										className: "text-xs text-lt-danger",
+										children: t("file-upload.failed", "Failed")
+									})
+								]
+							}),
+							(!item.existing || !scope) && /* @__PURE__ */ jsx("button", {
+								"aria-label": t("file-upload.remove", "Remove {{name}}", { name: item.name }),
+								className: "inline-flex size-7 shrink-0 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-50",
+								"data-test": item.existing ? testIdentity(`${name}-remove-existing`) : void 0,
+								disabled: locked,
+								onClick: () => removeItem(item.id),
+								type: "button",
+								children: /* @__PURE__ */ jsx(Icon, {
+									name: "x",
+									"aria-hidden": "true",
+									className: "size-lt-icon-sm"
+								})
+							}),
+							signed && !item.existing && item.key && item.status === "ready" && /* @__PURE__ */ jsx("input", {
+								"data-test": testIdentity(`${name}-uploaded`),
+								name: fieldName,
+								type: "hidden",
+								value: item.key
+							})
+						]
+					}, item.id))
+				}),
+				!scope && removedTokens.map((token) => /* @__PURE__ */ jsx("input", {
+					name: `${name}__removed[]`,
+					type: "hidden",
+					value: token
+				}, token)),
+				/* @__PURE__ */ jsx("input", {
+					accept: props.accept ?? void 0,
+					"aria-label": props.label ?? name,
+					className: "sr-only",
+					"data-test": testIdentity(`${name}-input`),
+					id: inputId,
+					multiple,
+					name: signed ? void 0 : fieldName,
+					onChange: (event) => {
+						addFiles(event.target.files);
+						if (signed) event.target.value = "";
+					},
+					ref: fileInputRef,
+					type: "file"
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { FileUploadComponent };
+
+//# sourceMappingURL=file-upload.js.map

package/dist/form/components/fields/file-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.js","names":[],"sources":["../../../../resources/js/form/components/fields/file-upload.tsx"],"sourcesContent":["import { apiFetch } from \"@lattice-php/lattice/core/api\";\nimport { testIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useFormContext } from \"../context\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useFormValues } from \"../values\";\n\ntype Item = {\n  id: string;\n  name: string;\n  size: number | null;\n  status: \"ready\" | \"uploading\" | \"error\";\n  progress: number;\n  file?: File;\n  key?: string;\n  url?: string | null;\n  token?: string;\n  existing: boolean;\n};\n\ntype SignResponse = {\n  key: string;\n  url: string;\n  headers: Record<string, string>;\n  method: string;\n};\n\nexport const FileUploadComponent: RendererComponent<\"field.file-upload\"> = ({ node }) => {\n  const { t } = useT(\"lattice\");\n  const props = node.props;\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { action, componentRef, errors } = useFormContext();\n  const name = props.name;\n  const scope = useFieldScope();\n  const domName = scope ? scope.scopedName(name) : name;\n  const errorKey = scope ? scope.errorKey(name) : name;\n  const uploadKey = errorKey;\n  const values = useFormValues();\n  const inputId = useId();\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const previewUrlsRef = useRef<Set<string>>(new Set());\n  const locked = readOnly || disabled;\n  const signed = props.signed;\n  const multiple = props.multiple;\n  const fieldName = multiple ? `${domName}[]` : domName;\n\n  const initial = useMemo<Item[]>(\n    () =>\n      (props.files ?? []).map((file) => ({\n        id: crypto.randomUUID(),\n        name: file.name,\n        size: file.size,\n        status: \"ready\" as const,\n        progress: 100,\n        key: file.key,\n        url: file.url,\n        token: file.token,\n        existing: true,\n      })),\n    [props.files],\n  );\n  const [items, setItems] = useState<Item[]>(initial);\n  const [removedTokens, setRemovedTokens] = useState<string[]>([]);\n\n  useEffect(\n    () => () => {\n      previewUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));\n      previewUrlsRef.current.clear();\n    },\n    [],\n  );\n\n  const multipartFiles = items\n    .filter((item) => item.file && !item.existing)\n    .map((item) => item.file as File);\n  useEffect(() => {\n    if (signed || !fileInputRef.current) {\n      return;\n    }\n\n    const transfer = new DataTransfer();\n    multipartFiles.forEach((file) => transfer.items.add(file));\n    fileInputRef.current.files = transfer.files;\n  });\n\n  function createPreviewUrl(file: File): string | undefined {\n    if (!props.image) {\n      return undefined;\n    }\n\n    const url = URL.createObjectURL(file);\n    previewUrlsRef.current.add(url);\n\n    return url;\n  }\n\n  function revokePreviewUrl(item: Item): void {\n    if (!item.url || !previewUrlsRef.current.has(item.url)) {\n      return;\n    }\n\n    URL.revokeObjectURL(item.url);\n    previewUrlsRef.current.delete(item.url);\n  }\n\n  async function signAndUpload(item: Item, file: File): Promise<void> {\n    const response = await apiFetch(action, {\n      method: \"POST\",\n      ref: componentRef,\n      body: JSON.stringify({\n        ...values,\n        _upload: uploadKey,\n        filename: file.name,\n        contentType: file.type,\n      }),\n      throwOnError: false,\n    });\n\n    if (!response.ok) {\n      setItems((prev) =>\n        prev.map((entry) => (entry.id === item.id ? { ...entry, status: \"error\" } : entry)),\n      );\n\n      return;\n    }\n\n    const sign = (await response.json()) as SignResponse;\n\n    await new Promise<void>((resolve) => {\n      const request = new XMLHttpRequest();\n      request.open(sign.method, sign.url, true);\n      Object.entries(sign.headers).forEach(([key, value]) =>\n        request.setRequestHeader(key, String(value)),\n      );\n      request.upload.onprogress = (event) => {\n        if (event.lengthComputable) {\n          const progress = Math.round((event.loaded / event.total) * 100);\n          setItems((prev) =>\n            prev.map((entry) => (entry.id === item.id ? { ...entry, progress } : entry)),\n          );\n        }\n      };\n      request.onload = () => {\n        setItems((prev) =>\n          prev.map((entry) =>\n            entry.id === item.id\n              ? {\n                  ...entry,\n                  status: request.status < 300 ? \"ready\" : \"error\",\n                  key: sign.key,\n                  progress: 100,\n                }\n              : entry,\n          ),\n        );\n        resolve();\n      };\n      request.onerror = () => {\n        setItems((prev) =>\n          prev.map((entry) => (entry.id === item.id ? { ...entry, status: \"error\" } : entry)),\n        );\n        resolve();\n      };\n      request.send(file);\n    });\n  }\n\n  function addFiles(fileList: FileList | null): void {\n    if (!fileList || locked) {\n      return;\n    }\n\n    const incoming = Array.from(fileList);\n    const next = incoming.map<Item>((file) => ({\n      id: crypto.randomUUID(),\n      name: file.name,\n      size: file.size,\n      status: signed ? \"uploading\" : \"ready\",\n      progress: 0,\n      file,\n      url: createPreviewUrl(file),\n      existing: false,\n    }));\n\n    if (!multiple) {\n      items.forEach(revokePreviewUrl);\n\n      if (!scope) {\n        const replacedTokens = items\n          .filter((item) => item.existing && item.token)\n          .map((item) => item.token as string);\n\n        if (replacedTokens.length > 0) {\n          setRemovedTokens((tokens) => [...tokens, ...replacedTokens]);\n        }\n      }\n    }\n\n    setItems((prev) => (multiple ? [...prev, ...next] : next));\n\n    if (signed) {\n      next.forEach((item, index) => void signAndUpload(item, incoming[index]));\n    }\n  }\n\n  function removeItem(id: string): void {\n    const target = items.find((item) => item.id === id);\n\n    if (target) {\n      revokePreviewUrl(target);\n    }\n\n    setItems((prev) => {\n      if (target?.existing && target.token && !scope) {\n        setRemovedTokens((tokens) => [...tokens, target.token as string]);\n      }\n      return prev.filter((i) => i.id !== id);\n    });\n  }\n\n  if (hidden) {\n    return null;\n  }\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={props.helperText ?? undefined}\n      tooltip={props.tooltip ?? undefined}\n      label={props.label ?? \"\"}\n      name={name}\n      required={required}\n    >\n      <div\n        className=\"flex flex-col gap-3 rounded-lt-sm border border-dashed border-lt-border bg-lt-surface px-4 py-6\"\n        data-test={testIdentity(name)}\n        onDragOver={(event) => event.preventDefault()}\n        onDrop={(event) => {\n          event.preventDefault();\n          addFiles(event.dataTransfer.files);\n        }}\n      >\n        <button\n          className=\"text-sm text-lt-muted-fg\"\n          disabled={locked}\n          onClick={() => fileInputRef.current?.click()}\n          type=\"button\"\n        >\n          {t(\"file-upload.dropzone\", \"Drop files here or click to browse\")}\n        </button>\n\n        <ul\n          className={props.image ? \"grid grid-cols-1 gap-3 sm:grid-cols-2\" : \"flex flex-col gap-2\"}\n        >\n          {items.map((item) => (\n            <li\n              className={\n                props.image\n                  ? \"flex min-w-0 items-center gap-3 rounded-lt-sm border border-lt-border bg-lt-bg p-2 text-sm\"\n                  : \"flex items-center justify-between gap-3 text-sm\"\n              }\n              key={item.id}\n            >\n              {props.image && item.url ? (\n                <img\n                  alt={item.name}\n                  className=\"size-16 shrink-0 rounded-lt-sm border border-lt-border object-cover\"\n                  data-test={testIdentity(`${name}-preview`)}\n                  src={item.url}\n                />\n              ) : null}\n              <div className=\"min-w-0 flex-1\">\n                <span className=\"block truncate\" data-test={testIdentity(`${name}-item`)}>\n                  {item.name}\n                </span>\n                {item.status === \"uploading\" && (\n                  <span className=\"text-xs text-lt-muted-fg\">{item.progress}%</span>\n                )}\n                {item.status === \"error\" && (\n                  <span className=\"text-xs text-lt-danger\">\n                    {t(\"file-upload.failed\", \"Failed\")}\n                  </span>\n                )}\n              </div>\n              {(!item.existing || !scope) && (\n                <button\n                  aria-label={t(\"file-upload.remove\", \"Remove {{name}}\", { name: item.name })}\n                  className=\"inline-flex size-7 shrink-0 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-50\"\n                  data-test={item.existing ? testIdentity(`${name}-remove-existing`) : undefined}\n                  disabled={locked}\n                  onClick={() => removeItem(item.id)}\n                  type=\"button\"\n                >\n                  <Icon name=\"x\" aria-hidden=\"true\" className=\"size-lt-icon-sm\" />\n                </button>\n              )}\n              {signed && !item.existing && item.key && item.status === \"ready\" && (\n                <input\n                  data-test={testIdentity(`${name}-uploaded`)}\n                  name={fieldName}\n                  type=\"hidden\"\n                  value={item.key}\n                />\n              )}\n            </li>\n          ))}\n        </ul>\n\n        {!scope &&\n          removedTokens.map((token) => (\n            <input key={token} name={`${name}__removed[]`} type=\"hidden\" value={token} />\n          ))}\n\n        <input\n          accept={props.accept ?? undefined}\n          aria-label={props.label ?? name}\n          className=\"sr-only\"\n          data-test={testIdentity(`${name}-input`)}\n          id={inputId}\n          multiple={multiple}\n          name={signed ? undefined : fieldName}\n          onChange={(event) => {\n            addFiles(event.target.files);\n            if (signed) {\n              event.target.value = \"\";\n            }\n          }}\n          ref={fileInputRef}\n          type=\"file\"\n        />\n      </div>\n    </FormFieldFrame>\n  );\n};\n"],"mappings":"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"}

package/dist/form/components/fields/hidden-input.d.ts

@@ -1,10 +1,2 @@
-import { RendererComponent } from '../../../../../core/types';
-declare module '../../../../../core/types' {
-    interface ComponentProps {
-        "form.hidden-input": {
-            name?: string;
-            value?: string;
-        };
-    }
-}
-export declare const HiddenInputComponent: RendererComponent<"form.hidden-input">;
+import { RendererComponent } from '../../../core/types';
+export declare const HiddenInputComponent: RendererComponent<"field.hidden-input">;

package/dist/form/components/fields/hidden-input.js

@@ -1,11 +1,16 @@
-import { getStringProp } from "../../../core/props.js";
+import { useFieldScope } from "../field-scope.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/hidden-input.tsx
-var HiddenInputComponent = ({ node }) => /* @__PURE__ */ jsx("input", {
-	defaultValue: getStringProp(node.props, "value"),
-	name: getStringProp(node.props, "name"),
-	type: "hidden"
-});
+var HiddenInputComponent = ({ node }) => {
+	const scope = useFieldScope();
+	const name = node.props.name;
+	const value = scope ? scope.getValue(name) : node.props.value;
+	return /* @__PURE__ */ jsx("input", {
+		defaultValue: typeof value === "string" ? value : "",
+		name: scope ? scope.scopedName(name) : name,
+		type: "hidden"
+	});
+};
 //#endregion
 export { HiddenInputComponent };
 

package/dist/form/components/fields/hidden-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"hidden-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/hidden-input.tsx"],"sourcesContent":["import { getStringProp } from \"@lattice/lattice/core/props\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\n\ndeclare module \"@lattice/lattice/core/types\" {\n  interface ComponentProps {\n    \"form.hidden-input\": {\n      name?: string;\n      value?: string;\n    };\n  }\n}\n\nexport const HiddenInputComponent: RendererComponent<\"form.hidden-input\"> = ({ node }) => (\n  <input\n    defaultValue={getStringProp(node.props, \"value\")}\n    name={getStringProp(node.props, \"name\")}\n    type=\"hidden\"\n  />\n);\n"],"mappings":";;;AAYA,IAAa,wBAAgE,EAAE,WAC7E,oBAAC,SAAD;CACE,cAAc,cAAc,KAAK,OAAO,OAAO;CAC/C,MAAM,cAAc,KAAK,OAAO,MAAM;CACtC,MAAK;AACN,CAAA"}
+{"version":3,"file":"hidden-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/hidden-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { useFieldScope } from \"../field-scope\";\n\nexport const HiddenInputComponent: RendererComponent<\"field.hidden-input\"> = ({ node }) => {\n  const scope = useFieldScope();\n  const name = node.props.name;\n  const value = scope ? scope.getValue(name) : node.props.value;\n\n  return (\n    <input\n      defaultValue={typeof value === \"string\" ? value : \"\"}\n      name={scope ? scope.scopedName(name) : name}\n      type=\"hidden\"\n    />\n  );\n};\n"],"mappings":";;;AAGA,IAAa,wBAAiE,EAAE,WAAW;CACzF,MAAM,QAAQ,cAAc;CAC5B,MAAM,OAAO,KAAK,MAAM;CACxB,MAAM,QAAQ,QAAQ,MAAM,SAAS,IAAI,IAAI,KAAK,MAAM;CAExD,OACE,oBAAC,SAAD;EACE,cAAc,OAAO,UAAU,WAAW,QAAQ;EAClD,MAAM,QAAQ,MAAM,WAAW,IAAI,IAAI;EACvC,MAAK;CACN,CAAA;AAEL"}

package/dist/form/components/fields/number-input.d.ts

@@ -1,23 +1,2 @@
-import { RendererComponent } from '../../../../../core/types';
-declare module '../../../../../core/types' {
-    interface ComponentProps {
-        "form.number-input": {
-            autoFocus?: boolean;
-            conditions?: unknown;
-            disabled?: boolean;
-            hidden?: boolean;
-            label?: string;
-            max?: number;
-            min?: number;
-            name?: string;
-            placeholder?: string;
-            readonly?: boolean;
-            required?: boolean;
-            slider?: boolean;
-            step?: number;
-            tabIndex?: number;
-            value?: string;
-        };
-    }
-}
-export declare const NumberInputComponent: RendererComponent<"form.number-input">;
+import { RendererComponent } from '../../../core/types';
+export declare const NumberInputComponent: RendererComponent<"field.number-input">;

package/dist/form/components/fields/number-input.js

@@ -1,52 +1,51 @@
-import { getBooleanProp, getOptionalNumberProp, getStringProp } from "../../../core/props.js";
-import { FormFieldFrame } from "../base/field.js";
-import { useControlledField } from "../use-controlled-field.js";
 import { Input } from "../base/input.js";
+import { SimpleField } from "./simple-field.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/number-input.tsx
 var NumberInputComponent = ({ node }) => {
-	const { name, value, error, hidden, required, readonly, disabled, commit } = useControlledField(node);
-	if (hidden) return null;
-	const onChange = (event) => commit(event.target.value);
-	return /* @__PURE__ */ jsx(FormFieldFrame, {
-		error,
-		label: getStringProp(node.props, "label"),
-		name,
-		required,
-		children: getBooleanProp(node.props, "slider") ? /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-3",
-			children: [/* @__PURE__ */ jsx("input", {
-				"aria-label": getStringProp(node.props, "label"),
-				className: "h-2 w-full cursor-pointer appearance-none rounded-lt-sm bg-lt-muted accent-lt-primary disabled:cursor-not-allowed disabled:opacity-50",
-				disabled: disabled || readonly,
+	const props = node.props;
+	return /* @__PURE__ */ jsx(SimpleField, {
+		node,
+		label: props.label ?? "",
+		children: ({ name, testId, value, readOnly, disabled, commit }) => {
+			const onChange = (event) => commit(event.target.value);
+			return props.slider ? /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ jsx("input", {
+					"aria-label": props.label ?? "",
+					className: "h-2 w-full cursor-pointer appearance-none rounded-lt-sm bg-lt-muted accent-lt-primary disabled:cursor-not-allowed disabled:opacity-50",
+					"data-test": testId,
+					disabled: disabled || readOnly,
+					id: name,
+					max: props.max ?? void 0,
+					min: props.min ?? void 0,
+					name,
+					onChange,
+					step: props.step ?? void 0,
+					tabIndex: props.tabIndex ?? void 0,
+					type: "range",
+					value
+				}), /* @__PURE__ */ jsx("output", {
+					className: "w-10 shrink-0 text-right text-sm tabular-nums text-lt-fg",
+					children: value
+				})]
+			}) : /* @__PURE__ */ jsx(Input, {
+				autoFocus: props.autoFocus ?? false,
+				"data-test": testId,
+				disabled,
 				id: name,
-				max: getOptionalNumberProp(node.props, "max"),
-				min: getOptionalNumberProp(node.props, "min"),
+				max: props.max ?? void 0,
+				min: props.min ?? void 0,
 				name,
 				onChange,
-				step: getOptionalNumberProp(node.props, "step"),
-				tabIndex: getOptionalNumberProp(node.props, "tabIndex"),
-				type: "range",
+				placeholder: props.placeholder ?? "",
+				readOnly,
+				step: props.step ?? void 0,
+				tabIndex: props.tabIndex ?? void 0,
+				type: "number",
 				value
-			}), /* @__PURE__ */ jsx("output", {
-				className: "w-10 shrink-0 text-right text-sm tabular-nums text-lt-fg",
-				children: value
-			})]
-		}) : /* @__PURE__ */ jsx(Input, {
-			autoFocus: getBooleanProp(node.props, "autoFocus"),
-			disabled,
-			id: name,
-			max: getOptionalNumberProp(node.props, "max"),
-			min: getOptionalNumberProp(node.props, "min"),
-			name,
-			onChange,
-			placeholder: getStringProp(node.props, "placeholder"),
-			readOnly: readonly,
-			step: getOptionalNumberProp(node.props, "step"),
-			tabIndex: getOptionalNumberProp(node.props, "tabIndex"),
-			type: "number",
-			value
-		})
+			});
+		}
 	});
 };
 //#endregion

package/dist/form/components/fields/number-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/number-input.tsx"],"sourcesContent":["import { getBooleanProp, getOptionalNumberProp, getStringProp } from \"@lattice/lattice/core/props\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { Input } from \"../base/input\";\nimport { useControlledField } from \"../use-controlled-field\";\n\ndeclare module \"@lattice/lattice/core/types\" {\n  interface ComponentProps {\n    \"form.number-input\": {\n      autoFocus?: boolean;\n      conditions?: unknown;\n      disabled?: boolean;\n      hidden?: boolean;\n      label?: string;\n      max?: number;\n      min?: number;\n      name?: string;\n      placeholder?: string;\n      readonly?: boolean;\n      required?: boolean;\n      slider?: boolean;\n      step?: number;\n      tabIndex?: number;\n      value?: string;\n    };\n  }\n}\n\nexport const NumberInputComponent: RendererComponent<\"form.number-input\"> = ({ node }) => {\n  const { name, value, error, hidden, required, readonly, disabled, commit } =\n    useControlledField(node);\n\n  if (hidden) {\n    return null;\n  }\n\n  const onChange = (event: React.ChangeEvent<HTMLInputElement>): void => commit(event.target.value);\n\n  return (\n    <FormFieldFrame\n      error={error}\n      label={getStringProp(node.props, \"label\")}\n      name={name}\n      required={required}\n    >\n      {getBooleanProp(node.props, \"slider\") ? (\n        <div className=\"flex items-center gap-3\">\n          <input\n            aria-label={getStringProp(node.props, \"label\")}\n            className=\"h-2 w-full cursor-pointer appearance-none rounded-lt-sm bg-lt-muted accent-lt-primary disabled:cursor-not-allowed disabled:opacity-50\"\n            disabled={disabled || readonly}\n            id={name}\n            max={getOptionalNumberProp(node.props, \"max\")}\n            min={getOptionalNumberProp(node.props, \"min\")}\n            name={name}\n            onChange={onChange}\n            step={getOptionalNumberProp(node.props, \"step\")}\n            tabIndex={getOptionalNumberProp(node.props, \"tabIndex\")}\n            type=\"range\"\n            value={value}\n          />\n          <output className=\"w-10 shrink-0 text-right text-sm tabular-nums text-lt-fg\">\n            {value}\n          </output>\n        </div>\n      ) : (\n        <Input\n          autoFocus={getBooleanProp(node.props, \"autoFocus\")}\n          disabled={disabled}\n          id={name}\n          max={getOptionalNumberProp(node.props, \"max\")}\n          min={getOptionalNumberProp(node.props, \"min\")}\n          name={name}\n          onChange={onChange}\n          placeholder={getStringProp(node.props, \"placeholder\")}\n          readOnly={readonly}\n          step={getOptionalNumberProp(node.props, \"step\")}\n          tabIndex={getOptionalNumberProp(node.props, \"tabIndex\")}\n          type=\"number\"\n          value={value}\n        />\n      )}\n    </FormFieldFrame>\n  );\n};\n"],"mappings":";;;;;;AA4BA,IAAa,wBAAgE,EAAE,WAAW;CACxF,MAAM,EAAE,MAAM,OAAO,OAAO,QAAQ,UAAU,UAAU,UAAU,WAChE,mBAAmB,IAAI;CAEzB,IAAI,QACF,OAAO;CAGT,MAAM,YAAY,UAAqD,OAAO,MAAM,OAAO,KAAK;CAEhG,OACE,oBAAC,gBAAD;EACS;EACP,OAAO,cAAc,KAAK,OAAO,OAAO;EAClC;EACI;YAET,eAAe,KAAK,OAAO,QAAQ,IAClC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,SAAD;IACE,cAAY,cAAc,KAAK,OAAO,OAAO;IAC7C,WAAU;IACV,UAAU,YAAY;IACtB,IAAI;IACJ,KAAK,sBAAsB,KAAK,OAAO,KAAK;IAC5C,KAAK,sBAAsB,KAAK,OAAO,KAAK;IACtC;IACI;IACV,MAAM,sBAAsB,KAAK,OAAO,MAAM;IAC9C,UAAU,sBAAsB,KAAK,OAAO,UAAU;IACtD,MAAK;IACE;GACR,CAAA,GACD,oBAAC,UAAD;IAAQ,WAAU;cACf;GACK,CAAA,CACL;OAEL,oBAAC,OAAD;GACE,WAAW,eAAe,KAAK,OAAO,WAAW;GACvC;GACV,IAAI;GACJ,KAAK,sBAAsB,KAAK,OAAO,KAAK;GAC5C,KAAK,sBAAsB,KAAK,OAAO,KAAK;GACtC;GACI;GACV,aAAa,cAAc,KAAK,OAAO,aAAa;GACpD,UAAU;GACV,MAAM,sBAAsB,KAAK,OAAO,MAAM;GAC9C,UAAU,sBAAsB,KAAK,OAAO,UAAU;GACtD,MAAK;GACE;EACR,CAAA;CAEW,CAAA;AAEpB"}
+{"version":3,"file":"number-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/number-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { Input } from \"../base/input\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const NumberInputComponent: RendererComponent<\"field.number-input\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, commit }) => {\n        const onChange = (event: React.ChangeEvent<HTMLInputElement>): void =>\n          commit(event.target.value);\n\n        return props.slider ? (\n          <div className=\"flex items-center gap-3\">\n            <input\n              aria-label={props.label ?? \"\"}\n              className=\"h-2 w-full cursor-pointer appearance-none rounded-lt-sm bg-lt-muted accent-lt-primary disabled:cursor-not-allowed disabled:opacity-50\"\n              data-test={testId}\n              disabled={disabled || readOnly}\n              id={name}\n              max={props.max ?? undefined}\n              min={props.min ?? undefined}\n              name={name}\n              onChange={onChange}\n              step={props.step ?? undefined}\n              tabIndex={props.tabIndex ?? undefined}\n              type=\"range\"\n              value={value}\n            />\n            <output className=\"w-10 shrink-0 text-right text-sm tabular-nums text-lt-fg\">\n              {value}\n            </output>\n          </div>\n        ) : (\n          <Input\n            autoFocus={props.autoFocus ?? false}\n            data-test={testId}\n            disabled={disabled}\n            id={name}\n            max={props.max ?? undefined}\n            min={props.min ?? undefined}\n            name={name}\n            onChange={onChange}\n            placeholder={props.placeholder ?? \"\"}\n            readOnly={readOnly}\n            step={props.step ?? undefined}\n            tabIndex={props.tabIndex ?? undefined}\n            type=\"number\"\n            value={value}\n          />\n        );\n      }}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,wBAAiE,EAAE,WAAW;CACzF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,aAAa;GACxD,MAAM,YAAY,UAChB,OAAO,MAAM,OAAO,KAAK;GAE3B,OAAO,MAAM,SACX,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,SAAD;KACE,cAAY,MAAM,SAAS;KAC3B,WAAU;KACV,aAAW;KACX,UAAU,YAAY;KACtB,IAAI;KACJ,KAAK,MAAM,OAAO,KAAA;KAClB,KAAK,MAAM,OAAO,KAAA;KACZ;KACI;KACV,MAAM,MAAM,QAAQ,KAAA;KACpB,UAAU,MAAM,YAAY,KAAA;KAC5B,MAAK;KACE;IACR,CAAA,GACD,oBAAC,UAAD;KAAQ,WAAU;eACf;IACK,CAAA,CACL;QAEL,oBAAC,OAAD;IACE,WAAW,MAAM,aAAa;IAC9B,aAAW;IACD;IACV,IAAI;IACJ,KAAK,MAAM,OAAO,KAAA;IAClB,KAAK,MAAM,OAAO,KAAA;IACZ;IACI;IACV,aAAa,MAAM,eAAe;IACxB;IACV,MAAM,MAAM,QAAQ,KAAA;IACpB,UAAU,MAAM,YAAY,KAAA;IAC5B,MAAK;IACE;GACR,CAAA;EAEL;CACW,CAAA;AAEjB"}

package/dist/form/components/fields/password-input.d.ts

@@ -1,29 +1,2 @@
-import { RendererComponent } from '../../../../../core/types';
-import { FormLabelAction } from '../types';
-type PasswordConfirmation = {
-    label?: string;
-    name?: string;
-    placeholder?: string;
-};
-declare module '../../../../../core/types' {
-    interface ComponentProps {
-        "form.password-input": {
-            autoComplete?: string;
-            autoFocus?: boolean;
-            conditions?: unknown;
-            confirmation?: PasswordConfirmation;
-            disabled?: boolean;
-            hidden?: boolean;
-            label?: string;
-            labelAction?: FormLabelAction;
-            name?: string;
-            passwordRules?: string;
-            placeholder?: string;
-            readonly?: boolean;
-            required?: boolean;
-            tabIndex?: number;
-        };
-    }
-}
-export declare const PasswordInputComponent: RendererComponent<"form.password-input">;
-export {};
+import { RendererComponent } from '../../../core/types';
+export declare const PasswordInputComponent: RendererComponent<"field.password-input">;