fluid-primitives 0.19.1 → 1.0.0-beta.1

package/dist/fieldset.d.ts

@@ -0,0 +1,15 @@
+import { c as Machine, z as Component } from "./index-B06gIN_k.js";
+import * as _$_zag_js_types0 from "@zag-js/types";
+import * as fieldset from "@zag-js/fieldset";
+
+//#region Resources/Private/Primitives/Fieldset/Fieldset.d.ts
+declare class Fieldset extends Component<fieldset.Props, fieldset.Api> {
+  static componentName: string;
+  initMachine(props: fieldset.Props): Machine<any>;
+  initApi(): fieldset.Api<_$_zag_js_types0.PropTypes<{
+    [x: string]: any;
+  }>>;
+  render(): void;
+}
+//#endregion
+export { Fieldset };

package/dist/fieldset.js

@@ -0,0 +1,27 @@
+import { a as normalizeProps, at as Machine, rt as Component } from "./Client-HrMIqv7d.js";
+import * as fieldset from "@zag-js/fieldset";
+
+//#region Resources/Private/Primitives/Fieldset/Fieldset.ts
+var Fieldset = class extends Component {
+	static componentName = "fieldset";
+	initMachine(props) {
+		const [machineProps] = fieldset.splitProps(props);
+		return new Machine(fieldset.machine, machineProps);
+	}
+	initApi() {
+		return fieldset.connect(this.machine.service, normalizeProps);
+	}
+	render() {
+		const rootEl = this.hydrator.query("root");
+		if (rootEl) this.spreadProps(rootEl, this.api.getRootProps());
+		const legendEl = this.hydrator.query("legend");
+		if (legendEl) this.spreadProps(legendEl, this.api.getLegendProps());
+		const helperTextEl = this.hydrator.query("helperText");
+		if (helperTextEl) this.spreadProps(helperTextEl, this.api.getHelperTextProps());
+		const errorTextEl = this.hydrator.query("errorText");
+		if (errorTextEl) this.spreadProps(errorTextEl, this.api.getErrorTextProps());
+	}
+};
+
+//#endregion
+export { Fieldset };

package/dist/file-upload.d.ts

@@ -0,0 +1,85 @@
+import { X as ConverterMachineProps, b as FieldClientApi, c as Machine, y as FieldAwareComponent } from "./index-B06gIN_k.js";
+import * as _$_zag_js_types0 from "@zag-js/types";
+import * as fileUpload from "@zag-js/file-upload";
+
+//#region Resources/Private/Primitives/FileUpload/src/file-upload.translations.d.ts
+/** The translations as PHP ships them: plain strings, `itemPreview` and `deleteFile` with a `%fileName%` placeholder. */
+type FileUploadTranslationTexts = {
+  dropzone?: string;
+  itemPreview?: string;
+  deleteFile?: string;
+};
+//#endregion
+//#region Resources/Private/Primitives/FileUpload/FileUpload.d.ts
+declare const fileUploadPropConverters: {
+  accept: (accept: fileUpload.Props["accept"]) => Record<string, string[]> | fileUpload.FileMimeType | fileUpload.FileMimeType[] | undefined;
+};
+declare module 'fluid-primitives' {
+  interface HydrationPropsOverrides {
+    fileUpload: ConverterMachineProps<typeof fileUploadPropConverters>;
+  }
+}
+/**
+ * `existingFilesCount` is a plain integer (not a list of `File` objects) precisely so the already-
+ * persisted files it represents never enter the machine's own `acceptedFiles` - anything that does
+ * also ends up in the hidden input's `FileList` (via the machine's own `syncInputElement` action)
+ * and gets resubmitted on the next form post, which would silently overwrite an already-stored file
+ * with placeholder content reconstructed from just its name/size. Subtracting the count from
+ * `maxFiles` instead gets the same "remaining slots" UX (and the machine's own `TOO_MANY_FILES`
+ * rejection) without ever touching a real `File`.
+ */
+type FileUploadPrimitiveProps = Omit<fileUpload.Props, 'translations'> & {
+  existingFilesCount?: number;
+  translations?: FileUploadTranslationTexts;
+};
+/**
+ * The stable, per-file identity stamped onto every rendered item's `data-value` (and folded into
+ * its `id`) - matches zag-js's own `getFileId` intent (`@zag-js/file-upload`), which does the same
+ * thing internally but isn't part of that package's public API (only its main entry and `./anatomy`
+ * are exported; the `.dom` module `getFileId` lives in isn't), and returns a hash rather than this
+ * plain, readable string. Exported so userland code can go from a rendered item's `data-value` back
+ * to the real `File` it represents (e.g. `acceptedFiles.find(f => fileValue(f) === value)`) without
+ * reimplementing this exact format - see the FileUpload "Custom Item Layout" docs example.
+ */
+declare function fileValue(file: File): string;
+declare class FileUpload extends FieldAwareComponent<FileUploadPrimitiveProps, fileUpload.Api> {
+  static componentName: string;
+  private previewCleanups;
+  private lastAcceptedFiles;
+  private lastRejectedFiles;
+  propsWithField(props: FileUploadPrimitiveProps, field: FieldClientApi): FileUploadPrimitiveProps;
+  initMachine(props: FileUploadPrimitiveProps): Machine<any>;
+  initApi(): fileUpload.Api<_$_zag_js_types0.PropTypes<{
+    [x: string]: any;
+  }>>;
+  render(): void;
+  private renderItemGroups;
+  /**
+   * An `itemGroup` is "empty" only once none of its items - machine-managed or existing - are
+   * visible, so an edit form pre-populated with existing files never shows the empty state
+   * underneath them.
+   */
+  private updateEmptyState;
+  /**
+   * Existing items carry their own `ui:fileUploadDeleteCheckbox` (unchecked, hidden) as a
+   * sibling of their `itemDeleteTrigger` button - not nested inside it, since a native `<button>`
+   * may not contain interactive descendants like `<input>`. Clicking the trigger checks that box
+   * (so the deletion is applied on the next form submission) and hides the item, mirroring how a
+   * machine-managed item disappears on delete. Wiring is idempotent so it's safe to call on every
+   * render.
+   */
+  private wireExistingItemDeleteTriggers;
+  /**
+   * `rejectedItemTemplate` is an optional second `ui:template`, letting a consumer author
+   * completely different markup for rejected items (e.g. no preview, shown in its own list below
+   * the accepted files) instead of reusing `itemTemplate` for both - see the "Custom Item Layout"
+   * docs example. Falls back to `itemTemplate` when it isn't present, so existing single-template
+   * consumers are unaffected.
+   */
+  private resolveItemTemplatePart;
+  private renderItems;
+  private renderPreview;
+  destroy(): void;
+}
+//#endregion
+export { FileUpload, fileValue };

