@ark-ui/react 5.39.2 → 5.40.0

package/dist/components/accordion/accordion.anatomy.js

@@ -1,3 +1,2 @@
 "use client";
-import { anatomy as accordionAnatomy } from "@zag-js/accordion";
-export { accordionAnatomy };
+export { anatomy as accordionAnatomy } from "@zag-js/accordion";

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/angle-slider/angle-slider.anatomy.js

@@ -1,3 +1,2 @@
 "use client";
-import { anatomy as angleSliderAnatomy } from "@zag-js/angle-slider";
-export { angleSliderAnatomy };
+export { anatomy as angleSliderAnatomy } from "@zag-js/angle-slider";

package/dist/components/avatar/avatar.anatomy.js

@@ -1,3 +1,2 @@
 "use client";
-import { anatomy as avatarAnatomy } from "@zag-js/avatar";
-export { avatarAnatomy };
+export { anatomy as avatarAnatomy } from "@zag-js/avatar";

package/dist/components/client-only/index.js

@@ -1,2 +1 @@
-import { ClientOnly } from "./client-only.js";
-export { ClientOnly };
+export { ClientOnly } from "./client-only.js";

package/dist/components/clipboard/clipboard.anatomy.js

@@ -1,3 +1,2 @@
 "use client";
-import { anatomy as clipboardAnatomy } from "@zag-js/clipboard";
-export { clipboardAnatomy };
+export { anatomy as clipboardAnatomy } from "@zag-js/clipboard";

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/collapsible/collapsible.anatomy.js

@@ -1,3 +1,2 @@
 "use client";
-import { anatomy as collapsibleAnatomy } from "@zag-js/collapsible";
-export { collapsibleAnatomy };
+export { anatomy as collapsibleAnatomy } from "@zag-js/collapsible";

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/color-picker/color-picker-channel-input.cjs

@@ -1,6 +1,7 @@
 "use client";
 const require_create_split_props = require("../../utils/create-split-props.cjs");
 const require_factory = require("../factory.cjs");
+const require_use_field_context = require("../field/use-field-context.cjs");
 const require_use_color_picker_context = require("./use-color-picker-context.cjs");
 let react = require("react");
 let _zag_js_react = require("@zag-js/react");
