fluid-primitives 0.19.1 → 1.0.0-beta.1

package/dist/input.d.ts

@@ -0,0 +1,96 @@
+import { b as FieldClientApi, c as Machine$1, y as FieldAwareComponent } from "./index-B06gIN_k.js";
+import { EventObject } from "@zag-js/core";
+import { JSX, PropTypes } from "@zag-js/types";
+
+//#region Resources/Private/Primitives/Input/src/input.types.d.ts
+interface InputTranslations {
+  /**
+   * The text of the word count part. `%count%` is replaced with the number of characters, `%max%`
+   * with `maxLength`, e.g. `%count% / %max% characters`.
+   */
+  wordCount?: string;
+}
+interface InputProps$1 {
+  /** The unique identifier of the input. */
+  id: string;
+  /** The ids of the parts other elements reference: `input` (the `for` of its label) and `wordCount`. */
+  ids?: Record<string, string>;
+  /** The name of the input, as it is submitted with the form. Taken from the closest field. */
+  name?: string;
+  /** Whether the input is disabled. Taken from the closest field. */
+  disabled?: boolean;
+  /** Whether the input is read-only. Taken from the closest field. */
+  readOnly?: boolean;
+  /** Whether the input is required. Taken from the closest field. */
+  required?: boolean;
+  /** Whether the input is invalid. Taken from the closest field. */
+  invalid?: boolean;
+  /** The initial value of the input. */
+  defaultValue?: string;
+  /** The most characters allowed. It also drives the word count, e.g. `42 / 250 characters`. */
+  maxLength?: number;
+  /** A regular expression the value has to match. */
+  pattern?: string;
+  /** The kind of virtual keyboard to show on devices that have one. */
+  inputMode?: JSX.HTMLAttributes<HTMLInputElement>['inputMode'];
+  /** The localized texts of the input. */
+  translations?: InputTranslations;
+  /**
+   * Whether the word count is announced to assistive tech. Set to `false` to stay silent.
+   * @default true
+   */
+  announce?: boolean;
+  /**
+   * Milliseconds to debounce word count announcements by, so rapid typing doesn't
+   * spam assistive tech on every keystroke. Set to 0 to announce every change immediately.
+   * @default 600
+   */
+  announceDebounce?: number;
+  /**
+   * Runs on every native `input` event, before the value is committed. Return the value to write
+   * back to the input, e.g. uppercased or digits only. The cursor position is kept. It cannot be
+   * set from a Fluid template, only by constructing `Input` in your own entry file.
+   */
+  transform?: (value: string, event: Event) => string;
+  /** Called when the value changes. */
+  onValueChange?: (details: {
+    value: string;
+  }) => void;
+}
+interface InputHandle {
+  /** The current value of the input. */
+  value: string;
+  /** The number of characters in the value. */
+  count: number;
+  /** The word count text, e.g. `42 / 250 characters`. `null` without `maxLength` or when the text is turned off. */
+  countText: string | null;
+  /** Whether the input is disabled. */
+  disabled: boolean;
+  /** Whether the input is read-only. */
+  readOnly: boolean;
+  /** Whether the input is required. */
+  required: boolean;
+  /** Whether the input is invalid. */
+  invalid: boolean;
+  /** The name of the input. */
+  name: string | undefined;
+  /** The most characters allowed. */
+  maxLength: number | undefined;
+}
+interface InputApi extends InputHandle {
+  getRootProps(): PropTypes['element'];
+  getInputProps(): PropTypes['input'];
+  getLabelProps(): PropTypes['label'];
+  getWordCountProps(): PropTypes['element'];
+}
+//#endregion
+//#region Resources/Private/Primitives/Input/Input.d.ts
+declare class Input extends FieldAwareComponent<InputProps$1, InputApi> {
+  static componentName: string;
+  propsWithField(props: InputProps$1, field: FieldClientApi): InputProps$1;
+  initMachine(props: InputProps$1): Machine$1<any>;
+  initApi(): InputApi;
+  render(): void;
+}
+//#endregion
+export { Input };

package/dist/input.js