package/dist/file-upload.js

@@ -0,0 +1,255 @@
+import { K as registerClientPropConverters, a as normalizeProps, at as Machine, n as Template, o as mergeProps, s as FieldAwareComponent } from "./Client-HrMIqv7d.js";
+import * as fileUpload from "@zag-js/file-upload";
+import { isValidFileType } from "@zag-js/file-utils";
+
+//#region Resources/Private/Primitives/FileUpload/src/file-upload.translations.ts
+const FILE_NAME_PLACEHOLDER = "%fileName%";
+/**
+* zag-js's `itemPreview`/`deleteFile` translations are functions (`(file: File) => string`) that
+* interpolate the file's name - but Fluid has no callbacks to hand over, and the actual `File` only
+* ever exists in the browser anyway. `FileUploadContext::getTranslations()` therefore translates
+* them as plain strings containing a literal `%fileName%` placeholder (not `{fileName}` - Fluid's
+* own inline array/object syntax already treats a bare `{...}` inside a string as a nested variable
+* expression, so a curly-brace placeholder breaks the moment someone overrides `translations` from a
+* template); this wraps such a string into the function zag-js actually expects, substituting the
+* placeholder per file. An entry that is not a string is left to Zag's default.
+*/
+function resolveTranslations(translations) {
+	if (!translations) return void 0;
+	const resolved = {};
+	for (const [key, text] of Object.entries(translations)) {
+		if (typeof text !== "string") continue;
+		resolved[key] = key === "itemPreview" || key === "deleteFile" ? (file) => text.replaceAll(FILE_NAME_PLACEHOLDER, file.name) : text;
+	}
+	return resolved;
+}
+
+//#endregion
+//#region Resources/Private/Primitives/FileUpload/FileUpload.ts
+registerClientPropConverters("fileUpload", { accept: (accept) => accept });
+function resolveMaxFiles(props) {
+	const existingFilesCount = props.existingFilesCount ?? 0;
+	if (existingFilesCount <= 0 || typeof props.maxFiles !== "number") return props.maxFiles;
+	return Math.max(0, props.maxFiles - existingFilesCount);
+}
+/**
+* The stable, per-file identity stamped onto every rendered item's `data-value` (and folded into
+* its `id`) - matches zag-js's own `getFileId` intent (`@zag-js/file-upload`), which does the same
+* thing internally but isn't part of that package's public API (only its main entry and `./anatomy`
+* are exported; the `.dom` module `getFileId` lives in isn't), and returns a hash rather than this
+* plain, readable string. Exported so userland code can go from a rendered item's `data-value` back
+* to the real `File` it represents (e.g. `acceptedFiles.find(f => fileValue(f) === value)`) without
+* reimplementing this exact format - see the FileUpload "Custom Item Layout" docs example.
+*/
+function fileValue(file) {
+	return `${file.name}-${file.size}`;
+}
+/**
+* Whether `file` should use the `itemPreview` variant tagged with `pattern` (e.g. `image/*` or
+* `.pdf`). `.*`/`*`/empty are our own catch-all sentinel for a fallback variant - zag-js's own
+* `isValidFileType` (`@zag-js/file-utils`) has no such "match everything" concept (a leading-dot
+* pattern there means a literal file extension), so that case is handled before delegating.
+* Otherwise reuses `isValidFileType`'s own accept-string matching (wildcard MIME types, exact MIME
+* types, and file extensions) instead of re-implementing it.
+*/
+function matchesFileType(pattern, file) {
+	if (!pattern || pattern === ".*" || pattern === "*") return true;
+	return isValidFileType(file, pattern)[0];
+}
+function fileExtension(fileName) {
+	const dotIndex = fileName.lastIndexOf(".");
+	return dotIndex === -1 ? "" : fileName.slice(dotIndex + 1).toUpperCase();
+}
+var FileUpload = class extends FieldAwareComponent {
+	static componentName = "fileUpload";
+	previewCleanups = /* @__PURE__ */ new Map();
+	lastAcceptedFiles = null;
+	lastRejectedFiles = null;
+	propsWithField(props, field) {
+		return {
+			...props,
+			disabled: props.disabled ?? field.disabled,
+			readOnly: props.readOnly ?? field.readOnly,
+			required: props.required ?? field.required,
+			invalid: props.invalid ?? field.invalid,
+			name: props.name ?? field.name
+		};
+	}
+	initMachine(props) {
+		props = this.withFieldProps(props);
+		const { translations, ...rest } = props;
+		const [machineProps] = fileUpload.splitProps(rest);
+		return new Machine(fileUpload.machine, {
+			...machineProps,
+			maxFiles: resolveMaxFiles(props),
+			translations: resolveTranslations(translations)
+		});
+	}
+	initApi() {
+		return fileUpload.connect(this.machine.service, normalizeProps);
+	}
+	render() {
+		this.subscribeToFieldService();
+		const rootEl = this.hydrator.query("root");
+		if (rootEl) this.spreadProps(rootEl, this.api.getRootProps());
+		const labelEl = this.hydrator.query("label");
+		if (labelEl) this.spreadProps(labelEl, this.api.getLabelProps());
+		const fieldDescribedBy = { "aria-describedby": this.field?.ariaDescribedby };
+		const dropzoneEl = this.hydrator.query("dropzone");
+		if (dropzoneEl) this.spreadProps(dropzoneEl, mergeProps(this.api.getDropzoneProps(), fieldDescribedBy));
+		const triggerEl = this.hydrator.query("trigger");
+		if (triggerEl) this.spreadProps(triggerEl, mergeProps(this.api.getTriggerProps(), fieldDescribedBy));
+		const hiddenInputEl = this.hydrator.query("hiddenInput");
+		if (hiddenInputEl) this.spreadProps(hiddenInputEl, this.api.getHiddenInputProps());
+		const clearTriggerEl = this.hydrator.query("clearTrigger");
+		if (clearTriggerEl) this.spreadProps(clearTriggerEl, this.api.getClearTriggerProps());
+		this.renderItemGroups();
+	}
+	renderItemGroups() {
+		const acceptedFiles = this.api.acceptedFiles;
+		const rejectedFiles = this.api.rejectedFiles;
+		const filesChanged = acceptedFiles !== this.lastAcceptedFiles || rejectedFiles !== this.lastRejectedFiles;
+		this.hydrator.queryAll("itemGroup").forEach((itemGroupEl) => {
+			const type = itemGroupEl.dataset.value || "accepted";
+			this.spreadProps(itemGroupEl, this.api.getItemGroupProps({ type }));
+			this.wireExistingItemDeleteTriggers(itemGroupEl);
+			if (filesChanged) {
+				const entries = type === "rejected" ? rejectedFiles.map(({ file, errors }) => ({
+					file,
+					type,
+					errors
+				})) : acceptedFiles.map((file) => ({
+					file,
+					type
+				}));
+				this.renderItems(itemGroupEl, entries, type);
+			}
+			this.updateEmptyState(itemGroupEl);
+		});
+		this.lastAcceptedFiles = acceptedFiles;
+		this.lastRejectedFiles = rejectedFiles;
+	}
+	/**
+	* An `itemGroup` is "empty" only once none of its items - machine-managed or existing - are
+	* visible, so an edit form pre-populated with existing files never shows the empty state
+	* underneath them.
+	*/
+	updateEmptyState(itemGroupEl) {
+		const emptyStateEl = this.hydrator.query("emptyState", itemGroupEl);
+		if (!emptyStateEl) return;
+		emptyStateEl.hidden = this.hydrator.queryAll("item", itemGroupEl).some((el) => !el.hidden);
+	}
+	/**
+	* Existing items carry their own `ui:fileUploadDeleteCheckbox` (unchecked, hidden) as a
+	* sibling of their `itemDeleteTrigger` button - not nested inside it, since a native `<button>`
+	* may not contain interactive descendants like `<input>`. Clicking the trigger checks that box
+	* (so the deletion is applied on the next form submission) and hides the item, mirroring how a
+	* machine-managed item disappears on delete. Wiring is idempotent so it's safe to call on every
+	* render.
+	*/
+	wireExistingItemDeleteTriggers(itemGroupEl) {
+		this.hydrator.queryAll("item", itemGroupEl).filter((el) => el.dataset.type === "existing" && !el.dataset.fileUploadWired).forEach((itemEl) => {
+			itemEl.dataset.fileUploadWired = "true";
+			const checkboxEl = itemEl.querySelector("input[type=\"checkbox\"]");
+			const deleteTriggerEl = this.hydrator.query("itemDeleteTrigger", itemEl);
+			if (!checkboxEl || !deleteTriggerEl) return;
+			deleteTriggerEl.addEventListener("click", () => {
+				if (this.api.disabled || this.api.readOnly) return;
+				checkboxEl.checked = true;
+				itemEl.hidden = true;
+				this.updateEmptyState(itemGroupEl);
+			});
+		});
+	}
+	/**
+	* `rejectedItemTemplate` is an optional second `ui:template`, letting a consumer author
+	* completely different markup for rejected items (e.g. no preview, shown in its own list below
+	* the accepted files) instead of reusing `itemTemplate` for both - see the "Custom Item Layout"
+	* docs example. Falls back to `itemTemplate` when it isn't present, so existing single-template
+	* consumers are unaffected.
+	*/
+	resolveItemTemplatePart(type) {
+		if (type === "rejected" && this.hydrator.query("rejectedItemTemplate")) return "rejectedItemTemplate";
+		return "itemTemplate";
+	}
+	renderItems(itemGroupEl, entries, type) {
+		this.hydrator.queryAll("item", itemGroupEl).filter((el) => el.dataset.type !== "existing").forEach((el) => {
+			this.previewCleanups.get(el)?.();
+			this.previewCleanups.delete(el);
+			el.remove();
+		});
+		const templatePart = this.resolveItemTemplatePart(type);
+		entries.forEach(({ file, type, errors }) => {
+			const instance = new Template(this.hydrator, templatePart, { value: fileValue(file) });
+			const itemEl = instance.root;
+			this.spreadProps(itemEl, this.api.getItemProps({
+				file,
+				type
+			}));
+			const errorEl = instance.query("itemError");
+			if (errorEl) {
+				errorEl.hidden = !errors?.length;
+				errorEl.textContent = errors?.join(", ") ?? "";
+			}
+			const nameEl = instance.query("itemName");
+			if (nameEl) {
+				this.spreadProps(nameEl, this.api.getItemNameProps({
+					file,
+					type
+				}));
+				nameEl.textContent = file.name;
+			}
+			const sizeEl = instance.query("itemSizeText");
+			if (sizeEl) {
+				this.spreadProps(sizeEl, this.api.getItemSizeTextProps({
+					file,
+					type
+				}));
+				sizeEl.textContent = this.api.getFileSize(file);
+			}
+			this.renderPreview(instance, file, type);
+			const deleteTriggerEl = instance.query("itemDeleteTrigger");
+			if (deleteTriggerEl) this.spreadProps(deleteTriggerEl, this.api.getItemDeleteTriggerProps({
+				file,
+				type
+			}));
+			itemGroupEl.appendChild(instance);
+		});
+	}
+	renderPreview(instance, file, type) {
+		const previews = instance.queryAll("itemPreview");
+		if (previews.length === 0) return;
+		const matched = previews.find((el) => matchesFileType(el.dataset.match, file)) ?? previews[previews.length - 1];
+		previews.forEach((el) => {
+			if (el !== matched) {
+				el.remove();
+				return;
+			}
+			this.spreadProps(el, this.api.getItemPreviewProps({
+				file,
+				type
+			}));
+			const fallbackEl = this.hydrator.query("itemPreviewFallback", el);
+			if (fallbackEl) fallbackEl.textContent = fileExtension(file.name);
+		});
+		if (!matched) return;
+		const imageEl = this.hydrator.query("itemPreviewImage", matched);
+		if (!imageEl || !file.type.startsWith("image/")) return;
+		const cleanup = this.api.createFileUrl(file, (url) => {
+			this.spreadProps(imageEl, this.api.getItemPreviewImageProps({
+				file,
+				url,
+				type
+			}));
+		});
+		this.previewCleanups.set(matched, cleanup);
+	}
+	destroy() {
+		this.previewCleanups.forEach((cleanup) => cleanup());
+		this.previewCleanups.clear();
+		super.destroy();
+	}
+};
+
+//#endregion
+export { FileUpload, fileValue };