@@ -11,7 +12,9 @@ var ColorPickerChannelInput = (0, react.forwardRef)((props, ref) => {
 	const [channelProps, localProps] = splitChannelInputProps(props, ["channel", "orientation"]);
 	const colorPicker = require_use_color_picker_context.useColorPickerContext();
 	const mergedProps = (0, _zag_js_react.mergeProps)(colorPicker.getChannelInputProps(channelProps), localProps);
+	const field = require_use_field_context.useFieldContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.input, {
+		"aria-describedby": field?.ariaDescribedby,
 		...mergedProps,
 		ref
 	});

package/dist/components/color-picker/color-picker-channel-input.js

@@ -1,6 +1,7 @@
 "use client";
 import { createSplitProps } from "../../utils/create-split-props.js";
 import { ark } from "../factory.js";
+import { useFieldContext } from "../field/use-field-context.js";
 import { useColorPickerContext } from "./use-color-picker-context.js";
 import { forwardRef } from "react";
 import { mergeProps } from "@zag-js/react";
@@ -11,7 +12,9 @@ var ColorPickerChannelInput = forwardRef((props, ref) => {
 	const [channelProps, localProps] = splitChannelInputProps(props, ["channel", "orientation"]);
 	const colorPicker = useColorPickerContext();
 	const mergedProps = mergeProps(colorPicker.getChannelInputProps(channelProps), localProps);
+	const field = useFieldContext();
 	return /* @__PURE__ */ jsx(ark.input, {
+		"aria-describedby": field?.ariaDescribedby,
 		...mergedProps,
 		ref
 	});

package/dist/components/color-picker/color-picker-trigger.cjs

@@ -1,5 +1,6 @@
 "use client";
 const require_factory = require("../factory.cjs");
+const require_use_field_context = require("../field/use-field-context.cjs");
 const require_use_color_picker_context = require("./use-color-picker-context.cjs");
 let react = require("react");
 let _zag_js_react = require("@zag-js/react");
@@ -8,7 +9,9 @@ let react_jsx_runtime = require("react/jsx-runtime");
 var ColorPickerTrigger = (0, react.forwardRef)((props, ref) => {
 	const colorPicker = require_use_color_picker_context.useColorPickerContext();
 	const mergedProps = (0, _zag_js_react.mergeProps)(colorPicker.getTriggerProps(), props);
+	const field = require_use_field_context.useFieldContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.button, {
+		"aria-describedby": field?.ariaDescribedby,
 		...mergedProps,
 		ref
 	});

package/dist/components/color-picker/color-picker-trigger.js

@@ -1,5 +1,6 @@
 "use client";
 import { ark } from "../factory.js";
+import { useFieldContext } from "../field/use-field-context.js";
 import { useColorPickerContext } from "./use-color-picker-context.js";
 import { forwardRef } from "react";
 import { mergeProps } from "@zag-js/react";
@@ -8,7 +9,9 @@ import { jsx } from "react/jsx-runtime";
 var ColorPickerTrigger = forwardRef((props, ref) => {
 	const colorPicker = useColorPickerContext();
 	const mergedProps = mergeProps(colorPicker.getTriggerProps(), props);
+	const field = useFieldContext();
 	return /* @__PURE__ */ jsx(ark.button, {
+		"aria-describedby": field?.ariaDescribedby,
 		...mergedProps,
 		ref
 	});

package/dist/components/combobox/combobox-root.cjs

@@ -31,6 +31,7 @@ var ComboboxImpl = (props, ref) => {
 		"ids",
 		"inputBehavior",
 		"inputValue",
+		"loading",
 		"invalid",
 		"loopFocus",
 		"multiple",

package/dist/components/combobox/combobox-root.js

@@ -31,6 +31,7 @@ var ComboboxImpl = (props, ref) => {
 		"ids",
 		"inputBehavior",
 		"inputValue",
+		"loading",
 		"invalid",
 		"loopFocus",
 		"multiple",

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.anatomy.js

@@ -1,3 +1,2 @@
 "use client";
-import { anatomy as dateInputAnatomy } from "@zag-js/date-input";
-export { dateInputAnatomy };
+export { anatomy as dateInputAnatomy } from "@zag-js/date-input";

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/dialog/dialog.anatomy.js

@@ -1,3 +1,2 @@
 "use client";
-import { anatomy as dialogAnatomy } from "@zag-js/dialog";
-export { dialogAnatomy };
+export { anatomy as dialogAnatomy } from "@zag-js/dialog";

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/drawer/drawer.anatomy.js

@@ -1,3 +1,2 @@
 "use client";
-import { anatomy as drawerAnatomy } from "@zag-js/drawer";
-export { drawerAnatomy };
+export { anatomy as drawerAnatomy } from "@zag-js/drawer";

package/dist/components/editable/editable.anatomy.js

@@ -1,3 +1,2 @@
 "use client";
-import { anatomy as editableAnatomy } from "@zag-js/editable";
-export { editableAnatomy };
+export { anatomy as editableAnatomy } from "@zag-js/editable";

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

@@ -15,7 +15,8 @@ var useField = (props = {}) => {
 	const uid = (0, react.useId)();
 	const id = props.id ?? uid;
 	const rootRef = (0, react.useRef)(null);
-	const rootId = ids?.control ?? `field::${id}`;
+	const rootId = ids?.root ?? `field::${id}`;
+	const controlId = ids?.control ?? id;
 	const errorTextId = ids?.errorText ?? `field::${id}::error-text`;
 	const helperTextId = ids?.helperText ?? `field::${id}::helper-text`;
 	const labelId = ids?.label ?? `field::${id}::label`;
@@ -53,7 +54,7 @@ var useField = (props = {}) => {
 		readOnly,
 		rootId
 	]);
-	const targetControlId = target ? `field::${id}::item::${target}` : void 0;
+	const targetControlId = target ? `field::${controlId}::item::${target}` : void 0;
 	const getLabelProps = (0, react.useMemo)(() => () => ({
 		...require_field_anatomy.parts.label.attrs,
 		id: labelId,
@@ -61,36 +62,33 @@ var useField = (props = {}) => {
 		"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
+		htmlFor: targetControlId ?? controlId
 	}), [
 		disabled,
 		invalid,
 		readOnly,
 		required,
-		id,
+		controlId,
 		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),
 		"data-readonly": (0, _zag_js_dom_query.dataAttr)(readOnly),
-		id,
+		id: controlId,
 		required,
 		disabled,
 		readOnly
 	}), [
-		hasHelperText,
-		helperTextId,
+		describedById,
 		invalid,
 		required,
 		readOnly,
-		id,
-		errorMessageId,
+		controlId,
 		disabled
 	]);
 	const getInputProps = (0, react.useMemo)(() => () => ({
@@ -120,10 +118,10 @@ var useField = (props = {}) => {
 		...require_field_anatomy.parts.requiredIndicator.attrs
 	}), []);
 	return {
-		ariaDescribedby: hasHelperText ? helperTextId : void 0,
+		ariaDescribedby: describedById,
 		ids: {
 			root: rootId,
-			control: id,
+			control: controlId,
 			label: labelId,
 			errorText: errorTextId,
 			helperText: helperTextId