@@ -0,0 +1,233 @@
+import { a as normalizeProps, at as Machine$1, o as mergeProps, s as FieldAwareComponent } from "./Client-HrMIqv7d.js";
+import { createSplitProps, debounce } from "@zag-js/utils";
+import { createAnatomy } from "@zag-js/anatomy";
+import { createMachine } from "@zag-js/core";
+import { createProps } from "@zag-js/types";
+import { createLiveRegion } from "@zag-js/live-region";
+
+//#region Resources/Private/Primitives/Input/src/input.anatomy.ts
+const anatomy = createAnatomy("input").parts("root", "label", "input", "wordCount");
+const parts = anatomy.build();
+
+//#endregion
+//#region Resources/Private/Primitives/Input/src/input.dom.ts
+const getInputId = (scope) => scope.ids?.input ?? `input:${scope.id}:input`;
+const getWordCountId = (scope) => scope.ids?.wordCount ?? `input:${scope.id}:wordCount`;
+const getInputEl = (scope) => scope.query(scope.selector(parts.input));
+
+//#endregion
+//#region Resources/Private/Primitives/Input/src/input.connect.ts
+const SELECTABLE_INPUT_TYPES = new Set([
+	"text",
+	"search",
+	"tel",
+	"url",
+	"password"
+]);
+function createInputHandle(service) {
+	const { prop, context, computed } = service;
+	return {
+		value: context.get("value"),
+		count: computed("count"),
+		countText: computed("countText"),
+		disabled: !!prop("disabled"),
+		readOnly: !!prop("readOnly"),
+		required: !!prop("required"),
+		invalid: !!prop("invalid"),
+		name: prop("name"),
+		maxLength: prop("maxLength")
+	};
+}
+function connect(service, normalize) {
+	const { scope, prop, send } = service;
+	const handle = createInputHandle(service);
+	return {
+		...handle,
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs(scope.id),
+				"data-invalid": handle.invalid ? "" : void 0,
+				"data-disabled": handle.disabled ? "" : void 0,
+				"data-readonly": handle.readOnly ? "" : void 0
+			});
+		},
+		getInputProps() {
+			return normalize.input({
+				...parts.input.attrs(scope.id),
+				id: getInputId(scope),
+				name: handle.name,
+				disabled: handle.disabled || void 0,
+				readOnly: handle.readOnly || void 0,
+				required: handle.required || void 0,
+				maxLength: handle.maxLength,
+				pattern: prop("pattern"),
+				inputMode: prop("inputMode"),
+				value: handle.value,
+				"aria-invalid": handle.invalid ? "true" : void 0,
+				"data-invalid": handle.invalid ? "" : void 0,
+				"data-disabled": handle.disabled ? "" : void 0,
+				"data-readonly": handle.readOnly ? "" : void 0,
+				onInput(event) {
+					const target = event.currentTarget;
+					const transform = prop("transform");
+					let value = target.value;
+					if (transform) {
+						const transformed = transform(value, event);
+						if (transformed !== value) {
+							value = transformed;
+							if (SELECTABLE_INPUT_TYPES.has(target.type)) {
+								const { selectionStart, selectionEnd } = target;
+								target.value = value;
+								if (selectionStart != null) target.selectionStart = selectionStart;
+								if (selectionEnd != null) target.selectionEnd = selectionEnd;
+							} else target.value = value;
+						}
+					}
+					send({
+						type: "VALUE_CHANGE",
+						value
+					});
+				}
+			});
+		},
+		getLabelProps() {
+			return normalize.label({
+				...parts.label.attrs(scope.id),
+				htmlFor: getInputId(scope),
+				"data-invalid": handle.invalid ? "" : void 0,
+				"data-disabled": handle.disabled ? "" : void 0,
+				"data-required": handle.required ? "" : void 0
+			});
+		},
+		getWordCountProps() {
+			return normalize.element({
+				...parts.wordCount.attrs(scope.id),
+				id: getWordCountId(scope),
+				"aria-hidden": "true"
+			});
+		}
+	};
+}
+
+//#endregion
+//#region Resources/Private/Primitives/Input/src/input.machine.ts
+const machine = createMachine({
+	initialState() {
+		return "idle";
+	},
+	context({ bindable, prop }) {
+		return { value: bindable(() => ({ defaultValue: prop("defaultValue") ?? "" })) };
+	},
+	refs() {
+		return { announce: null };
+	},
+	computed: {
+		count({ context }) {
+			return context.get("value").length;
+		},
+		countText({ prop, computed }) {
+			const wordCountTemplate = prop("translations")?.wordCount;
+			const maxLength = prop("maxLength");
+			if (!wordCountTemplate || maxLength == null) return null;
+			const count = computed("count");
+			return wordCountTemplate.replaceAll("%count%", String(count)).replaceAll("%max%", String(maxLength));
+		}
+	},
+	entry: ["syncValueFromDom"],
+	effects: ["manageLiveRegion"],
+	states: { idle: {} },
+	on: { VALUE_CHANGE: { actions: ["setValue"] } },
+	implementations: {
+		actions: {
+			setValue({ context, event, prop, refs, computed }) {
+				const value = event.value;
+				context.set("value", value);
+				prop("onValueChange")?.({ value });
+				const countText = computed("countText");
+				if (countText) refs.get("announce")?.(countText);
+			},
+			syncValueFromDom({ context, scope }) {
+				const inputEl = getInputEl(scope);
+				if (inputEl) context.set("value", inputEl.value);
+			}
+		},
+		effects: { manageLiveRegion({ refs, prop, computed }) {
+			if (prop("announce") === false || computed("countText") === null) return void 0;
+			const liveRegion = createLiveRegion({ level: "polite" });
+			const debounceMs = prop("announceDebounce") ?? 600;
+			const announce = debounceMs > 0 ? debounce((text) => liveRegion.announce(text), debounceMs) : (text) => liveRegion.announce(text);
+			refs.set("announce", announce);
+			return () => {
+				liveRegion.destroy();
+			};
+		} }
+	}
+});
+
+//#endregion
+//#region Resources/Private/Primitives/Input/src/input.props.ts
+const props = createProps()([
+	"id",
+	"ids",
+	"name",
+	"disabled",
+	"readOnly",
+	"required",
+	"invalid",
+	"defaultValue",
+	"maxLength",
+	"pattern",
+	"inputMode",
+	"translations",
+	"announce",
+	"announceDebounce",
+	"transform",
+	"onValueChange"
+]);
+const splitProps = createSplitProps(props);
+
+//#endregion
+//#region Resources/Private/Primitives/Input/Input.ts
+var Input = class extends FieldAwareComponent {
+	static componentName = "input";
+	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 [machineProps] = splitProps(props);
+		return new Machine$1(machine, machineProps);
+	}
+	initApi() {
+		return connect(this.machine.service, normalizeProps);
+	}
+	render() {
+		this.subscribeToFieldService();
+		const rootEl = this.hydrator.query("root");
+		if (rootEl) this.spreadProps(rootEl, this.api.getRootProps());
+		const wordCountEl = this.hydrator.query("wordCount");
+		const wordCountId = wordCountEl ? getWordCountId(this.machine.scope) : void 0;
+		const inputEl = this.hydrator.query("input");
+		if (inputEl) {
+			const describeIds = [this.field?.ariaDescribedby, wordCountId].filter(Boolean).join(" ");
+			const mergedProps = mergeProps(this.api.getInputProps(), { "aria-describedby": describeIds || void 0 });
+			this.spreadTextControlProps(inputEl, mergedProps);
+		}
+		const labelEl = this.hydrator.query("label");
+		if (labelEl) this.spreadProps(labelEl, this.api.getLabelProps());
+		if (wordCountEl) {
+			this.spreadProps(wordCountEl, this.api.getWordCountProps());
+			wordCountEl.textContent = this.api.countText ?? "";
+		}
+	}
+};
+
+//#endregion
+export { Input };