package/dist/form.d.ts

@@ -1,83 +1,2 @@
-import { a as Machine, f as Component } from "./index-B8JCdyld.js";
-import { t as FieldMachine } from "./form.registry-Cb8Pvoe8.js";
-import { EventObject } from "@zag-js/core";
-import * as z from "zod";
-import { JSX, PropTypes } from "@zag-js/types";
-
-//#region Resources/Private/Primitives/Form/src/form.types.d.ts
-interface FieldError {
-  messages: string[];
-  value?: FormDataEntryValue | FormDataEntryValue[] | null;
-}
-type FormErrors = Record<string, FieldError>;
-type FormDirty = Record<string, boolean>;
-type FormTouched = Record<string, boolean>;
-/**
- * Error thrown by post() when server returns 422 validation errors.
- * The machine catches this and transitions to 'invalid' state.
- */
-declare class ValidationError extends Error {
-  errors: FormErrors;
-  constructor(errors: FormErrors);
-}
-type ZodFormSchema = z.ZodObject | undefined;
-interface FormProps {
-  id: string;
-  schema?: ZodFormSchema;
-  objectName?: string;
-  inputDebounceMs?: number;
-  onSubmit?: ({
-    formData,
-    api,
-    event,
-    post
-  }: {
-    formData: FormData;
-    api: FormApi;
-    event: JSX.FormEvent<HTMLElement>;
-    post: (url: string, data: FormData) => Promise<Response>;
-  }) => Promise<boolean> | boolean;
-  render?: (form: Form) => void;
-}
-interface FormSchema {
-  props: FormProps;
-  context: {
-    values: FormData;
-    initialValues: FormData;
-    errors: FormErrors;
-    dirty: FormDirty;
-    touched: FormTouched;
-  };
-  state: 'invalid' | 'ready' | 'submitting' | 'success' | 'error';
-  event: EventObject;
-  action: string;
-  effect: string;
-}
-interface FormApi {
-  isSubmitting: boolean;
-  isDirty: boolean;
-  isInvalid: boolean;
-  isSuccessful: boolean;
-  isError: boolean;
-  getFormProps(): PropTypes['element'];
-  getValues(): FormData;
-  getErrors(): FormErrors;
-  getDirty(): FormDirty;
-  getTouched(): FormTouched;
-  _userRenderFn: FormProps['render'];
-  getAllFields(): Map<string, FieldMachine>;
-  getField(name: string): FieldMachine | undefined;
-  getFormEl(): HTMLFormElement | null;
-  getAction(): string;
-  reset(): void;
-}
-//#endregion
-//#region Resources/Private/Primitives/Form/Form.d.ts
-declare class Form extends Component<FormProps, FormApi> {
-  static name: string;
-  initMachine(props: FormProps): Machine<FormSchema>;
-  initApi(): FormApi;
-  render(): void;
-}
-//#endregion
-export { Form, ValidationError };
+import { A as FormValueTree, D as FormSubmitResult, E as FormProps, M as FormValuesObject, N as Form, O as FormValidation, T as FormErrors, j as FormValues, k as FormValueLeaf, w as FormApi } from "./index-B06gIN_k.js";
+export { Form, FormApi, FormErrors, FormProps, FormSubmitResult, FormValidation, FormValueLeaf, FormValueTree, FormValues, FormValuesObject };