@ark-ui/react 5.35.0 → 5.36.1

package/dist/components/field/use-field.cjs

@@ -1,163 +1,156 @@
-'use client';
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const domQuery = require('@zag-js/dom-query');
-const react = require('react');
-const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
-const useSafeLayoutEffect = require('../../utils/use-safe-layout-effect.cjs');
-const useFieldsetContext = require('../fieldset/use-fieldset-context.cjs');
-const field_anatomy = require('./field.anatomy.cjs');
-
-const useField = (props = {}) => {
-  const fieldset = useFieldsetContext.useFieldsetContext();
-  const env = useEnvironmentContext.useEnvironmentContext();
-  const {
-    ids,
-    target,
-    disabled = Boolean(fieldset?.disabled),
-    invalid = false,
-    readOnly = false,
-    required = false
-  } = props;
-  const [hasErrorText, setHasErrorText] = react.useState(false);
-  const [hasHelperText, setHasHelperText] = react.useState(false);
-  const uid = react.useId();
-  const id = props.id ?? uid;
-  const rootRef = react.useRef(null);
-  const rootId = ids?.control ?? `field::${id}`;
-  const errorTextId = ids?.errorText ?? `field::${id}::error-text`;
-  const helperTextId = ids?.helperText ?? `field::${id}::helper-text`;
-  const labelId = ids?.label ?? `field::${id}::label`;
-  useSafeLayoutEffect.useSafeLayoutEffect(() => {
-    const rootNode = rootRef.current;
-    if (!rootNode) return;
-    const checkTextElements = () => {
-      const docOrShadowRoot = env.getRootNode();
-      setHasErrorText(!!docOrShadowRoot.getElementById(errorTextId));
-      setHasHelperText(!!docOrShadowRoot.getElementById(helperTextId));
-    };
-    checkTextElements();
-    const win = env.getWindow();
-    const observer = new win.MutationObserver(checkTextElements);
-    observer.observe(rootNode, { childList: true, subtree: true });
-    return () => observer.disconnect();
-  }, [env, errorTextId, helperTextId]);
-  const labelIds = react.useMemo(() => {
-    const ids2 = [];
-    if (hasErrorText && invalid) ids2.push(errorTextId);
-    if (hasHelperText) ids2.push(helperTextId);
-    return ids2.join(" ") || void 0;
-  }, [invalid, errorTextId, helperTextId, hasErrorText, hasHelperText]);
-  const getRootProps = react.useMemo(
-    () => () => ({
-      ...field_anatomy.parts.root.attrs,
-      id: rootId,
-      ref: rootRef,
-      role: "group",
-      "data-disabled": domQuery.dataAttr(disabled),
-      "data-invalid": domQuery.dataAttr(invalid),
-      "data-readonly": domQuery.dataAttr(readOnly)
-    }),
-    [disabled, invalid, readOnly, rootId]
-  );
-  const targetControlId = target ? `field::${id}::item::${target}` : void 0;
-  const getLabelProps = react.useMemo(
-    () => () => ({
-      ...field_anatomy.parts.label.attrs,
-      id: labelId,
-      "data-disabled": domQuery.dataAttr(disabled),
-      "data-invalid": domQuery.dataAttr(invalid),
-      "data-readonly": domQuery.dataAttr(readOnly),
-      "data-required": domQuery.dataAttr(required),
-      htmlFor: targetControlId ?? id
-    }),
-    [disabled, invalid, readOnly, required, id, labelId, targetControlId]
-  );
-  const getControlProps = react.useMemo(
-    () => () => ({
-      "aria-describedby": labelIds,
-      "aria-invalid": domQuery.ariaAttr(invalid),
-      "data-invalid": domQuery.dataAttr(invalid),
-      "data-required": domQuery.dataAttr(required),
-      "data-readonly": domQuery.dataAttr(readOnly),
-      id,
-      required,
-      disabled,
-      readOnly
-    }),
-    [labelIds, invalid, required, readOnly, id, disabled]
-  );
-  const getInputProps = react.useMemo(
-    () => () => ({
-      ...getControlProps(),
-      ...field_anatomy.parts.input.attrs
-    }),
-    [getControlProps]
-  );
-  const getTextareaProps = react.useMemo(
-    () => () => ({
-      ...getControlProps(),
-      ...field_anatomy.parts.textarea.attrs
-    }),
-    [getControlProps]
-  );
-  const getSelectProps = react.useMemo(
-    () => () => ({
-      ...getControlProps(),
-      ...field_anatomy.parts.select.attrs
-    }),
-    [getControlProps]
-  );
-  const getHelperTextProps = react.useMemo(
-    () => () => ({
-      id: helperTextId,
-      ...field_anatomy.parts.helperText.attrs,
-      "data-disabled": domQuery.dataAttr(disabled)
-    }),
-    [disabled, helperTextId]
-  );
-  const getErrorTextProps = react.useMemo(
-    () => () => ({
-      id: errorTextId,
-      ...field_anatomy.parts.errorText.attrs,
-      "aria-live": "polite"
-    }),
-    [errorTextId]
-  );
-  const getRequiredIndicatorProps = react.useMemo(
-    () => () => ({
-      "aria-hidden": true,
-      ...field_anatomy.parts.requiredIndicator.attrs
-    }),
-    []
-  );
-  return {
-    ariaDescribedby: labelIds,
-    ids: {
-      root: rootId,
-      control: id,
-      label: labelId,
-      errorText: errorTextId,
-      helperText: helperTextId
-    },
-    refs: {
-      rootRef
-    },
-    disabled,
-    invalid,
-    readOnly,
-    required,
-    getLabelProps,
-    getRootProps,
-    getInputProps,
-    getTextareaProps,
-    getSelectProps,
-    getHelperTextProps,
-    getErrorTextProps,
-    getRequiredIndicatorProps
-  };
+"use client";
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_field_anatomy = require("./field.anatomy.cjs");
+const require_use_environment_context = require("../../providers/environment/use-environment-context.cjs");
+const require_use_fieldset_context = require("../fieldset/use-fieldset-context.cjs");
+const require_use_safe_layout_effect = require("../../utils/use-safe-layout-effect.cjs");
+let react = require("react");
+let _zag_js_dom_query = require("@zag-js/dom-query");
+//#region src/components/field/use-field.ts
+var useField = (props = {}) => {
+	const fieldset = require_use_fieldset_context.useFieldsetContext();
+	const env = require_use_environment_context.useEnvironmentContext();
+	const { ids, target, disabled = Boolean(fieldset?.disabled), invalid = false, readOnly = false, required = false } = props;
+	const [hasErrorText, setHasErrorText] = (0, react.useState)(false);
+	const [hasHelperText, setHasHelperText] = (0, react.useState)(false);
+	const uid = (0, react.useId)();
+	const id = props.id ?? uid;
+	const rootRef = (0, react.useRef)(null);
+	const rootId = ids?.control ?? `field::${id}`;
+	const errorTextId = ids?.errorText ?? `field::${id}::error-text`;
+	const helperTextId = ids?.helperText ?? `field::${id}::helper-text`;
+	const labelId = ids?.label ?? `field::${id}::label`;
+	require_use_safe_layout_effect.useSafeLayoutEffect(() => {
+		const rootNode = rootRef.current;
+		if (!rootNode) return;
+		const checkTextElements = () => {
+			const docOrShadowRoot = env.getRootNode();
+			setHasErrorText(!!docOrShadowRoot.getElementById(errorTextId));
+			setHasHelperText(!!docOrShadowRoot.getElementById(helperTextId));
+		};
+		checkTextElements();
+		const observer = new (env.getWindow()).MutationObserver(checkTextElements);
+		observer.observe(rootNode, {
+			childList: true,
+			subtree: true
+		});
+		return () => observer.disconnect();
+	}, [
+		env,
+		errorTextId,
+		helperTextId
+	]);
+	const labelIds = (0, react.useMemo)(() => {
+		const ids = [];
+		if (hasErrorText && invalid) ids.push(errorTextId);
+		if (hasHelperText) ids.push(helperTextId);
+		return ids.join(" ") || void 0;
+	}, [
+		invalid,
+		errorTextId,
+		helperTextId,
+		hasErrorText,
+		hasHelperText
+	]);
+	const getRootProps = (0, react.useMemo)(() => () => ({
+		...require_field_anatomy.parts.root.attrs,
+		id: rootId,
+		ref: rootRef,
+		role: "group",
+		"data-disabled": (0, _zag_js_dom_query.dataAttr)(disabled),
+		"data-invalid": (0, _zag_js_dom_query.dataAttr)(invalid),
+		"data-readonly": (0, _zag_js_dom_query.dataAttr)(readOnly)
+	}), [
+		disabled,
+		invalid,
+		readOnly,
+		rootId
+	]);
+	const targetControlId = target ? `field::${id}::item::${target}` : void 0;
+	const getLabelProps = (0, react.useMemo)(() => () => ({
+		...require_field_anatomy.parts.label.attrs,
+		id: labelId,
+		"data-disabled": (0, _zag_js_dom_query.dataAttr)(disabled),
+		"data-invalid": (0, _zag_js_dom_query.dataAttr)(invalid),
+		"data-readonly": (0, _zag_js_dom_query.dataAttr)(readOnly),
+		"data-required": (0, _zag_js_dom_query.dataAttr)(required),
+		htmlFor: targetControlId ?? id
+	}), [
+		disabled,
+		invalid,
+		readOnly,
+		required,
+		id,
+		labelId,
+		targetControlId
+	]);
+	const getControlProps = (0, react.useMemo)(() => () => ({
+		"aria-describedby": labelIds,
+		"aria-invalid": (0, _zag_js_dom_query.ariaAttr)(invalid),
+		"data-invalid": (0, _zag_js_dom_query.dataAttr)(invalid),
+		"data-required": (0, _zag_js_dom_query.dataAttr)(required),
+		"data-readonly": (0, _zag_js_dom_query.dataAttr)(readOnly),
+		id,
+		required,
+		disabled,
+		readOnly
+	}), [
+		labelIds,
+		invalid,
+		required,
+		readOnly,
+		id,
+		disabled
+	]);
+	const getInputProps = (0, react.useMemo)(() => () => ({
+		...getControlProps(),
+		...require_field_anatomy.parts.input.attrs
+	}), [getControlProps]);
+	const getTextareaProps = (0, react.useMemo)(() => () => ({
+		...getControlProps(),
+		...require_field_anatomy.parts.textarea.attrs
+	}), [getControlProps]);
+	const getSelectProps = (0, react.useMemo)(() => () => ({
+		...getControlProps(),
+		...require_field_anatomy.parts.select.attrs
+	}), [getControlProps]);
+	const getHelperTextProps = (0, react.useMemo)(() => () => ({
+		id: helperTextId,
+		...require_field_anatomy.parts.helperText.attrs,
+		"data-disabled": (0, _zag_js_dom_query.dataAttr)(disabled)
+	}), [disabled, helperTextId]);
+	const getErrorTextProps = (0, react.useMemo)(() => () => ({
+		id: errorTextId,
+		...require_field_anatomy.parts.errorText.attrs,
+		"aria-live": "polite"
+	}), [errorTextId]);
+	const getRequiredIndicatorProps = (0, react.useMemo)(() => () => ({
+		"aria-hidden": true,
+		...require_field_anatomy.parts.requiredIndicator.attrs
+	}), []);
+	return {
+		ariaDescribedby: labelIds,
+		ids: {
+			root: rootId,
+			control: id,
+			label: labelId,
+			errorText: errorTextId,
+			helperText: helperTextId
+		},
+		refs: { rootRef },
+		disabled,
+		invalid,
+		readOnly,
+		required,
+		getLabelProps,
+		getRootProps,
+		getInputProps,
+		getTextareaProps,
+		getSelectProps,
+		getHelperTextProps,
+		getErrorTextProps,
+		getRequiredIndicatorProps
+	};
 };
-
+//#endregion
 exports.useField = useField;

package/dist/components/field/use-field.js

@@ -1,159 +1,155 @@
-'use client';
-import { dataAttr, ariaAttr } from '@zag-js/dom-query';
-import { useState, useId, useRef, useMemo } from 'react';
-import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
-import { useSafeLayoutEffect } from '../../utils/use-safe-layout-effect.js';
-import { useFieldsetContext } from '../fieldset/use-fieldset-context.js';
-import { parts } from './field.anatomy.js';
-
-const useField = (props = {}) => {
-  const fieldset = useFieldsetContext();
-  const env = useEnvironmentContext();
-  const {
-    ids,
-    target,
-    disabled = Boolean(fieldset?.disabled),
-    invalid = false,
-    readOnly = false,
-    required = false
-  } = props;
-  const [hasErrorText, setHasErrorText] = useState(false);
-  const [hasHelperText, setHasHelperText] = useState(false);
-  const uid = useId();
-  const id = props.id ?? uid;
-  const rootRef = useRef(null);
-  const rootId = ids?.control ?? `field::${id}`;
-  const errorTextId = ids?.errorText ?? `field::${id}::error-text`;
-  const helperTextId = ids?.helperText ?? `field::${id}::helper-text`;
-  const labelId = ids?.label ?? `field::${id}::label`;
-  useSafeLayoutEffect(() => {
-    const rootNode = rootRef.current;
-    if (!rootNode) return;
-    const checkTextElements = () => {
-      const docOrShadowRoot = env.getRootNode();
-      setHasErrorText(!!docOrShadowRoot.getElementById(errorTextId));
-      setHasHelperText(!!docOrShadowRoot.getElementById(helperTextId));
-    };
-    checkTextElements();
-    const win = env.getWindow();
-    const observer = new win.MutationObserver(checkTextElements);
-    observer.observe(rootNode, { childList: true, subtree: true });
-    return () => observer.disconnect();
-  }, [env, errorTextId, helperTextId]);
-  const labelIds = useMemo(() => {
-    const ids2 = [];
-    if (hasErrorText && invalid) ids2.push(errorTextId);
-    if (hasHelperText) ids2.push(helperTextId);
-    return ids2.join(" ") || void 0;
-  }, [invalid, errorTextId, helperTextId, hasErrorText, hasHelperText]);
-  const getRootProps = useMemo(
-    () => () => ({
-      ...parts.root.attrs,
-      id: rootId,
-      ref: rootRef,
-      role: "group",
-      "data-disabled": dataAttr(disabled),
-      "data-invalid": dataAttr(invalid),
-      "data-readonly": dataAttr(readOnly)
-    }),
-    [disabled, invalid, readOnly, rootId]
-  );
-  const targetControlId = target ? `field::${id}::item::${target}` : void 0;
-  const getLabelProps = useMemo(
-    () => () => ({
-      ...parts.label.attrs,
-      id: labelId,
-      "data-disabled": dataAttr(disabled),
-      "data-invalid": dataAttr(invalid),
-      "data-readonly": dataAttr(readOnly),
-      "data-required": dataAttr(required),
-      htmlFor: targetControlId ?? id
-    }),
-    [disabled, invalid, readOnly, required, id, labelId, targetControlId]
-  );
-  const getControlProps = useMemo(
-    () => () => ({
-      "aria-describedby": labelIds,
-      "aria-invalid": ariaAttr(invalid),
-      "data-invalid": dataAttr(invalid),
-      "data-required": dataAttr(required),
-      "data-readonly": dataAttr(readOnly),
-      id,
-      required,
-      disabled,
-      readOnly
-    }),
-    [labelIds, invalid, required, readOnly, id, disabled]
-  );
-  const getInputProps = useMemo(
-    () => () => ({
-      ...getControlProps(),
-      ...parts.input.attrs
-    }),
-    [getControlProps]
-  );
-  const getTextareaProps = useMemo(
-    () => () => ({
-      ...getControlProps(),
-      ...parts.textarea.attrs
-    }),
-    [getControlProps]
-  );
-  const getSelectProps = useMemo(
-    () => () => ({
-      ...getControlProps(),
-      ...parts.select.attrs
-    }),
-    [getControlProps]
-  );
-  const getHelperTextProps = useMemo(
-    () => () => ({
-      id: helperTextId,
-      ...parts.helperText.attrs,
-      "data-disabled": dataAttr(disabled)
-    }),
-    [disabled, helperTextId]
-  );
-  const getErrorTextProps = useMemo(
-    () => () => ({
-      id: errorTextId,
-      ...parts.errorText.attrs,
-      "aria-live": "polite"
-    }),
-    [errorTextId]
-  );
-  const getRequiredIndicatorProps = useMemo(
-    () => () => ({
-      "aria-hidden": true,
-      ...parts.requiredIndicator.attrs
-    }),
-    []
-  );
-  return {
-    ariaDescribedby: labelIds,
-    ids: {
-      root: rootId,
-      control: id,
-      label: labelId,
-      errorText: errorTextId,
-      helperText: helperTextId
-    },
-    refs: {
-      rootRef
-    },
-    disabled,
-    invalid,
-    readOnly,
-    required,
-    getLabelProps,
-    getRootProps,
-    getInputProps,
-    getTextareaProps,
-    getSelectProps,
-    getHelperTextProps,
-    getErrorTextProps,
-    getRequiredIndicatorProps
-  };
+"use client";
+import { parts } from "./field.anatomy.js";
+import { useEnvironmentContext } from "../../providers/environment/use-environment-context.js";
+import { useFieldsetContext } from "../fieldset/use-fieldset-context.js";
+import { useSafeLayoutEffect } from "../../utils/use-safe-layout-effect.js";
+import { useId, useMemo, useRef, useState } from "react";
+import { ariaAttr, dataAttr } from "@zag-js/dom-query";
+//#region src/components/field/use-field.ts
+var useField = (props = {}) => {
+	const fieldset = useFieldsetContext();
+	const env = useEnvironmentContext();
+	const { ids, target, disabled = Boolean(fieldset?.disabled), invalid = false, readOnly = false, required = false } = props;
+	const [hasErrorText, setHasErrorText] = useState(false);
+	const [hasHelperText, setHasHelperText] = useState(false);
+	const uid = useId();
+	const id = props.id ?? uid;
+	const rootRef = useRef(null);
+	const rootId = ids?.control ?? `field::${id}`;
+	const errorTextId = ids?.errorText ?? `field::${id}::error-text`;
+	const helperTextId = ids?.helperText ?? `field::${id}::helper-text`;
+	const labelId = ids?.label ?? `field::${id}::label`;
+	useSafeLayoutEffect(() => {
+		const rootNode = rootRef.current;
+		if (!rootNode) return;
+		const checkTextElements = () => {
+			const docOrShadowRoot = env.getRootNode();
+			setHasErrorText(!!docOrShadowRoot.getElementById(errorTextId));
+			setHasHelperText(!!docOrShadowRoot.getElementById(helperTextId));
+		};
+		checkTextElements();
+		const observer = new (env.getWindow()).MutationObserver(checkTextElements);
+		observer.observe(rootNode, {
+			childList: true,
+			subtree: true
+		});
+		return () => observer.disconnect();
+	}, [
+		env,
+		errorTextId,
+		helperTextId
+	]);
+	const labelIds = useMemo(() => {
+		const ids = [];
+		if (hasErrorText && invalid) ids.push(errorTextId);
+		if (hasHelperText) ids.push(helperTextId);
+		return ids.join(" ") || void 0;
+	}, [
+		invalid,
+		errorTextId,
+		helperTextId,
+		hasErrorText,
+		hasHelperText
+	]);
+	const getRootProps = useMemo(() => () => ({
+		...parts.root.attrs,
+		id: rootId,
+		ref: rootRef,
+		role: "group",
+		"data-disabled": dataAttr(disabled),
+		"data-invalid": dataAttr(invalid),
+		"data-readonly": dataAttr(readOnly)
+	}), [
+		disabled,
+		invalid,
+		readOnly,
+		rootId
+	]);
+	const targetControlId = target ? `field::${id}::item::${target}` : void 0;
+	const getLabelProps = useMemo(() => () => ({
+		...parts.label.attrs,
+		id: labelId,
+		"data-disabled": dataAttr(disabled),
+		"data-invalid": dataAttr(invalid),
+		"data-readonly": dataAttr(readOnly),
+		"data-required": dataAttr(required),
+		htmlFor: targetControlId ?? id
+	}), [
+		disabled,
+		invalid,
+		readOnly,
+		required,
+		id,
+		labelId,
+		targetControlId
+	]);
+	const getControlProps = useMemo(() => () => ({
+		"aria-describedby": labelIds,
+		"aria-invalid": ariaAttr(invalid),
+		"data-invalid": dataAttr(invalid),
+		"data-required": dataAttr(required),
+		"data-readonly": dataAttr(readOnly),
+		id,
+		required,
+		disabled,
+		readOnly
+	}), [
+		labelIds,
+		invalid,
+		required,
+		readOnly,
+		id,
+		disabled
+	]);
+	const getInputProps = useMemo(() => () => ({
+		...getControlProps(),
+		...parts.input.attrs
+	}), [getControlProps]);
+	const getTextareaProps = useMemo(() => () => ({
+		...getControlProps(),
+		...parts.textarea.attrs
+	}), [getControlProps]);
+	const getSelectProps = useMemo(() => () => ({
+		...getControlProps(),
+		...parts.select.attrs
+	}), [getControlProps]);
+	const getHelperTextProps = useMemo(() => () => ({
+		id: helperTextId,
+		...parts.helperText.attrs,
+		"data-disabled": dataAttr(disabled)
+	}), [disabled, helperTextId]);
+	const getErrorTextProps = useMemo(() => () => ({
+		id: errorTextId,
+		...parts.errorText.attrs,
+		"aria-live": "polite"
+	}), [errorTextId]);
+	const getRequiredIndicatorProps = useMemo(() => () => ({
+		"aria-hidden": true,
+		...parts.requiredIndicator.attrs
+	}), []);
+	return {
+		ariaDescribedby: labelIds,
+		ids: {
+			root: rootId,
+			control: id,
+			label: labelId,
+			errorText: errorTextId,
+			helperText: helperTextId
+		},
+		refs: { rootRef },
+		disabled,
+		invalid,
+		readOnly,
+		required,
+		getLabelProps,
+		getRootProps,
+		getInputProps,
+		getTextareaProps,
+		getSelectProps,
+		getHelperTextProps,
+		getErrorTextProps,
+		getRequiredIndicatorProps
+	};
 };
-
+//#endregion
 export { useField };

package/dist/components/fieldset/fieldset-context.cjs

@@ -1,10 +1,6 @@
-'use client';
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const useFieldsetContext = require('./use-fieldset-context.cjs');
-
-const FieldsetContext = (props) => props.children(useFieldsetContext.useFieldsetContext());
-
+"use client";
+const require_use_fieldset_context = require("./use-fieldset-context.cjs");
+//#region src/components/fieldset/fieldset-context.tsx
+var FieldsetContext = (props) => props.children(require_use_fieldset_context.useFieldsetContext());
+//#endregion
 exports.FieldsetContext = FieldsetContext;