package/dist/menu.d.ts

@@ -0,0 +1,55 @@
+import { X as ConverterMachineProps, c as Machine, z as Component } from "./index-B06gIN_k.js";
+import * as _$_zag_js_types0 from "@zag-js/types";
+import * as menu from "@zag-js/menu";
+
+//#region Resources/Private/Primitives/Menu/Menu.d.ts
+declare const menuPropConverters: {
+  positioning: (positioning: menu.Props["positioning"]) => menu.PositioningOptions | undefined;
+};
+declare module 'fluid-primitives' {
+  interface HydrationPropsOverrides {
+    menu: ConverterMachineProps<typeof menuPropConverters>;
+  }
+}
+declare class Menu extends Component<menu.Props, menu.Api> {
+  static componentName: string;
+  /**
+   * Submenus that linked themselves to this menu (see {@see linkToParent}). Zag composes a
+   * `menu.triggerItem` from this menu's item props and the *child's* trigger props, and marks it
+   * with the child's own scope id - so each one is found through its child, not through this menu.
+   */
+  private submenus;
+  initMachine(props: menu.Props): Machine<any>;
+  initApi(): menu.Api<_$_zag_js_types0.PropTypes<{
+    [x: string]: any;
+  }>>;
+  init(): void;
+  private get parentId();
+  private getParentInstance;
+  /**
+   * Composes two independent `Menu` instances into a submenu relationship - see `menu.root`'s
+   * `parentId` prop and `menu.triggerItem`'s `childId` prop. Zag's own `setParent`/`setChild` API
+   * expects live `MenuService` instances, which only exist once both components have mounted, so
+   * this runs after `init()` (deferred via `setTimeout`, so it doesn't depend on mount order
+   * between the two) rather than as a machine prop.
+   */
+  private linkToParent;
+  destroy(): void;
+  render(): void;
+  /**
+   * Spreads `getTriggerItemProps(childApi)` onto the `menu.triggerItem` element of each linked
+   * submenu - it carries that submenu's own root id, so the child finds it with its own
+   * `query('triggerItem')`.
+   */
+  private renderTriggerItems;
+  /**
+   * Zag's menu machine doesn't own checked state for checkbox/radio items itself (unlike
+   * RadioGroup/CheckboxGroup) - it only calls back `onCheckedChange` with the next value on
+   * click. `data-state` is therefore the source of truth across renders: each render reads it,
+   * `onCheckedChange` updates it (also unchecking radio siblings sharing the same `name`), then
+   * re-renders so the new state is spread onto the DOM again.
+   */
+  private renderOptionItem;
+}
+//#endregion
+export { Menu };

