fluid-primitives 0.19.1 → 1.0.0-beta.1

package/dist/slider.js

@@ -0,0 +1,71 @@
+import { K as registerClientPropConverters, a as normalizeProps, at as Machine, o as mergeProps, s as FieldAwareComponent } from "./Client-HrMIqv7d.js";
+import * as slider from "@zag-js/slider";
+
+//#region Resources/Private/Primitives/Slider/Slider.ts
+registerClientPropConverters("slider", { thumbSize: (thumbSize) => thumbSize });
+var Slider = class extends FieldAwareComponent {
+	static componentName = "slider";
+	propsWithField(props, field) {
+		return {
+			...props,
+			disabled: props.disabled ?? field.disabled,
+			readOnly: props.readOnly ?? field.readOnly,
+			invalid: props.invalid ?? field.invalid,
+			name: props.name ?? field.name
+		};
+	}
+	initMachine(props) {
+		props = this.withFieldProps(props);
+		const [machineProps] = slider.splitProps(props);
+		return new Machine(slider.machine, machineProps);
+	}
+	initApi() {
+		return slider.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 valueTextEl = this.hydrator.query("valueText");
+		if (valueTextEl) {
+			this.spreadProps(valueTextEl, this.api.getValueTextProps());
+			valueTextEl.textContent = this.api.value.join(" - ");
+		}
+		const trackEl = this.hydrator.query("track");
+		if (trackEl) this.spreadProps(trackEl, this.api.getTrackProps());
+		const rangeEl = this.hydrator.query("range");
+		if (rangeEl) this.spreadProps(rangeEl, this.api.getRangeProps());
+		const controlEl = this.hydrator.query("control");
+		if (controlEl) this.spreadProps(controlEl, this.api.getControlProps());
+		const markerGroupEl = this.hydrator.query("markerGroup");
+		if (markerGroupEl) this.spreadProps(markerGroupEl, this.api.getMarkerGroupProps());
+		this.hydrator.queryAll("thumb").forEach((thumbEl) => {
+			const index = Number(thumbEl.dataset.value ?? 0);
+			const name = thumbEl.dataset.name;
+			const thumbProps = mergeProps(this.api.getThumbProps({
+				index,
+				name
+			}), {
+				"aria-describedby": this.field?.ariaDescribedby,
+				"aria-invalid": this.field?.invalid || void 0
+			});
+			this.spreadProps(thumbEl, thumbProps);
+			const hiddenInputEl = this.hydrator.query("hiddenInput", thumbEl);
+			if (hiddenInputEl) this.spreadProps(hiddenInputEl, this.api.getHiddenInputProps({
+				index,
+				name
+			}));
+		});
+		this.spreadPropsByValue("marker", ({ value }) => this.api.getMarkerProps({ value: Number(value) }));
+		this.hydrator.queryAll("draggingIndicator").forEach((el) => {
+			const index = Number(el.dataset.value ?? 0);
+			this.spreadProps(el, this.api.getDraggingIndicatorProps({ index }));
+			el.textContent = String(this.api.getThumbValue(index));
+		});
+	}
+};
+
+//#endregion
+export { Slider };

package/dist/switch.d.ts

