@ark-ui/react 5.39.1 → 5.39.3

package/dist/components/angle-slider/angle-slider-marker.cjs

@@ -11,7 +11,7 @@ var AngleSliderMarker = (0, react.forwardRef)((props, ref) => {
 	const [markerProps, localProps] = splitMarkerProps(props, ["value"]);
 	const angleSlider = require_use_angle_slider_context.useAngleSliderContext();
 	const mergedProps = (0, _zag_js_react.mergeProps)(angleSlider.getMarkerProps(markerProps), localProps);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.span, {
 		...mergedProps,
 		ref
 	});

package/dist/components/angle-slider/angle-slider-marker.d.cts

@@ -4,6 +4,6 @@ import { HTMLProps, PolymorphicProps } from '../factory.js';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface AngleSliderMarkerBaseProps extends MarkerProps, PolymorphicProps {
 }
-export interface AngleSliderMarkerProps extends Assign<HTMLProps<'div'>, AngleSliderMarkerBaseProps> {
+export interface AngleSliderMarkerProps extends Assign<HTMLProps<'span'>, AngleSliderMarkerBaseProps> {
 }
-export declare const AngleSliderMarker: ForwardRefExoticComponent<AngleSliderMarkerProps & RefAttributes<HTMLDivElement>>;
+export declare const AngleSliderMarker: ForwardRefExoticComponent<AngleSliderMarkerProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/angle-slider/angle-slider-marker.d.ts

@@ -4,6 +4,6 @@ import { HTMLProps, PolymorphicProps } from '../factory.js';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface AngleSliderMarkerBaseProps extends MarkerProps, PolymorphicProps {
 }
-export interface AngleSliderMarkerProps extends Assign<HTMLProps<'div'>, AngleSliderMarkerBaseProps> {
+export interface AngleSliderMarkerProps extends Assign<HTMLProps<'span'>, AngleSliderMarkerBaseProps> {
 }
-export declare const AngleSliderMarker: ForwardRefExoticComponent<AngleSliderMarkerProps & RefAttributes<HTMLDivElement>>;
+export declare const AngleSliderMarker: ForwardRefExoticComponent<AngleSliderMarkerProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/angle-slider/angle-slider-marker.js

@@ -11,7 +11,7 @@ var AngleSliderMarker = forwardRef((props, ref) => {
 	const [markerProps, localProps] = splitMarkerProps(props, ["value"]);
 	const angleSlider = useAngleSliderContext();
 	const mergedProps = mergeProps(angleSlider.getMarkerProps(markerProps), localProps);
-	return /* @__PURE__ */ jsx(ark.div, {
+	return /* @__PURE__ */ jsx(ark.span, {
 		...mergedProps,
 		ref
 	});

package/dist/components/angle-slider/angle-slider-value-text.cjs

@@ -6,7 +6,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/angle-slider/angle-slider-value-text.tsx
 var AngleSliderValueText = (0, react.forwardRef)((props, ref) => {
 	const angleSlider = require_use_angle_slider_context.useAngleSliderContext();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.span, {
 		...props,
 		ref,
 		children: props.children || angleSlider.valueAsDegree

package/dist/components/angle-slider/angle-slider-value-text.d.cts

@@ -2,6 +2,6 @@ import { HTMLProps, PolymorphicProps } from '../factory.js';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface AngleSliderValueTextBaseProps extends PolymorphicProps {
 }
-export interface AngleSliderValueTextProps extends HTMLProps<'div'>, AngleSliderValueTextBaseProps {
+export interface AngleSliderValueTextProps extends HTMLProps<'span'>, AngleSliderValueTextBaseProps {
 }
-export declare const AngleSliderValueText: ForwardRefExoticComponent<AngleSliderValueTextProps & RefAttributes<HTMLDivElement>>;
+export declare const AngleSliderValueText: ForwardRefExoticComponent<AngleSliderValueTextProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/angle-slider/angle-slider-value-text.d.ts

@@ -2,6 +2,6 @@ import { HTMLProps, PolymorphicProps } from '../factory.js';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface AngleSliderValueTextBaseProps extends PolymorphicProps {
 }
-export interface AngleSliderValueTextProps extends HTMLProps<'div'>, AngleSliderValueTextBaseProps {
+export interface AngleSliderValueTextProps extends HTMLProps<'span'>, AngleSliderValueTextBaseProps {
 }
-export declare const AngleSliderValueText: ForwardRefExoticComponent<AngleSliderValueTextProps & RefAttributes<HTMLDivElement>>;
+export declare const AngleSliderValueText: ForwardRefExoticComponent<AngleSliderValueTextProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/angle-slider/angle-slider-value-text.js

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/angle-slider/angle-slider-value-text.tsx
 var AngleSliderValueText = forwardRef((props, ref) => {
 	const angleSlider = useAngleSliderContext();
-	return /* @__PURE__ */ jsx(ark.div, {
+	return /* @__PURE__ */ jsx(ark.span, {
 		...props,
 		ref,
 		children: props.children || angleSlider.valueAsDegree

package/dist/components/clipboard/clipboard.d.cts

@@ -1,4 +1,4 @@
-export type { CopyStatusDetails } from '@zag-js/clipboard';
+export type { CopyStatusDetails, ValueChangeDetails } from '@zag-js/clipboard';
 export { ClipboardContext as Context, type ClipboardContextProps as ContextProps } from './clipboard-context.js';
 export { ClipboardControl as Control, type ClipboardControlBaseProps as ControlBaseProps, type ClipboardControlProps as ControlProps, } from './clipboard-control.js';
 export { ClipboardIndicator as Indicator, type ClipboardIndicatorBaseProps as IndicatorBaseProps, type ClipboardIndicatorProps as IndicatorProps, } from './clipboard-indicator.js';

package/dist/components/clipboard/clipboard.d.ts

@@ -1,4 +1,4 @@
-export type { CopyStatusDetails } from '@zag-js/clipboard';
+export type { CopyStatusDetails, ValueChangeDetails } from '@zag-js/clipboard';
 export { ClipboardContext as Context, type ClipboardContextProps as ContextProps } from './clipboard-context.js';
 export { ClipboardControl as Control, type ClipboardControlBaseProps as ControlBaseProps, type ClipboardControlProps as ControlProps, } from './clipboard-control.js';
 export { ClipboardIndicator as Indicator, type ClipboardIndicatorBaseProps as IndicatorBaseProps, type ClipboardIndicatorProps as IndicatorProps, } from './clipboard-indicator.js';

package/dist/components/clipboard/index.d.cts

@@ -1,4 +1,4 @@
-export type { CopyStatusDetails as ClipboardCopyStatusDetails } from '@zag-js/clipboard';
+export type { CopyStatusDetails as ClipboardCopyStatusDetails, ValueChangeDetails as ClipboardValueChangeDetails, } from '@zag-js/clipboard';
 export { ClipboardContext, type ClipboardContextProps } from './clipboard-context.js';
 export { ClipboardControl, type ClipboardControlBaseProps, type ClipboardControlProps } from './clipboard-control.js';
 export { ClipboardIndicator, type ClipboardIndicatorBaseProps, type ClipboardIndicatorProps, } from './clipboard-indicator.js';

package/dist/components/clipboard/index.d.ts

@@ -1,4 +1,4 @@
-export type { CopyStatusDetails as ClipboardCopyStatusDetails } from '@zag-js/clipboard';
+export type { CopyStatusDetails as ClipboardCopyStatusDetails, ValueChangeDetails as ClipboardValueChangeDetails, } from '@zag-js/clipboard';
 export { ClipboardContext, type ClipboardContextProps } from './clipboard-context.js';
 export { ClipboardControl, type ClipboardControlBaseProps, type ClipboardControlProps } from './clipboard-control.js';
 export { ClipboardIndicator, type ClipboardIndicatorBaseProps, type ClipboardIndicatorProps, } from './clipboard-indicator.js';

package/dist/components/collapsible/collapsible-gate.d.cts

@@ -4,4 +4,4 @@ export interface CollapsibleGateProps {
     collapsible: Pick<UseCollapsibleReturn, 'isUnmounted' | 'visible' | 'hideMode'>;
     children?: ReactNode | undefined;
 }
-export declare const CollapsibleGate: (props: CollapsibleGateProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | ReactPortal | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+export declare const CollapsibleGate: (props: CollapsibleGateProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | ReactPortal | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import('react').JSX.Element | null | undefined;

package/dist/components/collapsible/collapsible-gate.d.ts

@@ -4,4 +4,4 @@ export interface CollapsibleGateProps {
     collapsible: Pick<UseCollapsibleReturn, 'isUnmounted' | 'visible' | 'hideMode'>;
     children?: ReactNode | undefined;
 }
-export declare const CollapsibleGate: (props: CollapsibleGateProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | ReactPortal | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+export declare const CollapsibleGate: (props: CollapsibleGateProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | ReactPortal | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import('react').JSX.Element | null | undefined;

package/dist/components/collection/examples/async-list/dependencies.d.cts

@@ -1 +1 @@
-export declare const Dependencies: () => import("react").JSX.Element;
+export declare const Dependencies: () => import('react').JSX.Element;

package/dist/components/collection/examples/async-list/dependencies.d.ts

@@ -1 +1 @@
-export declare const Dependencies: () => import("react").JSX.Element;
+export declare const Dependencies: () => import('react').JSX.Element;

package/dist/components/collection/examples/async-list/filter.d.cts

@@ -1 +1 @@
-export declare const Filter: () => import("react").JSX.Element;
+export declare const Filter: () => import('react').JSX.Element;

package/dist/components/collection/examples/async-list/filter.d.ts

@@ -1 +1 @@
-export declare const Filter: () => import("react").JSX.Element;
+export declare const Filter: () => import('react').JSX.Element;

package/dist/components/collection/examples/async-list/infinite-loading.d.cts

@@ -1 +1 @@
-export declare const InfiniteLoading: () => import("react").JSX.Element;
+export declare const InfiniteLoading: () => import('react').JSX.Element;

package/dist/components/collection/examples/async-list/infinite-loading.d.ts

@@ -1 +1 @@
-export declare const InfiniteLoading: () => import("react").JSX.Element;
+export declare const InfiniteLoading: () => import('react').JSX.Element;

package/dist/components/collection/examples/async-list/reload.d.cts

@@ -1 +1 @@
-export declare const Reload: () => import("react").JSX.Element;
+export declare const Reload: () => import('react').JSX.Element;

package/dist/components/collection/examples/async-list/reload.d.ts

@@ -1 +1 @@
-export declare const Reload: () => import("react").JSX.Element;
+export declare const Reload: () => import('react').JSX.Element;

package/dist/components/collection/examples/async-list/sort-client-side.d.cts

@@ -1 +1 @@
-export declare const SortClientSide: () => import("react").JSX.Element;
+export declare const SortClientSide: () => import('react').JSX.Element;

package/dist/components/collection/examples/async-list/sort-client-side.d.ts

@@ -1 +1 @@
-export declare const SortClientSide: () => import("react").JSX.Element;
+export declare const SortClientSide: () => import('react').JSX.Element;

package/dist/components/collection/examples/async-list/sort-server-side.d.cts

@@ -1 +1 @@
-export declare const SortServerSide: () => import("react").JSX.Element;
+export declare const SortServerSide: () => import('react').JSX.Element;

package/dist/components/collection/examples/async-list/sort-server-side.d.ts

@@ -1 +1 @@
-export declare const SortServerSide: () => import("react").JSX.Element;
+export declare const SortServerSide: () => import('react').JSX.Element;

package/dist/components/collection/examples/list-selection/basic.d.cts

@@ -1 +1 @@
-export declare const Basic: () => import("react").JSX.Element;
+export declare const Basic: () => import('react').JSX.Element;

package/dist/components/collection/examples/list-selection/basic.d.ts

@@ -1 +1 @@
-export declare const Basic: () => import("react").JSX.Element;
+export declare const Basic: () => import('react').JSX.Element;

package/dist/components/collection/examples/list-selection/multiple.d.cts

@@ -1 +1 @@
-export declare const Multiple: () => import("react").JSX.Element;
+export declare const Multiple: () => import('react').JSX.Element;

package/dist/components/collection/examples/list-selection/multiple.d.ts

@@ -1 +1 @@
-export declare const Multiple: () => import("react").JSX.Element;
+export declare const Multiple: () => import('react').JSX.Element;

package/dist/components/collection/examples/list-selection/range.d.cts

@@ -1 +1 @@
-export declare const Range: () => import("react").JSX.Element;
+export declare const Range: () => import('react').JSX.Element;

package/dist/components/collection/examples/list-selection/range.d.ts

@@ -1 +1 @@
-export declare const Range: () => import("react").JSX.Element;
+export declare const Range: () => import('react').JSX.Element;

package/dist/components/date-input/date-input-segment-context.d.cts

@@ -3,4 +3,4 @@ import { ReactNode } from 'react';
 export interface DateInputSegmentContextProps {
     children: (segment: DateSegment) => ReactNode;
 }
-export declare const DateInputSegmentContext: (props: DateInputSegmentContextProps) => import("react").JSX.Element[];
+export declare const DateInputSegmentContext: (props: DateInputSegmentContextProps) => import('react').JSX.Element[];

package/dist/components/date-input/date-input-segment-context.d.ts

@@ -3,4 +3,4 @@ import { ReactNode } from 'react';
 export interface DateInputSegmentContextProps {
     children: (segment: DateSegment) => ReactNode;
 }
-export declare const DateInputSegmentContext: (props: DateInputSegmentContextProps) => import("react").JSX.Element[];
+export declare const DateInputSegmentContext: (props: DateInputSegmentContextProps) => import('react').JSX.Element[];

package/dist/components/date-input/date-input.d.cts

@@ -1,3 +1,4 @@
+export type { PlaceholderChangeDetails } from '@zag-js/date-input';
 export { DateInputContext as Context, type DateInputContextProps as ContextProps } from './date-input-context.js';
 export { DateInputLabel as Label, type DateInputLabelBaseProps as LabelBaseProps, type DateInputLabelProps as LabelProps, } from './date-input-label.js';
 export { DateInputRoot as Root, type DateInputRootBaseProps as RootBaseProps, type DateInputRootProps as RootProps, } from './date-input-root.js';

package/dist/components/date-input/date-input.d.ts

@@ -1,3 +1,4 @@
+export type { PlaceholderChangeDetails } from '@zag-js/date-input';
 export { DateInputContext as Context, type DateInputContextProps as ContextProps } from './date-input-context.js';
 export { DateInputLabel as Label, type DateInputLabelBaseProps as LabelBaseProps, type DateInputLabelProps as LabelProps, } from './date-input-label.js';
 export { DateInputRoot as Root, type DateInputRootBaseProps as RootBaseProps, type DateInputRootProps as RootProps, } from './date-input-root.js';

package/dist/components/date-input/index.d.cts

@@ -1,4 +1,4 @@
-export type { DateValue as DateInputDateValue, FocusChangeDetails as DateInputFocusChangeDetails, SelectionMode as DateInputSelectionMode, ValueChangeDetails as DateInputValueChangeDetails, } from '@zag-js/date-input';
+export type { DateValue as DateInputDateValue, FocusChangeDetails as DateInputFocusChangeDetails, PlaceholderChangeDetails as DateInputPlaceholderChangeDetails, SelectionMode as DateInputSelectionMode, ValueChangeDetails as DateInputValueChangeDetails, } from '@zag-js/date-input';
 export { useDateInput, type UseDateInputProps, type UseDateInputReturn } from './use-date-input.js';
 export { useDateInputContext, type UseDateInputContext } from './use-date-input-context.js';
 export { DateInputContext, type DateInputContextProps } from './date-input-context.js';

package/dist/components/date-input/index.d.ts

@@ -1,4 +1,4 @@
-export type { DateValue as DateInputDateValue, FocusChangeDetails as DateInputFocusChangeDetails, SelectionMode as DateInputSelectionMode, ValueChangeDetails as DateInputValueChangeDetails, } from '@zag-js/date-input';
+export type { DateValue as DateInputDateValue, FocusChangeDetails as DateInputFocusChangeDetails, PlaceholderChangeDetails as DateInputPlaceholderChangeDetails, SelectionMode as DateInputSelectionMode, ValueChangeDetails as DateInputValueChangeDetails, } from '@zag-js/date-input';
 export { useDateInput, type UseDateInputProps, type UseDateInputReturn } from './use-date-input.js';
 export { useDateInputContext, type UseDateInputContext } from './use-date-input-context.js';
 export { DateInputContext, type DateInputContextProps } from './date-input-context.js';

package/dist/components/dialog/dialog-root-provider.d.cts

@@ -10,5 +10,5 @@ export interface DialogRootProviderBaseProps extends RootProviderProps, UsePrese
 export interface DialogRootProviderProps extends DialogRootProviderBaseProps {
     children?: ReactNode | undefined;
 }
-export declare const DialogRootProvider: (props: DialogRootProviderProps) => import("react").JSX.Element;
+export declare const DialogRootProvider: (props: DialogRootProviderProps) => import('react').JSX.Element;
 export {};

package/dist/components/dialog/dialog-root-provider.d.ts

@@ -10,5 +10,5 @@ export interface DialogRootProviderBaseProps extends RootProviderProps, UsePrese
 export interface DialogRootProviderProps extends DialogRootProviderBaseProps {
     children?: ReactNode | undefined;
 }
-export declare const DialogRootProvider: (props: DialogRootProviderProps) => import("react").JSX.Element;
+export declare const DialogRootProvider: (props: DialogRootProviderProps) => import('react').JSX.Element;
 export {};

package/dist/components/dialog/dialog-root.d.cts

@@ -6,4 +6,4 @@ export interface DialogRootBaseProps extends UseDialogProps, UsePresenceProps {
 export interface DialogRootProps extends DialogRootBaseProps {
     children?: ReactNode | undefined;
 }
-export declare const DialogRoot: (props: DialogRootProps) => import("react").JSX.Element;
+export declare const DialogRoot: (props: DialogRootProps) => import('react').JSX.Element;

package/dist/components/dialog/dialog-root.d.ts

@@ -6,4 +6,4 @@ export interface DialogRootBaseProps extends UseDialogProps, UsePresenceProps {
 export interface DialogRootProps extends DialogRootBaseProps {
     children?: ReactNode | undefined;
 }
-export declare const DialogRoot: (props: DialogRootProps) => import("react").JSX.Element;
+export declare const DialogRoot: (props: DialogRootProps) => import('react').JSX.Element;

package/dist/components/drawer/drawer-root-provider.d.cts

@@ -10,5 +10,5 @@ export interface DrawerRootProviderBaseProps extends RootProviderProps, UsePrese
 export interface DrawerRootProviderProps extends DrawerRootProviderBaseProps {
     children?: ReactNode | undefined;
 }
-export declare const DrawerRootProvider: (props: DrawerRootProviderProps) => import("react").JSX.Element;
+export declare const DrawerRootProvider: (props: DrawerRootProviderProps) => import('react').JSX.Element;
 export {};

package/dist/components/drawer/drawer-root-provider.d.ts

@@ -10,5 +10,5 @@ export interface DrawerRootProviderBaseProps extends RootProviderProps, UsePrese
 export interface DrawerRootProviderProps extends DrawerRootProviderBaseProps {
     children?: ReactNode | undefined;
 }
-export declare const DrawerRootProvider: (props: DrawerRootProviderProps) => import("react").JSX.Element;
+export declare const DrawerRootProvider: (props: DrawerRootProviderProps) => import('react').JSX.Element;
 export {};

package/dist/components/drawer/drawer-root.d.cts

@@ -6,4 +6,4 @@ export interface DrawerRootBaseProps extends UseDrawerProps, UsePresenceProps {
 export interface DrawerRootProps extends DrawerRootBaseProps {
     children?: ReactNode | undefined;
 }
-export declare const DrawerRoot: (props: DrawerRootProps) => import("react").JSX.Element;
+export declare const DrawerRoot: (props: DrawerRootProps) => import('react').JSX.Element;

package/dist/components/drawer/drawer-root.d.ts

@@ -6,4 +6,4 @@ export interface DrawerRootBaseProps extends UseDrawerProps, UsePresenceProps {
 export interface DrawerRootProps extends DrawerRootBaseProps {
     children?: ReactNode | undefined;
 }
-export declare const DrawerRoot: (props: DrawerRootProps) => import("react").JSX.Element;
+export declare const DrawerRoot: (props: DrawerRootProps) => import('react').JSX.Element;

package/dist/components/drawer/drawer-stack.d.cts

@@ -2,4 +2,4 @@ import { ReactNode } from 'react';
 export interface DrawerStackProps {
     children?: ReactNode | undefined;
 }
-export declare const DrawerStack: (props: DrawerStackProps) => import("react").JSX.Element;
+export declare const DrawerStack: (props: DrawerStackProps) => import('react').JSX.Element;

package/dist/components/drawer/drawer-stack.d.ts

@@ -2,4 +2,4 @@ import { ReactNode } from 'react';
 export interface DrawerStackProps {
     children?: ReactNode | undefined;
 }
-export declare const DrawerStack: (props: DrawerStackProps) => import("react").JSX.Element;
+export declare const DrawerStack: (props: DrawerStackProps) => import('react').JSX.Element;

package/dist/components/field/field-item.d.cts

@@ -5,6 +5,6 @@ export interface FieldItemBaseProps {
 export interface FieldItemProps extends PropsWithChildren<FieldItemBaseProps> {
 }
 export declare const FieldItem: {
-    (props: FieldItemProps): import("react").JSX.Element;
+    (props: FieldItemProps): import('react').JSX.Element;
     displayName: string;
 };

package/dist/components/field/field-item.d.ts

@@ -5,6 +5,6 @@ export interface FieldItemBaseProps {
 export interface FieldItemProps extends PropsWithChildren<FieldItemBaseProps> {
 }
 export declare const FieldItem: {
-    (props: FieldItemProps): import("react").JSX.Element;
+    (props: FieldItemProps): import('react').JSX.Element;
     displayName: string;
 };

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

@@ -71,10 +71,9 @@ var useField = (props = {}) => {
 		labelId,
 		targetControlId
 	]);
-	const errorMessageId = hasErrorText && invalid ? errorTextId : void 0;
+	const describedById = [hasErrorText && invalid ? errorTextId : void 0, hasHelperText ? helperTextId : void 0].filter(Boolean).join(" ") || void 0;
 	const getControlProps = (0, react.useMemo)(() => () => ({
-		"aria-describedby": hasHelperText ? helperTextId : void 0,
-		"aria-errormessage": errorMessageId,
+		"aria-describedby": describedById,
 		"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),
@@ -84,13 +83,11 @@ var useField = (props = {}) => {
 		disabled,
 		readOnly
 	}), [
-		hasHelperText,
-		helperTextId,
+		describedById,
 		invalid,
 		required,
 		readOnly,
 		id,
-		errorMessageId,
 		disabled
 	]);
 	const getInputProps = (0, react.useMemo)(() => () => ({
@@ -120,7 +117,7 @@ var useField = (props = {}) => {
 		...require_field_anatomy.parts.requiredIndicator.attrs
 	}), []);
 	return {
-		ariaDescribedby: hasHelperText ? helperTextId : void 0,
+		ariaDescribedby: describedById,
 		ids: {
 			root: rootId,
 			control: id,

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

@@ -71,10 +71,9 @@ var useField = (props = {}) => {
 		labelId,
 		targetControlId
 	]);
-	const errorMessageId = hasErrorText && invalid ? errorTextId : void 0;
+	const describedById = [hasErrorText && invalid ? errorTextId : void 0, hasHelperText ? helperTextId : void 0].filter(Boolean).join(" ") || void 0;
 	const getControlProps = useMemo(() => () => ({
-		"aria-describedby": hasHelperText ? helperTextId : void 0,
-		"aria-errormessage": errorMessageId,
+		"aria-describedby": describedById,
 		"aria-invalid": ariaAttr(invalid),
 		"data-invalid": dataAttr(invalid),
 		"data-required": dataAttr(required),
@@ -84,13 +83,11 @@ var useField = (props = {}) => {
 		disabled,
 		readOnly
 	}), [
-		hasHelperText,
-		helperTextId,
+		describedById,
 		invalid,
 		required,
 		readOnly,
 		id,
-		errorMessageId,
 		disabled
 	]);
 	const getInputProps = useMemo(() => () => ({
@@ -120,7 +117,7 @@ var useField = (props = {}) => {
 		...parts.requiredIndicator.attrs
 	}), []);
 	return {
-		ariaDescribedby: hasHelperText ? helperTextId : void 0,
+		ariaDescribedby: describedById,
 		ids: {
 			root: rootId,
 			control: id,

package/dist/components/floating-panel/floating-panel-root-provider.d.cts

@@ -9,5 +9,5 @@ export interface FloatingPanelRootProviderBaseProps extends RootProviderProps, O
 export interface FloatingPanelRootProviderProps extends FloatingPanelRootProviderBaseProps {
     children?: ReactNode | undefined;
 }
-export declare const FloatingPanelRootProvider: (props: FloatingPanelRootProviderProps) => import("react").JSX.Element;
+export declare const FloatingPanelRootProvider: (props: FloatingPanelRootProviderProps) => import('react').JSX.Element;
 export {};

package/dist/components/floating-panel/floating-panel-root-provider.d.ts

@@ -9,5 +9,5 @@ export interface FloatingPanelRootProviderBaseProps extends RootProviderProps, O
 export interface FloatingPanelRootProviderProps extends FloatingPanelRootProviderBaseProps {
     children?: ReactNode | undefined;
 }
-export declare const FloatingPanelRootProvider: (props: FloatingPanelRootProviderProps) => import("react").JSX.Element;
+export declare const FloatingPanelRootProvider: (props: FloatingPanelRootProviderProps) => import('react').JSX.Element;
 export {};

package/dist/components/floating-panel/floating-panel-root.d.cts

@@ -6,4 +6,4 @@ export interface FloatingPanelRootBaseProps extends UseFloatingPanelProps, UsePr
 export interface FloatingPanelRootProps extends FloatingPanelRootBaseProps {
     children?: ReactNode | undefined;
 }
-export declare const FloatingPanelRoot: (props: FloatingPanelRootProps) => import("react").JSX.Element;
+export declare const FloatingPanelRoot: (props: FloatingPanelRootProps) => import('react').JSX.Element;

package/dist/components/floating-panel/floating-panel-root.d.ts

@@ -6,4 +6,4 @@ export interface FloatingPanelRootBaseProps extends UseFloatingPanelProps, UsePr
 export interface FloatingPanelRootProps extends FloatingPanelRootBaseProps {
     children?: ReactNode | undefined;
 }
-export declare const FloatingPanelRoot: (props: FloatingPanelRootProps) => import("react").JSX.Element;
+export declare const FloatingPanelRoot: (props: FloatingPanelRootProps) => import('react').JSX.Element;

package/dist/components/format/format-byte.d.cts

@@ -17,6 +17,6 @@ export interface FormatByteProps {
     value: number;
 }
 export declare const FormatByte: {
-    (props: FormatByteProps): import("react").JSX.Element;
+    (props: FormatByteProps): import('react').JSX.Element;
     displayName: string;
 };

package/dist/components/format/format-byte.d.ts

@@ -17,6 +17,6 @@ export interface FormatByteProps {
     value: number;
 }
 export declare const FormatByte: {
-    (props: FormatByteProps): import("react").JSX.Element;
+    (props: FormatByteProps): import('react').JSX.Element;
     displayName: string;
 };

package/dist/components/format/format-number.d.cts

@@ -5,6 +5,6 @@ export interface FormatNumberProps extends Intl.NumberFormatOptions {
     value: number;
 }
 export declare const FormatNumber: {
-    (props: FormatNumberProps): import("react").JSX.Element;
+    (props: FormatNumberProps): import('react').JSX.Element;
     displayName: string;
 };

package/dist/components/format/format-number.d.ts

@@ -5,6 +5,6 @@ export interface FormatNumberProps extends Intl.NumberFormatOptions {
     value: number;
 }
 export declare const FormatNumber: {
-    (props: FormatNumberProps): import("react").JSX.Element;
+    (props: FormatNumberProps): import('react').JSX.Element;
     displayName: string;
 };

package/dist/components/format/format-relative-time.d.cts

@@ -5,6 +5,6 @@ export interface FormatRelativeTimeProps extends Intl.RelativeTimeFormatOptions
     value: Date;
 }
 export declare const FormatRelativeTime: {
-    (props: FormatRelativeTimeProps): import("react").JSX.Element;
+    (props: FormatRelativeTimeProps): import('react').JSX.Element;
     displayName: string;
 };

package/dist/components/format/format-relative-time.d.ts

@@ -5,6 +5,6 @@ export interface FormatRelativeTimeProps extends Intl.RelativeTimeFormatOptions
     value: Date;
 }
 export declare const FormatRelativeTime: {
-    (props: FormatRelativeTimeProps): import("react").JSX.Element;
+    (props: FormatRelativeTimeProps): import('react').JSX.Element;
     displayName: string;
 };

package/dist/components/format/format-time.d.cts

@@ -6,6 +6,6 @@ export interface FormatTimeProps extends FormatTimeOptions {
     value: string | Date;
 }
 export declare const FormatTime: {
-    (props: FormatTimeProps): import("react").JSX.Element;
+    (props: FormatTimeProps): import('react').JSX.Element;
     displayName: string;
 };

package/dist/components/format/format-time.d.ts

@@ -6,6 +6,6 @@ export interface FormatTimeProps extends FormatTimeOptions {
     value: string | Date;
 }
 export declare const FormatTime: {
-    (props: FormatTimeProps): import("react").JSX.Element;
+    (props: FormatTimeProps): import('react').JSX.Element;
     displayName: string;
 };

package/dist/components/highlight/highlight.d.cts

@@ -4,4 +4,4 @@ export interface HighlightBaseProps extends UseHighlightProps {
 }
 export interface HighlightProps extends Assign<React.ComponentProps<'mark'>, HighlightBaseProps> {
 }
-export declare const Highlight: (props: HighlightProps) => import("react").JSX.Element;
+export declare const Highlight: (props: HighlightProps) => import('react').JSX.Element;

package/dist/components/highlight/highlight.d.ts

@@ -4,4 +4,4 @@ export interface HighlightBaseProps extends UseHighlightProps {
 }
 export interface HighlightProps extends Assign<React.ComponentProps<'mark'>, HighlightBaseProps> {
 }
-export declare const Highlight: (props: HighlightProps) => import("react").JSX.Element;
+export declare const Highlight: (props: HighlightProps) => import('react').JSX.Element;

package/dist/components/hover-card/hover-card-root-provider.d.cts

@@ -9,5 +9,5 @@ export interface HoverCardRootProviderBaseProps extends RootProviderProps, UsePr
 export interface HoverCardRootProviderProps extends HoverCardRootProviderBaseProps {
     children?: ReactNode | undefined;
 }
-export declare const HoverCardRootProvider: (props: HoverCardRootProviderProps) => import("react").JSX.Element;
+export declare const HoverCardRootProvider: (props: HoverCardRootProviderProps) => import('react').JSX.Element;
 export {};

package/dist/components/hover-card/hover-card-root-provider.d.ts

@@ -9,5 +9,5 @@ export interface HoverCardRootProviderBaseProps extends RootProviderProps, UsePr
 export interface HoverCardRootProviderProps extends HoverCardRootProviderBaseProps {
     children?: ReactNode | undefined;
 }
-export declare const HoverCardRootProvider: (props: HoverCardRootProviderProps) => import("react").JSX.Element;
+export declare const HoverCardRootProvider: (props: HoverCardRootProviderProps) => import('react').JSX.Element;
 export {};

package/dist/components/hover-card/hover-card-root.d.cts

@@ -6,4 +6,4 @@ export interface HoverCardRootBaseProps extends UseHoverCardProps, UsePresencePr
 export interface HoverCardRootProps extends HoverCardRootBaseProps {
     children?: ReactNode | undefined;
 }
-export declare const HoverCardRoot: (props: HoverCardRootProps) => import("react").JSX.Element;
+export declare const HoverCardRoot: (props: HoverCardRootProps) => import('react').JSX.Element;

package/dist/components/hover-card/hover-card-root.d.ts

@@ -6,4 +6,4 @@ export interface HoverCardRootBaseProps extends UseHoverCardProps, UsePresencePr
 export interface HoverCardRootProps extends HoverCardRootBaseProps {
     children?: ReactNode | undefined;
 }
-export declare const HoverCardRoot: (props: HoverCardRootProps) => import("react").JSX.Element;
+export declare const HoverCardRoot: (props: HoverCardRootProps) => import('react').JSX.Element;

package/dist/components/image-cropper/image-cropper.d.cts

@@ -1,4 +1,5 @@
 export type { CropChangeDetails, FlipChangeDetails, FlipState, HandlePosition, RotationChangeDetails, ZoomChangeDetails, SelectionLabelDetails, PreviewDescriptionDetails, SelectionValueTextDetails, } from '@zag-js/image-cropper';
+export type { Rect } from '@zag-js/types';
 export { handles } from '@zag-js/image-cropper';
 export { ImageCropperContext as Context, type ImageCropperContextProps as ContextProps, } from './image-cropper-context.js';
 export { ImageCropperGrid as Grid, type ImageCropperGridBaseProps as GridBaseProps, type ImageCropperGridProps as GridProps, } from './image-cropper-grid.js';

package/dist/components/image-cropper/image-cropper.d.ts

@@ -1,4 +1,5 @@
 export type { CropChangeDetails, FlipChangeDetails, FlipState, HandlePosition, RotationChangeDetails, ZoomChangeDetails, SelectionLabelDetails, PreviewDescriptionDetails, SelectionValueTextDetails, } from '@zag-js/image-cropper';
+export type { Rect } from '@zag-js/types';
 export { handles } from '@zag-js/image-cropper';
 export { ImageCropperContext as Context, type ImageCropperContextProps as ContextProps, } from './image-cropper-context.js';
 export { ImageCropperGrid as Grid, type ImageCropperGridBaseProps as GridBaseProps, type ImageCropperGridProps as GridProps, } from './image-cropper-grid.js';