package/dist/menu.js

@@ -0,0 +1,144 @@
+import { K as registerClientPropConverters, a as normalizeProps, at as Machine, rt as Component } from "./Client-HrMIqv7d.js";
+import * as menu from "@zag-js/menu";
+
+//#region Resources/Private/Primitives/Menu/Menu.ts
+registerClientPropConverters("menu", { positioning: (positioning) => positioning });
+var Menu = class extends Component {
+	static componentName = "menu";
+	/**
+	* Submenus that linked themselves to this menu (see {@see linkToParent}). Zag composes a
+	* `menu.triggerItem` from this menu's item props and the *child's* trigger props, and marks it
+	* with the child's own scope id - so each one is found through its child, not through this menu.
+	*/
+	submenus = /* @__PURE__ */ new Set();
+	initMachine(props) {
+		const [menuProps] = menu.splitProps(props);
+		return new Machine(menu.machine, menuProps);
+	}
+	initApi() {
+		return menu.connect(this.machine.service, normalizeProps);
+	}
+	init() {
+		super.init();
+		this.linkToParent();
+	}
+	get parentId() {
+		return this.userProps.parentId;
+	}
+	getParentInstance() {
+		return this.parentId ? this.getPeerInstance(this.parentId) ?? null : null;
+	}
+	/**
+	* Composes two independent `Menu` instances into a submenu relationship - see `menu.root`'s
+	* `parentId` prop and `menu.triggerItem`'s `childId` prop. Zag's own `setParent`/`setChild` API
+	* expects live `MenuService` instances, which only exist once both components have mounted, so
+	* this runs after `init()` (deferred via `setTimeout`, so it doesn't depend on mount order
+	* between the two) rather than as a machine prop.
+	*/
+	linkToParent() {
+		if (!this.parentId) return;
+		setTimeout(() => {
+			const parent = this.getParentInstance();
+			if (!parent) return;
+			parent.submenus.add(this);
+			parent.api.setChild(this.machine.service);
+			this.api.setParent(parent.machine.service);
+			parent.refresh();
+			this.machine.subscribe(() => parent.refresh());
+		});
+	}
+	destroy() {
+		this.getParentInstance()?.submenus.delete(this);
+		super.destroy();
+	}
+	render() {
+		this.spreadPropsByOptionalValue("trigger", ({ value }) => this.api.getTriggerProps({ value }));
+		this.spreadPropsByOptionalValue("contextTrigger", ({ value }) => this.api.getContextTriggerProps({ value }));
+		const indicatorEl = this.hydrator.query("indicator");
+		if (indicatorEl) this.spreadProps(indicatorEl, this.api.getIndicatorProps());
+		const positionerEl = this.hydrator.query("positioner");
+		if (positionerEl) this.spreadProps(positionerEl, this.api.getPositionerProps());
+		const arrowEl = this.hydrator.query("arrow");
+		if (arrowEl) this.spreadProps(arrowEl, this.api.getArrowProps());
+		const arrowTipEl = this.hydrator.query("arrowTip");
+		if (arrowTipEl) this.spreadProps(arrowTipEl, this.api.getArrowTipProps());
+		const contentEl = this.hydrator.query("content");
+		if (contentEl) this.spreadProps(contentEl, this.api.getContentProps());
+		this.spreadPropsByValue("itemGroup", ({ value }) => this.api.getItemGroupProps({ id: value }));
+		this.spreadPropsByValue("itemGroupLabel", ({ value }) => this.api.getItemGroupLabelProps({ htmlFor: value }));
+		this.spreadPropsByOptionalValue("separator", () => this.api.getSeparatorProps());
+		this.spreadPropsByValue("item", ({ value, el }) => {
+			if (el.hasAttribute("data-menu-trigger-item")) return;
+			if (el.dataset.type) {
+				this.renderOptionItem(el);
+				return;
+			}
+			return this.api.getItemProps({
+				value,
+				disabled: el.hasAttribute("data-disabled"),
+				valueText: el.dataset.valuetext
+			});
+		});
+		this.renderTriggerItems();
+	}
+	/**
+	* Spreads `getTriggerItemProps(childApi)` onto the `menu.triggerItem` element of each linked
+	* submenu - it carries that submenu's own root id, so the child finds it with its own
+	* `query('triggerItem')`.
+	*/
+	renderTriggerItems() {
+		this.submenus.forEach((child) => {
+			if (!child.machine.context.get("isSubmenu")) return;
+			const el = child.hydrator.query("triggerItem");
+			if (el) this.spreadProps(el, this.api.getTriggerItemProps(child.api));
+		});
+	}
+	/**
+	* Zag's menu machine doesn't own checked state for checkbox/radio items itself (unlike
+	* RadioGroup/CheckboxGroup) - it only calls back `onCheckedChange` with the next value on
+	* click. `data-state` is therefore the source of truth across renders: each render reads it,
+	* `onCheckedChange` updates it (also unchecking radio siblings sharing the same `name`), then
+	* re-renders so the new state is spread onto the DOM again.
+	*/
+	renderOptionItem(el) {
+		const value = el.dataset.value;
+		if (value === void 0) return;
+		const type = el.dataset.type === "radio" ? "radio" : "checkbox";
+		const disabled = el.hasAttribute("data-disabled");
+		const valueText = el.dataset.valuetext;
+		const name = el.dataset.name;
+		const checked = el.dataset.state === "checked";
+		const optionProps = this.api.getOptionItemProps({
+			type,
+			value,
+			checked,
+			disabled,
+			valueText,
+			onCheckedChange: (nextChecked) => {
+				if (type === "radio" && name) this.hydrator.queryAll("item").forEach((sibling) => {
+					if (sibling.dataset.name === name) sibling.dataset.state = sibling === el ? "checked" : "unchecked";
+				});
+				else el.dataset.state = nextChecked ? "checked" : "unchecked";
+				this.render();
+			}
+		});
+		this.spreadProps(el, optionProps);
+		const indicatorEl = this.hydrator.query("itemIndicator", el);
+		if (indicatorEl) this.spreadProps(indicatorEl, this.api.getItemIndicatorProps({
+			value,
+			checked,
+			disabled,
+			valueText
+		}));
+		const textEl = this.hydrator.query("itemText", el);
+		if (textEl) this.spreadProps(textEl, this.api.getItemTextProps({
+			value,
+			checked,
+			disabled,
+			valueText
+		}));
+	}
+};
+
+//#endregion
+export { Menu };

