fluid-primitives 0.19.1 → 1.0.0-beta.1

package/dist/clipboard.js

@@ -1,34 +1,32 @@
-import { a as Machine, i as mergeProps, p as Component, r as normalizeProps } from "./Client-C51NSHxg.js";
+import { a as normalizeProps, at as Machine, o as mergeProps, rt as Component } from "./Client-HrMIqv7d.js";
 import * as clipboard from "@zag-js/clipboard";
 
 //#region Resources/Private/Primitives/Clipboard/Clipboard.ts
 var Clipboard = class extends Component {
-	static name = "clipboard";
+	static componentName = "clipboard";
+	translations;
 	initMachine(props) {
-		return new Machine(clipboard.machine, {
-			...props,
-			translations: void 0
-		});
+		const { translations, ...rest } = props;
+		this.translations = translations;
+		const [machineProps] = clipboard.contextProps(rest);
+		return new Machine(clipboard.machine, machineProps);
 	}
 	initApi() {
 		return clipboard.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 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 inputEl = this.getElement("input");
+		const inputEl = this.hydrator.query("input");
 		if (inputEl) this.spreadProps(inputEl, this.api.getInputProps());
-		const indicatorCopiedEl = this.getElement("indicator-copied");
-		if (indicatorCopiedEl) this.spreadProps(indicatorCopiedEl, this.api.getIndicatorProps({ copied: true }));
-		const indicatorIdleEl = this.getElement("indicator-idle");
-		if (indicatorIdleEl) this.spreadProps(indicatorIdleEl, this.api.getIndicatorProps({ copied: false }));
-		const triggerEl = this.getElement("trigger");
+		this.spreadPropsByValue("indicator", ({ value }) => this.api.getIndicatorProps({ copied: value === "copied" }));
+		const triggerEl = this.hydrator.query("trigger");
 		if (triggerEl) {
-			const translations = this.userProps?.translations;
+			const translations = this.translations;
 			const mergedProps = mergeProps(this.api.getTriggerProps(), { "aria-label": this.api.copied ? translations?.triggerLabelCopied || null : translations?.triggerLabelIdle || null });
 			this.spreadProps(triggerEl, mergedProps);
 		}

package/dist/collapsible.d.ts

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

package/dist/collapsible.js

@@ -1,34 +1,30 @@
-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 collapsible from "@zag-js/collapsible";
 
 //#region Resources/Private/Primitives/Collapsible/Collapsible.ts
 var Collapsible = class extends Component {
-	static name = "collapsible";
+	static componentName = "collapsible";
 	initMachine(props) {
-		return new Machine(collapsible.machine, props);
+		const [machineProps] = collapsible.splitProps(props);
+		return new Machine(collapsible.machine, machineProps);
 	}
 	initApi() {
 		return collapsible.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());
-		this.getElements("trigger").forEach((triggerEl) => {
+		this.hydrator.queryAll("trigger").forEach((triggerEl) => {
 			this.spreadProps(triggerEl, this.api.getTriggerProps());
 		});
-		this.getElements("indicator-open").forEach((openIndicatorEl) => {
-			this.spreadProps(openIndicatorEl, normalizeProps.element({
-				hidden: !this.api.open,
-				"data-state": "open"
-			}));
+		this.spreadPropsByValue("indicator", ({ value }) => {
+			const isActive = value === "open" === this.api.open;
+			return normalizeProps.element({
+				hidden: isActive ? void 0 : true,
+				"data-state": value
+			});
 		});
-		this.getElements("indicator-closed").forEach((closedIndicatorEl) => {
-			this.spreadProps(closedIndicatorEl, normalizeProps.element({
-				hidden: this.api.open,
-				"data-state": "closed"
-			}));
-		});
-		const contentEl = this.getElement("content");
+		const contentEl = this.hydrator.query("content");
 		if (contentEl) this.spreadProps(contentEl, this.api.getContentProps());
 	}
 };

package/dist/combobox.d.ts

@@ -0,0 +1,37 @@
+import { X as ConverterMachineProps, b as FieldClientApi, c as Machine, h as getListCollectionFromHydrationData, y as FieldAwareComponent } from "./index-B06gIN_k.js";
+import { CollectionItem, ListCollection } from "@zag-js/collection";
+import * as _$_zag_js_types0 from "@zag-js/types";
+import * as combobox from "@zag-js/combobox";
+
+//#region Resources/Private/Primitives/Combobox/Combobox.d.ts
+declare const comboboxPropConverters: {
+  collection: (collection: Parameters<typeof getListCollectionFromHydrationData>[0] | undefined) => ListCollection<unknown>;
+  positioning: (positioning: combobox.Props["positioning"]) => combobox.PositioningOptions | undefined;
+};
+declare module 'fluid-primitives' {
+  interface HydrationPropsOverrides {
+    combobox: ConverterMachineProps<typeof comboboxPropConverters>;
+  }
+}
+declare class Combobox extends FieldAwareComponent<combobox.Props, combobox.Api> {
+  static componentName: string;
+  private sourceCollection?;
+  propsWithField(props: combobox.Props, field: FieldClientApi): combobox.Props;
+  transformProps(props: combobox.Props): combobox.Props;
+  /**
+   * The full, unfiltered collection as it was first passed in - `render()` needs it to tell a
+   * static/server-rendered item apart from a dynamically-inserted (async) one (see the item
+   * callback below), and a consumer's own `onInputValueChange` needs it as the base to filter
+   * from or reset to.
+   */
+  getSourceCollection<T extends CollectionItem = CollectionItem>(): ListCollection<T>;
+  private getHiddenInputProps;
+  private syncHiddenInput;
+  initMachine(props: combobox.Props): Machine<any>;
+  initApi(): combobox.Api<_$_zag_js_types0.PropTypes<{
+    [x: string]: any;
+  }>, unknown>;
+  render(): void;
+}
+//#endregion
+export { Combobox };

package/dist/combobox.js

@@ -0,0 +1,151 @@
+import { $ as getListCollectionFromHydrationData, K as registerClientPropConverters, a as normalizeProps, at as Machine, o as mergeProps, s as FieldAwareComponent } from "./Client-HrMIqv7d.js";
+import { visuallyHiddenStyle } from "@zag-js/dom-query";
+import * as combobox from "@zag-js/combobox";
+
+//#region Resources/Private/Primitives/Combobox/Combobox.ts
+registerClientPropConverters("combobox", {
+	collection: (collection) => getListCollectionFromHydrationData(collection ?? { items: [] }),
+	positioning: (positioning) => positioning
+});
+var Combobox = class extends FieldAwareComponent {
+	static componentName = "combobox";
+	sourceCollection;
+	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
+		};
+	}
+	transformProps(props) {
+		return {
+			...props,
+			onSelect: (details) => {
+				this.hydrator.query("input")?.dispatchEvent(new Event("change", { bubbles: true }));
+				props?.onSelect?.(details);
+			}
+		};
+	}
+	/**
+	* The full, unfiltered collection as it was first passed in - `render()` needs it to tell a
+	* static/server-rendered item apart from a dynamically-inserted (async) one (see the item
+	* callback below), and a consumer's own `onInputValueChange` needs it as the base to filter
+	* from or reset to.
+	*/
+	getSourceCollection() {
+		if (this.sourceCollection) return this.sourceCollection;
+		const initialCollection = this.machine.prop("collection");
+		if (!initialCollection) throw new Error("Combobox source collection is not available.");
+		this.sourceCollection = initialCollection;
+		return initialCollection;
+	}
+	getHiddenInputProps(value, attrs) {
+		return normalizeProps.input({
+			type: "text",
+			"aria-hidden": true,
+			tabIndex: -1,
+			style: visuallyHiddenStyle,
+			name: attrs.name,
+			form: attrs.form,
+			disabled: attrs.disabled,
+			value,
+			onFocus: () => {
+				this.hydrator.query("input")?.focus({ preventScroll: true });
+			}
+		});
+	}
+	syncHiddenInput(attrs) {
+		const rootEl = this.hydrator.query("root");
+		if (!rootEl) return;
+		this.hydrator.queryAll("hiddenInput").forEach((el) => el.remove());
+		const values = this.api.value;
+		const inputValue = this.api.inputValue;
+		const isCustomValue = !!this.machine.prop("allowCustomValue") && inputValue.trim() !== "" && inputValue !== this.api.valueAsString;
+		(values.length > 0 ? values : isCustomValue ? [inputValue] : [""]).forEach((value) => {
+			const inputEl = this.doc.createElement("input");
+			this.hydrator.stamp(inputEl, "hiddenInput", value);
+			this.spreadProps(inputEl, this.getHiddenInputProps(value, attrs));
+			rootEl.appendChild(inputEl);
+		});
+	}
+	initMachine(props) {
+		props = this.withFieldProps(props);
+		const [machineProps] = combobox.splitProps(props);
+		return new Machine(combobox.machine, machineProps);
+	}
+	initApi() {
+		return combobox.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 controlEl = this.hydrator.query("control");
+		if (controlEl) this.spreadProps(controlEl, this.api.getControlProps());
+		const { name, form, ...inputProps } = this.api.getInputProps();
+		const inputEl = this.hydrator.query("input");
+		if (inputEl) {
+			const mergedProps = mergeProps(inputProps, { "aria-describedby": this.field?.ariaDescribedby });
+			this.spreadProps(inputEl, mergedProps);
+		}
+		this.syncHiddenInput({
+			name,
+			form,
+			disabled: inputProps.disabled
+		});
+		const triggerEl = this.hydrator.query("trigger");
+		if (triggerEl) this.spreadProps(triggerEl, this.api.getTriggerProps({ focusable: triggerEl.hasAttribute("data-focusable") }));
+		const clearTriggerEl = this.hydrator.query("clearTrigger");
+		if (clearTriggerEl) this.spreadProps(clearTriggerEl, this.api.getClearTriggerProps());
+		const positionerEl = this.hydrator.query("positioner");
+		if (positionerEl) this.spreadProps(positionerEl, this.api.getPositionerProps());
+		const contentEl = this.hydrator.query("content");
+		if (contentEl) this.spreadProps(contentEl, this.api.getContentProps());
+		const listEl = this.hydrator.query("list");
+		if (listEl) this.spreadProps(listEl, this.api.getListProps());
+		this.spreadPropsByValue("itemGroup", ({ value }) => {
+			return this.api.getItemGroupProps({ id: value });
+		});
+		this.spreadPropsByValue("itemGroupLabel", ({ value }) => {
+			return this.api.getItemGroupLabelProps({ htmlFor: value });
+		});
+		const sourceCollection = this.getSourceCollection();
+		const resolveItem = (value) => {
+			const sourceItem = sourceCollection.find(value);
+			return {
+				sourceItem,
+				item: sourceItem ?? this.api.collection.find(value)
+			};
+		};
+		this.spreadPropsByValue("item", ({ el, value }) => {
+			const { sourceItem, item } = resolveItem(value);
+			if (!item) return null;
+			el.hidden = sourceItem ? !this.api.collection.has(item.value) : false;
+			return this.api.getItemProps({ item });
+		});
+		this.spreadPropsByValue("itemText", ({ value }) => {
+			const { item } = resolveItem(value);
+			return item ? this.api.getItemTextProps({ item }) : null;
+		});
+		this.spreadPropsByValue("itemIndicator", ({ value }) => {
+			const { item } = resolveItem(value);
+			return item ? this.api.getItemIndicatorProps({ item }) : null;
+		});
+		this.hydrator.queryAll("itemGroup").forEach((itemGroupEl) => {
+			itemGroupEl.hidden = !this.hydrator.queryAll("item", itemGroupEl).some((itemEl) => !itemEl.hidden);
+		});
+		const hasVisibleItems = this.hydrator.queryAll("item").some((itemEl) => !itemEl.hidden);
+		if (contentEl) contentEl.toggleAttribute("data-empty", !hasVisibleItems);
+		if (listEl) listEl.toggleAttribute("data-empty", !hasVisibleItems);
+		const emptyEl = this.hydrator.query("empty");
+		if (emptyEl) emptyEl.hidden = hasVisibleItems;
+	}
+};
+
+//#endregion
+export { Combobox };

package/dist/date-picker.d.ts

@@ -0,0 +1,67 @@
+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 datePicker from "@zag-js/date-picker";
+import { DateView, IntlTranslations } from "@zag-js/date-picker";
+
+//#region Resources/Private/Primitives/DatePicker/src/date-picker.translations.d.ts
+/**
+ * The labels as PHP ships them: texts, with `%placeholders%` for what is only known when the
+ * label renders.
+ */
+type TranslationTexts = Record<string, string | undefined>;
+/**
+ * Zag's translations, plus the role descriptions it hard-codes in English.
+ * TODO: chakra-ui/zag#3421 makes them part of Zag's own translations.
+ */
+interface DatePickerTranslations extends IntlTranslations {
+  roleDescription?: {
+    content?: string;
+    table?: Partial<Record<DateView, string>>;
+  };
+}
+//#endregion
+//#region Resources/Private/Primitives/DatePicker/DatePicker.d.ts
+declare const datePickerPropConverters: {
+  min: (date?: string) => datePicker.DateValue | undefined;
+  max: (date?: string) => datePicker.DateValue | undefined;
+  defaultFocusedValue: (date?: string) => datePicker.DateValue | undefined;
+  defaultValue: (dates?: string[]) => datePicker.DateValue[] | undefined;
+  timeZone: (timeZone?: string) => string;
+  ids: ({
+    label,
+    input,
+    ...ids
+  }?: Record<string, string>) => datePicker.ElementIds;
+  translations: (texts: TranslationTexts | undefined, props: Record<string, unknown>) => DatePickerTranslations;
+  positioning: (positioning: datePicker.Props["positioning"]) => datePicker.PositioningOptions | undefined;
+};
+declare module 'fluid-primitives' {
+  interface HydrationPropsOverrides {
+    datePicker: ConverterMachineProps<typeof datePickerPropConverters>;
+  }
+}
+declare class DatePicker extends FieldAwareComponent<datePicker.Props, datePicker.Api> {
+  static componentName: string;
+  propsWithField(props: datePicker.Props, field: FieldClientApi): datePicker.Props;
+  transformProps(props: datePicker.Props): datePicker.Props;
+  initMachine(props: datePicker.Props): Machine<any>;
+  initApi(): datePicker.Api<_$_zag_js_types0.PropTypes<{
+    [x: string]: any;
+  }>>;
+  render(): void;
+  private renderHiddenInputs;
+  private renderTable;
+  private renderDayTable;
+  /** One `<tr>` per entry of `rows`, paired with the entry it renders. */
+  private renderRows;
+  private renderCell;
+  private renderSelect;
+  /**
+   * Makes `parentEl` hold exactly `count` children of `tag`: it keeps the ones already there,
+   * adds the missing ones and removes the extra ones. A child of another tag (the placeholder
+   * rows of a skeleton) is replaced.
+   */
+  private fitChildren;
+}
+//#endregion
+export { DatePicker };

package/dist/date-picker.js

@@ -0,0 +1,289 @@
+import { K as registerClientPropConverters, a as normalizeProps, at as Machine, o as mergeProps, s as FieldAwareComponent } from "./Client-HrMIqv7d.js";
+import { toZoned } from "@internationalized/date";
+import * as datePicker from "@zag-js/date-picker";
+
+//#region Resources/Private/Primitives/DatePicker/src/date-picker.translations.ts
+const capitalize = (word) => word.charAt(0).toUpperCase() + word.slice(1);
+const fill = (text, values) => text ? text.replace(/%(\w+)%/g, (_, key) => String(values[key] ?? "")) : void 0;
+/** `Date.toDateString()`, which is what Zag hands over for a preset, in the language of the locale. */
+const formatDay = (dateString, locale) => {
+	const date = new Date(dateString);
+	return Number.isNaN(date.getTime()) ? dateString : new Intl.DateTimeFormat(locale, { dateStyle: "long" }).format(date);
+};
+/**
+* Builds the translations Zag takes from the texts of the language file. Most of them are
+* functions of the date or of the view, which is why PHP can't send them as they are.
+*/
+function buildTranslations(texts = {}, locale = "en-US") {
+	const label = (key, values = {}) => fill(texts[key], values);
+	return {
+		clearTrigger: label("clearTrigger"),
+		monthSelect: label("monthSelect"),
+		yearSelect: label("yearSelect"),
+		content: label("content"),
+		weekColumnHeader: label("weekColumnHeader"),
+		trigger: (open) => label(open ? "triggerClose" : "triggerOpen"),
+		prevTrigger: (view) => label(`prevTrigger${capitalize(view)}`),
+		nextTrigger: (view) => label(`nextTrigger${capitalize(view)}`),
+		viewTrigger: (view, nextView) => label(nextView ? `viewTriggerTo${capitalize(nextView)}` : `viewTrigger${capitalize(view)}`),
+		presetTrigger: ([start = "", end = ""]) => label("presetTrigger", {
+			start: formatDay(start, locale),
+			end: formatDay(end, locale)
+		}),
+		weekNumberCell: (number) => label("weekNumberCell", { number }),
+		dayCell: (state) => label(state.unavailable ? "dayCellUnavailable" : state.firstInRange ? "dayCellRangeStart" : state.lastInRange ? "dayCellRangeEnd" : state.inRange ? "dayCellInRange" : state.selected ? "dayCellSelected" : "dayCell", { date: state.valueText }),
+		placeholder: () => ({
+			day: texts.placeholderDay || "dd",
+			month: texts.placeholderMonth || "mm",
+			year: texts.placeholderYear || "yyyy"
+		}),
+		roleDescription: {
+			content: texts.contentRoleDescription || void 0,
+			table: {
+				day: texts.tableRoleDescriptionDay || void 0,
+				month: texts.tableRoleDescriptionMonth || void 0,
+				year: texts.tableRoleDescriptionYear || void 0
+			}
+		}
+	};
+}
+/**
+* The placeholder of the input: the date pattern of the locale written with the letters of the
+* translation, e.g. `TT.MM.JJJJ`. Zag only knows the English ones.
+*/
+function getPlaceholder(translations, locale = "en-US") {
+	const letters = translations?.placeholder?.(locale);
+	if (!letters) return void 0;
+	return new Intl.DateTimeFormat(locale).formatToParts(/* @__PURE__ */ new Date()).map((part) => letters[part.type] ?? part.value).join("");
+}
+
+//#endregion
+//#region Resources/Private/Primitives/DatePicker/DatePicker.ts
+const parseDate = (date) => date ? datePicker.parse(date) : void 0;
+const indexedId = (id) => (index) => index === 0 ? id : `${id}:${index}`;
+registerClientPropConverters("datePicker", {
+	min: parseDate,
+	max: parseDate,
+	defaultFocusedValue: parseDate,
+	defaultValue: (dates) => dates ? datePicker.parse(dates) : void 0,
+	timeZone: (timeZone) => timeZone ?? Intl.DateTimeFormat().resolvedOptions().timeZone,
+	ids: ({ label, input, ...ids } = {}) => ({
+		...ids,
+		...label && { label: indexedId(label) },
+		...input && { input: indexedId(input) }
+	}),
+	translations: (texts, props) => buildTranslations(texts, props.locale),
+	positioning: (positioning) => positioning
+});
+var DatePicker = class extends FieldAwareComponent {
+	static componentName = "datePicker";
+	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
+		};
+	}
+	transformProps(props) {
+		return {
+			...props,
+			placeholder: props.placeholder ?? getPlaceholder(props.translations, props.locale),
+			onValueChange: (details) => {
+				this.hydrator.query("input")?.dispatchEvent(new Event("change", { bubbles: true }));
+				props.onValueChange?.(details);
+			}
+		};
+	}
+	initMachine(props) {
+		const [machineProps] = datePicker.splitProps(this.withFieldProps(props));
+		return new Machine(datePicker.machine, machineProps);
+	}
+	initApi() {
+		return datePicker.connect(this.machine.service, normalizeProps);
+	}
+	render() {
+		this.subscribeToFieldService();
+		const rootEl = this.hydrator.query("root");
+		if (rootEl) this.spreadProps(rootEl, this.api.getRootProps());
+		this.spreadPropsByOptionalValue("label", ({ value }) => this.api.getLabelProps({ index: Number(value ?? 0) }));
+		const controlEl = this.hydrator.query("control");
+		if (controlEl) this.spreadProps(controlEl, this.api.getControlProps());
+		this.spreadPropsByOptionalValue("input", ({ value }) => {
+			const { name, ...inputProps } = this.api.getInputProps({ index: Number(value ?? 0) });
+			return mergeProps(inputProps, { "aria-describedby": this.field?.ariaDescribedby });
+		});
+		this.renderHiddenInputs();
+		const clearTriggerEl = this.hydrator.query("clearTrigger");
+		if (clearTriggerEl) this.spreadProps(clearTriggerEl, this.api.getClearTriggerProps());
+		const triggerEl = this.hydrator.query("trigger");
+		if (triggerEl) this.spreadProps(triggerEl, this.api.getTriggerProps());
+		const positionerEl = this.hydrator.query("positioner");
+		if (positionerEl) {
+			const positionerProps = this.api.getPositionerProps();
+			if (this.api.inline) delete positionerProps.style;
+			this.spreadProps(positionerEl, positionerProps);
+		}
+		const roleDescription = this.userProps.translations?.roleDescription;
+		const contentEl = this.hydrator.query("content");
+		if (contentEl) this.spreadProps(contentEl, mergeProps(this.api.getContentProps(), { "aria-roledescription": roleDescription?.content }));
+		this.spreadPropsByValue("view", ({ value }) => this.api.getViewProps({ view: value }));
+		this.spreadPropsByValue("viewControl", ({ value }) => this.api.getViewControlProps({ view: value }));
+		this.spreadPropsByValue("viewTrigger", ({ value }) => this.api.getViewTriggerProps({ view: value }));
+		this.spreadPropsByValue("prevTrigger", ({ value }) => this.api.getPrevTriggerProps({ view: value }));
+		this.spreadPropsByValue("nextTrigger", ({ value }) => this.api.getNextTriggerProps({ view: value }));
+		this.spreadPropsByValue("presetTrigger", ({ value }) => this.api.getPresetTriggerProps({ value }));
+		const { start, end } = this.api.visibleRangeText;
+		const rangeText = start === end ? start : `${start} - ${end}`;
+		this.hydrator.queryAll("rangeText").forEach((rangeTextEl) => {
+			this.spreadProps(rangeTextEl, this.api.getRangeTextProps());
+			if (rangeTextEl.textContent !== rangeText) rangeTextEl.textContent = rangeText;
+		});
+		this.hydrator.queryAll("table").forEach((tableEl) => {
+			const view = tableEl.dataset.value;
+			const offset = Number(tableEl.dataset.offset ?? 0);
+			this.spreadProps(tableEl, mergeProps(this.api.getTableProps({
+				view,
+				id: offset ? String(offset) : void 0
+			}), {
+				"aria-roledescription": roleDescription?.table?.[view],
+				...view === "day" && { "aria-label": this.api.getOffset({ months: offset }).visibleRangeText.start }
+			}));
+			const headerEl = this.hydrator.query("tableHeader", tableEl);
+			const bodyEl = this.hydrator.query("tableBody", tableEl);
+			if (headerEl && bodyEl) this.renderTable(view, offset, headerEl, bodyEl);
+		});
+		const monthSelectEl = this.hydrator.query("monthSelect");
+		if (monthSelectEl) this.renderSelect(monthSelectEl, this.api.getMonthSelectProps(), this.api.getMonths(), this.api.visibleRange.start.month);
+		const yearSelectEl = this.hydrator.query("yearSelect");
+		if (yearSelectEl) this.renderSelect(yearSelectEl, this.api.getYearSelectProps(), this.api.getYears(), this.api.visibleRange.start.year);
+	}
+	renderHiddenInputs() {
+		const { serverTimeZone } = this.userProps;
+		const values = this.api.value.length > 0 ? this.api.value.map((date) => toZoned(date, serverTimeZone).toString().replace(/\[.*\]$/, "")) : [""];
+		const inputEls = this.hydrator.queryAll("hiddenInput");
+		inputEls.slice(values.length).forEach((inputEl) => inputEl.remove());
+		values.forEach((value, i) => {
+			let inputEl = inputEls[i];
+			if (!inputEl) {
+				inputEl = this.doc.createElement("input");
+				this.hydrator.stamp(inputEl, "hiddenInput");
+				if (i > 0) inputEls[i - 1].after(inputEl);
+				else this.hydrator.query("root")?.append(inputEl);
+				inputEls[i] = inputEl;
+			}
+			this.spreadProps(inputEl, normalizeProps.input({
+				type: "hidden",
+				name: this.machine.prop("name"),
+				value,
+				disabled: this.api.disabled
+			}));
+		});
+	}
+	renderTable(view, offset, headerEl, bodyEl) {
+		if (view === "day") {
+			this.renderDayTable(offset, headerEl, bodyEl);
+			return;
+		}
+		const grid = view === "month" ? this.api.getMonthsGrid({
+			columns: 4,
+			format: "short"
+		}) : this.api.getYearsGrid({ columns: 4 });
+		headerEl.replaceChildren();
+		this.renderRows(bodyEl, grid, (rowEl) => {
+			this.spreadProps(rowEl, this.api.getTableRowProps({ view }));
+		}).forEach(([rowEl, cells]) => {
+			this.fitChildren(rowEl, "td", cells.length).forEach((cellEl, i) => {
+				const cell = cells[i];
+				this.renderCell(cellEl, view === "month" ? this.api.getMonthTableCellProps(cell) : this.api.getYearTableCellProps(cell), view === "month" ? this.api.getMonthTableCellTriggerProps(cell) : this.api.getYearTableCellTriggerProps(cell), cell.label);
+			});
+		});
+	}
+	renderDayTable(offset, headerEl, bodyEl) {
+		const view = "day";
+		const weekNumbers = this.api.showWeekNumbers;
+		const { weeks, visibleRange } = this.api.getOffset({ months: offset });
+		const [headerRowEl] = this.fitChildren(headerEl, "tr", 1);
+		this.spreadProps(headerRowEl, this.api.getTableRowProps({ view }));
+		const headEls = this.fitChildren(headerRowEl, "th", this.api.weekDays.length + (weekNumbers ? 1 : 0));
+		if (weekNumbers) {
+			const weekNumberHeaderEl = headEls.shift();
+			this.spreadProps(weekNumberHeaderEl, this.api.getWeekNumberHeaderCellProps({ view }));
+			weekNumberHeaderEl.textContent = "";
+		}
+		this.api.weekDays.forEach((day, i) => {
+			this.spreadProps(headEls[i], mergeProps(this.api.getTableHeadProps({ view }), {
+				scope: "col",
+				"aria-label": day.long
+			}));
+			if (headEls[i].textContent !== day.narrow) headEls[i].textContent = day.narrow;
+		});
+		this.renderRows(bodyEl, weeks, (rowEl) => {
+			this.spreadProps(rowEl, this.api.getTableRowProps({ view }));
+		}).forEach(([rowEl, week], weekIndex) => {
+			const cellEls = this.fitChildren(rowEl, "td", week.length + (weekNumbers ? 1 : 0));
+			if (weekNumbers) {
+				const weekNumberEl = cellEls.shift();
+				this.spreadProps(weekNumberEl, this.api.getWeekNumberCellProps({
+					weekIndex,
+					week
+				}));
+				weekNumberEl.textContent = String(this.api.getWeekNumber(week));
+			}
+			week.forEach((value, i) => {
+				this.renderCell(cellEls[i], this.api.getDayTableCellProps({
+					value,
+					visibleRange
+				}), this.api.getDayTableCellTriggerProps({
+					value,
+					visibleRange
+				}), String(value.day));
+			});
+		});
+	}
+	/** One `<tr>` per entry of `rows`, paired with the entry it renders. */
+	renderRows(parentEl, rows, spreadRow) {
+		return this.fitChildren(parentEl, "tr", rows.length).map((rowEl, i) => {
+			spreadRow(rowEl);
+			return [rowEl, rows[i]];
+		});
+	}
+	renderCell(cellEl, cellProps, triggerProps, text) {
+		this.spreadProps(cellEl, cellProps);
+		const [triggerEl] = this.fitChildren(cellEl, "div", 1);
+		this.spreadProps(triggerEl, triggerProps);
+		if (triggerEl.textContent !== text) triggerEl.textContent = text;
+	}
+	renderSelect(selectEl, selectProps, options, selected) {
+		this.spreadProps(selectEl, selectProps);
+		this.fitChildren(selectEl, "option", options.length).forEach((optionEl, i) => {
+			const { label, value, disabled } = options[i];
+			if (optionEl.value !== String(value)) optionEl.value = String(value);
+			if (optionEl.textContent !== label) optionEl.textContent = label;
+			if (optionEl.disabled !== !!disabled) optionEl.disabled = !!disabled;
+		});
+		selectEl.value = String(selected);
+	}
+	/**
+	* Makes `parentEl` hold exactly `count` children of `tag`: it keeps the ones already there,
+	* adds the missing ones and removes the extra ones. A child of another tag (the placeholder
+	* rows of a skeleton) is replaced.
+	*/
+	fitChildren(parentEl, tag, count) {
+		const children = Array.from(parentEl.children);
+		children.slice(count).forEach((child) => child.remove());
+		return Array.from({ length: count }, (_, i) => {
+			const child = children[i];
+			if (child?.localName === tag) return child;
+			const el = this.doc.createElement(tag);
+			if (child) child.replaceWith(el);
+			else parentEl.append(el);
+			return el;
+		});
+	}
+};
+
+//#endregion
+export { DatePicker };

package/dist/dialog.d.ts

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