@@ -1,11 +1,11 @@
-import { a as Machine, d as FieldMachine, u as FieldAwareComponent } from "./index-B8JCdyld.js";
-import * as zagSwitch from "@zag-js/switch";
+import { 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 zagSwitch from "@zag-js/switch";
 
 //#region Resources/Private/Primitives/Switch/Switch.d.ts
 declare class Switch extends FieldAwareComponent<zagSwitch.Props, zagSwitch.Api> {
-  static name: string;
-  propsWithField(props: zagSwitch.Props, fieldMachine: FieldMachine): zagSwitch.Props;
+  static componentName: string;
+  propsWithField(props: zagSwitch.Props, field: FieldClientApi): zagSwitch.Props;
   initMachine(props: zagSwitch.Props): Machine<any>;
   initApi(): zagSwitch.Api<_$_zag_js_types0.PropTypes<{
     [x: string]: any;

package/dist/switch.js

@@ -1,59 +1,50 @@
-import { a as Machine, d as FieldAwareComponent, i as mergeProps, r as normalizeProps } from "./Client-C51NSHxg.js";
-import { a as getLabelId, t as getControlId } from "./field.dom-CJQXpQbZ.js";
+import { a as normalizeProps, at as Machine, o as mergeProps, s as FieldAwareComponent } from "./Client-HrMIqv7d.js";
 import * as zagSwitch from "@zag-js/switch";
 
 //#region Resources/Private/Primitives/Switch/Switch.ts
 var Switch = class extends FieldAwareComponent {
-	static name = "switch";
-	propsWithField(props, fieldMachine) {
+	static componentName = "switch";
+	propsWithField(props, field) {
 		return {
 			...props,
-			disabled: props.disabled ?? fieldMachine.context.get("disabled"),
-			readOnly: props.readOnly ?? fieldMachine.context.get("readOnly"),
-			required: props.required ?? fieldMachine.context.get("required"),
-			invalid: props.invalid ?? fieldMachine.context.get("invalid"),
-			name: props.name ?? fieldMachine.prop("name"),
-			ids: {
-				...props.ids,
-				label: getLabelId(fieldMachine.scope),
-				hiddenInput: getControlId(fieldMachine.scope)
-			}
+			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);
-		return new Machine(zagSwitch.machine, props);
+		const [machineProps] = zagSwitch.splitProps(props);
+		return new Machine(zagSwitch.machine, machineProps);
 	}
 	initApi() {
 		return zagSwitch.connect(this.machine.service, normalizeProps);
 	}
 	render() {
 		this.subscribeToFieldService();
-		const rootEl = this.getElement("root");
+		const rootEl = this.hydrator.query("root");
 		if (rootEl) this.spreadProps(rootEl, this.api.getRootProps());
-		const labelEl = this.getElement("label");
+		const labelEl = this.hydrator.query("label");
 		if (labelEl) this.spreadProps(labelEl, this.api.getLabelProps());
-		const controlEl = this.getElement("control");
+		const controlEl = this.hydrator.query("control");
 		if (controlEl) this.spreadProps(controlEl, this.api.getControlProps());
-		const thumbEl = this.getElement("thumb");
+		const thumbEl = this.hydrator.query("thumb");
 		if (thumbEl) this.spreadProps(thumbEl, this.api.getThumbProps());
-		const hiddenInputEl = this.getElement("hidden-input");
+		const hiddenInputEl = this.hydrator.query("hiddenInput");
 		if (hiddenInputEl) {
-			const mergedProps = mergeProps(this.api.getHiddenInputProps(), { "aria-describedby": this.fieldMachine?.context.get("describeIds") || void 0 });
+			const mergedProps = mergeProps(this.api.getHiddenInputProps(), { "aria-describedby": this.field?.ariaDescribedby });
 			this.spreadProps(hiddenInputEl, mergedProps);
 		}
-		const checkedIndicatorEl = this.getElement("indicator-checked");
-		if (checkedIndicatorEl) this.spreadProps(checkedIndicatorEl, normalizeProps.element({
-			"aria-hidden": true,
-			hidden: this.api.checked ? void 0 : true,
-			"data-state": "checked"
-		}));
-		const uncheckedIndicatorEl = this.getElement("indicator-unchecked");
-		if (uncheckedIndicatorEl) this.spreadProps(uncheckedIndicatorEl, normalizeProps.element({
-			"aria-hidden": true,
-			hidden: this.api.checked ? true : void 0,
-			"data-state": "unchecked"
-		}));
+		this.spreadPropsByValue("indicator", ({ value }) => {
+			const isActive = value === "checked" === this.api.checked;
+			return normalizeProps.element({
+				"aria-hidden": true,
+				hidden: isActive ? void 0 : true,
+				"data-state": value
+			});
+		});
 	}
 };
 

package/dist/tabs.d.ts

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

package/dist/tabs.js

@@ -1,30 +1,27 @@
-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 tabs from "@zag-js/tabs";
 
 //#region Resources/Private/Primitives/Tabs/Tabs.ts
 var Tabs = class extends Component {
-	static name = "tabs";
+	static componentName = "tabs";
 	initMachine(props) {
-		return new Machine(tabs.machine, props);
+		const [machineProps] = tabs.splitProps(props);
+		return new Machine(tabs.machine, machineProps);
 	}
 	initApi() {
 		return tabs.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.getElements("trigger").forEach((triggerEl) => {
-			this.spreadProps(triggerEl, this.api.getTriggerProps({
-				value: triggerEl.dataset.value,
-				disabled: triggerEl.hasAttribute("data-disabled")
-			}));
-		});
-		this.getElements("content").forEach((contentEl) => {
-			this.spreadProps(contentEl, this.api.getContentProps({ value: contentEl.dataset.value }));
-		});
-		const indicatorEl = this.getElement("indicator");
+		this.spreadPropsByValue("trigger", ({ el, value }) => this.api.getTriggerProps({
+			value,
+			disabled: el.hasAttribute("data-disabled")
+		}));
+		this.spreadPropsByValue("content", ({ value }) => this.api.getContentProps({ value }));
+		const indicatorEl = this.hydrator.query("indicator");
 		if (indicatorEl) this.spreadProps(indicatorEl, this.api.getIndicatorProps());
 	};
 };

package/dist/textarea.d.ts

@@ -0,0 +1,101 @@
+import { b as FieldClientApi, c as Machine$1, y as FieldAwareComponent } from "./index-B06gIN_k.js";
+import { EventObject } from "@zag-js/core";
+import { PropTypes } from "@zag-js/types";
+
+//#region Resources/Private/Primitives/Textarea/src/textarea.types.d.ts
+interface TextareaTranslations {
+  /**
+   * 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;
+}
+type TextareaSubmitOn = 'enter' | 'mod+enter';
+interface TextareaProps {
+  /** The unique identifier of the textarea. */
+  id: string;
+  /** The ids of the parts other elements reference: `textarea` (the `for` of its label) and `wordCount`. */
+  ids?: Record<string, string>;
+  /** The name of the textarea, as it is submitted with the form. Taken from the closest field. */
+  name?: string;
+  /** Whether the textarea is disabled. Taken from the closest field. */
+  disabled?: boolean;
+  /** Whether the textarea is read-only. Taken from the closest field. */
+  readOnly?: boolean;
+  /** Whether the textarea is required. Taken from the closest field. */
+  required?: boolean;
+  /** Whether the textarea is invalid. Taken from the closest field. */
+  invalid?: boolean;
+  /** The initial value of the textarea. */
+  defaultValue?: string;
+  /** The most characters allowed. It also drives the word count, e.g. `42 / 250 characters`. */
+  maxLength?: number;
+  /** The number of visible lines. */
+  rows?: number;
+  /**
+   * Submits the closest `<form>` on a keypress instead of inserting a newline. `'enter'` submits on
+   * Enter, Shift+Enter still inserts a newline. `'mod+enter'` submits on Cmd or Ctrl+Enter, Enter
+   * always inserts a newline. By default Enter is never intercepted.
+   */
+  submitOn?: TextareaSubmitOn;
+  /** The localized texts of the textarea. */
+  translations?: TextareaTranslations;
+  /**
+   * 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 textarea, e.g. trimmed. The cursor position is kept. It cannot be set from a Fluid
+   * template, only by constructing `Textarea` in your own entry file.
+   */
+  transform?: (value: string, event: Event) => string;
+  /** Called when the value changes. */
+  onValueChange?: (details: {
+    value: string;
+  }) => void;
+}
+interface TextareaHandle {
+  /** The current value of the textarea. */
+  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 textarea is disabled. */
+  disabled: boolean;
+  /** Whether the textarea is read-only. */
+  readOnly: boolean;
+  /** Whether the textarea is required. */
+  required: boolean;
+  /** Whether the textarea is invalid. */
+  invalid: boolean;
+  /** The name of the textarea. */
+  name: string | undefined;
+  /** The most characters allowed. */
+  maxLength: number | undefined;
+}
+interface TextareaApi extends TextareaHandle {
+  getRootProps(): PropTypes['element'];
+  getTextareaProps(): PropTypes['textarea'];
+  getLabelProps(): PropTypes['label'];
+  getWordCountProps(): PropTypes['element'];
+}
+//#endregion
+//#region Resources/Private/Primitives/Textarea/Textarea.d.ts
+declare class Textarea extends FieldAwareComponent<TextareaProps, TextareaApi> {
+  static componentName: string;
+  propsWithField(props: TextareaProps, field: FieldClientApi): TextareaProps;
+  initMachine(props: TextareaProps): Machine$1<any>;
+  initApi(): TextareaApi;
+  render(): void;
+}
+//#endregion
+export { Textarea };

package/dist/textarea.js

@@ -0,0 +1,231 @@
+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/Textarea/src/textarea.anatomy.ts
+const anatomy = createAnatomy("textarea").parts("root", "label", "textarea", "wordCount");
+const parts = anatomy.build();
+
+//#endregion
+//#region Resources/Private/Primitives/Textarea/src/textarea.dom.ts
+const getTextareaId = (scope) => scope.ids?.textarea ?? `textarea:${scope.id}:textarea`;
+const getWordCountId = (scope) => scope.ids?.wordCount ?? `textarea:${scope.id}:wordCount`;
+const getTextareaEl = (scope) => scope.query(scope.selector(parts.textarea));
+
+//#endregion
+//#region Resources/Private/Primitives/Textarea/src/textarea.connect.ts
+function createTextareaHandle(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 = createTextareaHandle(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
+			});
+		},
+		getTextareaProps() {
+			return normalize.textarea({
+				...parts.textarea.attrs(scope.id),
+				id: getTextareaId(scope),
+				name: handle.name,
+				disabled: handle.disabled || void 0,
+				readOnly: handle.readOnly || void 0,
+				required: handle.required || void 0,
+				maxLength: handle.maxLength,
+				rows: prop("rows"),
+				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;
+							const { selectionStart, selectionEnd } = target;
+							target.value = value;
+							if (selectionStart != null) target.selectionStart = selectionStart;
+							if (selectionEnd != null) target.selectionEnd = selectionEnd;
+						}
+					}
+					send({
+						type: "VALUE_CHANGE",
+						value
+					});
+				},
+				onKeyDown(event) {
+					const submitOn = prop("submitOn");
+					if (!submitOn || event.key !== "Enter" || "isComposing" in event && event.isComposing) return;
+					const modPressed = event.metaKey || event.ctrlKey;
+					if (!(submitOn === "enter" && !event.shiftKey && !modPressed || submitOn === "mod+enter" && modPressed)) return;
+					event.preventDefault();
+					event.currentTarget.closest("form")?.requestSubmit();
+				}
+			});
+		},
+		getLabelProps() {
+			return normalize.label({
+				...parts.label.attrs(scope.id),
+				htmlFor: getTextareaId(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/Textarea/src/textarea.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 textareaEl = getTextareaEl(scope);
+				if (textareaEl) context.set("value", textareaEl.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/Textarea/src/textarea.props.ts
+const props = createProps()([
+	"id",
+	"ids",
+	"name",
+	"disabled",
+	"readOnly",
+	"required",
+	"invalid",
+	"defaultValue",
+	"maxLength",
+	"rows",
+	"submitOn",
+	"translations",
+	"announce",
+	"announceDebounce",
+	"transform",
+	"onValueChange"
+]);
+const splitProps = createSplitProps(props);
+
+//#endregion
+//#region Resources/Private/Primitives/Textarea/Textarea.ts
+var Textarea = class extends FieldAwareComponent {
+	static componentName = "textarea";
+	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 textareaEl = this.hydrator.query("textarea");
+		if (textareaEl) {
+			const describeIds = [this.field?.ariaDescribedby, wordCountId].filter(Boolean).join(" ");
+			const mergedProps = mergeProps(this.api.getTextareaProps(), { "aria-describedby": describeIds || void 0 });
+			this.spreadTextControlProps(textareaEl, 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 { Textarea };

package/dist/tooltip.d.ts

@@ -1,10 +1,18 @@
-import { a as Machine, f as Component } from "./index-B8JCdyld.js";
-import * as tooltip from "@zag-js/tooltip";
+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 tooltip from "@zag-js/tooltip";
 
 //#region Resources/Private/Primitives/Tooltip/Tooltip.d.ts
+declare const tooltipPropConverters: {
+  positioning: (positioning: tooltip.Props["positioning"]) => tooltip.PositioningOptions | undefined;
+};
+declare module 'fluid-primitives' {
+  interface HydrationPropsOverrides {
+    tooltip: ConverterMachineProps<typeof tooltipPropConverters>;
+  }
+}
 declare class Tooltip extends Component<tooltip.Props, tooltip.Api> {
-  static name: string;
+  static componentName: string;
   initMachine(props: tooltip.Props): Machine<any>;
   initApi(): tooltip.Api<_$_zag_js_types0.PropTypes<{
     [x: string]: any;

package/dist/tooltip.js

@@ -1,17 +1,19 @@
-import { a as Machine, p as Component, r as normalizeProps } from "./Client-C51NSHxg.js";
+import { K as registerClientPropConverters, a as normalizeProps, at as Machine, rt as Component } from "./Client-HrMIqv7d.js";
 import * as tooltip from "@zag-js/tooltip";
 
 //#region Resources/Private/Primitives/Tooltip/Tooltip.ts
+registerClientPropConverters("tooltip", { positioning: (positioning) => positioning });
 var Tooltip = class extends Component {
-	static name = "tooltip";
+	static componentName = "tooltip";
 	initMachine(props) {
+		const [machineProps] = tooltip.splitProps(props);
 		return new Machine(tooltip.machine, {
 			interactive: true,
-			...props,
+			...machineProps,
 			positioning: {
 				placement: "top",
 				gutter: 6,
-				...props.positioning
+				...machineProps.positioning
 			}
 		});
 	}
@@ -19,15 +21,14 @@ var Tooltip = class extends Component {
 		return tooltip.connect(this.machine.service, normalizeProps);
 	}
 	render() {
-		const triggerEl = this.getElement("trigger");
-		if (triggerEl) this.spreadProps(triggerEl, this.api.getTriggerProps());
-		const positionerEl = this.getElement("positioner");
+		this.spreadPropsByOptionalValue("trigger", ({ value }) => this.api.getTriggerProps({ value }));
+		const positionerEl = this.hydrator.query("positioner");
 		if (positionerEl) this.spreadProps(positionerEl, this.api.getPositionerProps());
-		const arrowEl = this.getElement("arrow");
+		const arrowEl = this.hydrator.query("arrow");
 		if (arrowEl) this.spreadProps(arrowEl, this.api.getArrowProps());
-		const arrowTipEl = this.getElement("arrow-tip");
+		const arrowTipEl = this.hydrator.query("arrowTip");
 		if (arrowTipEl) this.spreadProps(arrowTipEl, this.api.getArrowTipProps());
-		const contentEl = this.getElement("content");
+		const contentEl = this.hydrator.query("content");
 		if (contentEl) this.spreadProps(contentEl, this.api.getContentProps());
 	}
 };