package/dist/navigation-menu.d.ts

@@ -1,10 +1,10 @@
-import { a as Machine, f as Component } from "./index-B8JCdyld.js";
-import * as navigationMenu from "@zag-js/navigation-menu";
+import { c as Machine, z as Component } from "./index-B06gIN_k.js";
 import * as _$_zag_js_types0 from "@zag-js/types";
+import * as navigationMenu from "@zag-js/navigation-menu";
 
 //#region Resources/Private/Primitives/NavigationMenu/NavigationMenu.d.ts
 declare class NavigationMenu extends Component<navigationMenu.Props, navigationMenu.Api> {
-  static name: string;
+  static componentName: string;
   initMachine(props: navigationMenu.Props): Machine<any>;
   initApi(): navigationMenu.Api<_$_zag_js_types0.PropTypes<{
     [x: string]: any;

package/dist/navigation-menu.js

@@ -1,68 +1,54 @@
-import { a as Machine, p as Component, r as normalizeProps } from "./Client-C51NSHxg.js";
+import { a as normalizeProps, at as Machine, rt as Component } from "./Client-HrMIqv7d.js";
 import * as navigationMenu from "@zag-js/navigation-menu";
 
 //#region Resources/Private/Primitives/NavigationMenu/NavigationMenu.ts
 var NavigationMenu = class extends Component {
-	static name = "navigation-menu";
+	static componentName = "navigationMenu";
 	initMachine(props) {
-		return new Machine(navigationMenu.machine, props);
+		const [machineProps] = navigationMenu.splitProps(props);
+		return new Machine(navigationMenu.machine, machineProps);
 	}
 	initApi() {
 		return navigationMenu.connect(this.machine.service, normalizeProps);
 	}
 	render() {
-		const rootEl = this.getElement("root");
+		const rootEl = this.hydrator.query("root");
 		if (rootEl) this.spreadProps(rootEl, this.api.getRootProps());
-		const listEl = this.getElement("list");
+		const listEl = this.hydrator.query("list");
 		if (listEl) this.spreadProps(listEl, this.api.getListProps());
-		this.getElement("indicator-track");
-		this.getElements("item").forEach((itemEl) => {
-			this.spreadProps(itemEl, this.api.getItemProps({
-				value: itemEl.dataset.value,
-				disabled: itemEl.hasAttribute("data-disabled")
-			}));
-		});
-		this.getElements("trigger").forEach((triggerEl) => {
-			this.spreadProps(triggerEl, this.api.getTriggerProps({
-				value: triggerEl.dataset.value,
-				disabled: triggerEl.hasAttribute("data-disabled")
-			}));
-		});
-		this.getElements("trigger-proxy").forEach((triggerProxyEl) => {
-			this.spreadProps(triggerProxyEl, this.api.getTriggerProxyProps({ value: triggerProxyEl.dataset.value }));
-		});
-		this.getElements("viewport-proxy").forEach((viewportProxyEl) => {
-			this.spreadProps(viewportProxyEl, this.api.getViewportProxyProps({ value: viewportProxyEl.dataset.value }));
-		});
-		this.getElements("content").forEach((contentEl) => {
-			this.spreadProps(contentEl, this.api.getContentProps({ value: contentEl.dataset.value }));
-		});
-		this.getElements("link").forEach((linkEl) => {
-			this.spreadProps(linkEl, this.api.getLinkProps({
-				value: linkEl.dataset.value,
-				current: linkEl.hasAttribute("data-current")
-			}));
-		});
-		const indicatorEl = this.getElement("indicator");
+		this.spreadPropsByValue("item", ({ el, value }) => this.api.getItemProps({
+			value,
+			disabled: el.hasAttribute("data-disabled")
+		}));
+		this.spreadPropsByValue("trigger", ({ el, value }) => this.api.getTriggerProps({
+			value,
+			disabled: el.hasAttribute("data-disabled")
+		}));
+		this.spreadPropsByValue("triggerProxy", ({ value }) => this.api.getTriggerProxyProps({ value }));
+		this.spreadPropsByValue("viewportProxy", ({ value }) => this.api.getViewportProxyProps({ value }));
+		this.spreadPropsByValue("content", ({ value }) => this.api.getContentProps({ value }));
+		this.spreadPropsByValue("link", ({ el, value }) => this.api.getLinkProps({
+			value,
+			current: el.hasAttribute("data-current")
+		}));
+		const indicatorEl = this.hydrator.query("indicator");
 		if (indicatorEl) this.spreadProps(indicatorEl, this.api.getIndicatorProps());
-		const arrowEl = this.getElement("arrow");
+		const arrowEl = this.hydrator.query("arrow");
 		if (arrowEl) this.spreadProps(arrowEl, this.api.getArrowProps());
-		const viewportPositionerEl = this.getElement("viewport-positioner");
+		const viewportPositionerEl = this.hydrator.query("viewportPositioner");
 		if (viewportPositionerEl) {
 			const align = viewportPositionerEl.dataset.align || void 0;
 			this.spreadProps(viewportPositionerEl, this.api.getViewportPositionerProps({ align }));
 		}
-		const viewportEl = this.getElement("viewport");
+		const viewportEl = this.hydrator.query("viewport");
 		if (viewportEl) {
 			const align = viewportEl.dataset.align || void 0;
 			this.spreadProps(viewportEl, this.api.getViewportProps({ align }));
 		}
-		this.getElements("item-indicator").forEach((itemIndicatorEl) => {
-			this.spreadProps(itemIndicatorEl, this.api.getItemIndicatorProps({
-				value: itemIndicatorEl.dataset.value,
-				disabled: itemIndicatorEl.hasAttribute("data-disabled")
-			}));
-		});
+		this.spreadPropsByValue("itemIndicator", ({ el, value }) => this.api.getItemIndicatorProps({
+			value,
+			disabled: el.hasAttribute("data-disabled")
+		}));
 	}
 };
 

package/dist/number-input.d.ts

@@ -1,11 +1,20 @@
-import { a as Machine, d as FieldMachine, u as FieldAwareComponent } from "./index-B8JCdyld.js";
-import * as numberInput from "@zag-js/number-input";
+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 numberInput from "@zag-js/number-input";
 
 //#region Resources/Private/Primitives/NumberInput/NumberInput.d.ts
+declare const numberInputPropConverters: {
+  formatOptions: (formatOptions: numberInput.Props["formatOptions"]) => Intl.NumberFormatOptions | undefined;
+};
+declare module 'fluid-primitives' {
+  interface HydrationPropsOverrides {
+    numberInput: ConverterMachineProps<typeof numberInputPropConverters>;
+  }
+}
 declare class NumberInput extends FieldAwareComponent<numberInput.Props, numberInput.Api> {
-  static name: string;
-  propsWithField(props: numberInput.Props, fieldMachine: FieldMachine): numberInput.Props;
+  static componentName: string;
+  propsWithField(props: numberInput.Props, field: FieldClientApi): numberInput.Props;
+  transformProps(props: numberInput.Props): numberInput.Props;
   initMachine(props: numberInput.Props): Machine<any>;
   initApi(): numberInput.Api<_$_zag_js_types0.PropTypes<{
     [x: string]: any;