@ark-ui/react 5.39.2 → 5.40.0

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

@@ -15,7 +15,8 @@ var useField = (props = {}) => {
 	const uid = useId();
 	const id = props.id ?? uid;
 	const rootRef = 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 = useMemo(() => () => ({
 		...parts.label.attrs,
 		id: labelId,
@@ -61,36 +62,33 @@ var useField = (props = {}) => {
 		"data-invalid": dataAttr(invalid),
 		"data-readonly": dataAttr(readOnly),
 		"data-required": 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 = 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),
 		"data-readonly": dataAttr(readOnly),
-		id,
+		id: controlId,
 		required,
 		disabled,
 		readOnly
 	}), [
-		hasHelperText,
-		helperTextId,
+		describedById,
 		invalid,
 		required,
 		readOnly,
-		id,
-		errorMessageId,
+		controlId,
 		disabled
 	]);
 	const getInputProps = useMemo(() => () => ({
@@ -120,10 +118,10 @@ var useField = (props = {}) => {
 		...parts.requiredIndicator.attrs
 	}), []);
 	return {
-		ariaDescribedby: hasHelperText ? helperTextId : void 0,
+		ariaDescribedby: describedById,
 		ids: {
 			root: rootId,
-			control: id,
+			control: controlId,
 			label: labelId,
 			errorText: errorTextId,
 			helperText: helperTextId

package/dist/components/file-upload/file-upload-dropzone.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_file_upload_context = require("./use-file-upload-context.cjs");
 let react = require("react");
 let _zag_js_react = require("@zag-js/react");
@@ -11,7 +12,9 @@ var FileUploadDropzone = (0, react.forwardRef)((props, ref) => {
 	const [dropzoneProps, localProps] = splitDropzoneProps(props, ["disableClick"]);
 	const fileUpload = require_use_file_upload_context.useFileUploadContext();
 	const mergedProps = (0, _zag_js_react.mergeProps)(fileUpload.getDropzoneProps(dropzoneProps), localProps);
+	const field = require_use_field_context.useFieldContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
+		"aria-describedby": field?.ariaDescribedby,
 		...mergedProps,
 		ref
 	});

package/dist/components/file-upload/file-upload-dropzone.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 { useFileUploadContext } from "./use-file-upload-context.js";
 import { forwardRef } from "react";
 import { mergeProps } from "@zag-js/react";
@@ -11,7 +12,9 @@ var FileUploadDropzone = forwardRef((props, ref) => {
 	const [dropzoneProps, localProps] = splitDropzoneProps(props, ["disableClick"]);
 	const fileUpload = useFileUploadContext();
 	const mergedProps = mergeProps(fileUpload.getDropzoneProps(dropzoneProps), localProps);
+	const field = useFieldContext();
 	return /* @__PURE__ */ jsx(ark.div, {
+		"aria-describedby": field?.ariaDescribedby,
 		...mergedProps,
 		ref
 	});

package/dist/components/file-upload/file-upload-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_file_upload_context = require("./use-file-upload-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 FileUploadTrigger = (0, react.forwardRef)((props, ref) => {
 	const fileUpload = require_use_file_upload_context.useFileUploadContext();
 	const mergedProps = (0, _zag_js_react.mergeProps)(fileUpload.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/file-upload/file-upload-trigger.js

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

package/dist/components/file-upload/file-upload.anatomy.js

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

package/dist/components/file-upload/use-file-upload.cjs

@@ -22,6 +22,7 @@ var useFileUpload = (props) => {
 		dir,
 		disabled: field?.disabled,
 		locale,
+		readOnly: field?.readOnly,
 		required: field?.required,
 		invalid: field?.invalid,
 		getRootNode,

package/dist/components/file-upload/use-file-upload.js

@@ -20,6 +20,7 @@ var useFileUpload = (props) => {
 		dir,
 		disabled: field?.disabled,
 		locale,
+		readOnly: field?.readOnly,
 		required: field?.required,
 		invalid: field?.invalid,
 		getRootNode,

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

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

package/dist/components/focus-trap/index.js

@@ -1,2 +1 @@
-import { FocusTrap } from "./focus-trap.js";
-export { FocusTrap };
+export { FocusTrap } from "./focus-trap.js";

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/frame/index.js

@@ -1,2 +1 @@
-import { Frame } from "./frame.js";
-export { Frame };
+export { Frame } from "./frame.js";

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

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

package/dist/components/image-cropper/image-cropper.anatomy.js

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

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';

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

@@ -1,4 +1,5 @@
 export type { CropChangeDetails as ImageCropperCropChangeDetails, FlipChangeDetails as ImageCropperFlipChangeDetails, FlipState as ImageCropperFlipState, HandlePosition as ImageCropperHandlePosition, RotationChangeDetails as ImageCropperRotationChangeDetails, ZoomChangeDetails as ImageCropperZoomChangeDetails, } from '@zag-js/image-cropper';
+export type { Rect as ImageCropperRect } from '@zag-js/types';
 export { ImageCropperContext, type ImageCropperContextProps } from './image-cropper-context.js';
 export { ImageCropperGrid, type ImageCropperGridBaseProps, type ImageCropperGridProps } from './image-cropper-grid.js';
 export { ImageCropperHandle, type ImageCropperHandleBaseProps, type ImageCropperHandleProps, } from './image-cropper-handle.js';

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

@@ -1,4 +1,5 @@
 export type { CropChangeDetails as ImageCropperCropChangeDetails, FlipChangeDetails as ImageCropperFlipChangeDetails, FlipState as ImageCropperFlipState, HandlePosition as ImageCropperHandlePosition, RotationChangeDetails as ImageCropperRotationChangeDetails, ZoomChangeDetails as ImageCropperZoomChangeDetails, } from '@zag-js/image-cropper';
+export type { Rect as ImageCropperRect } from '@zag-js/types';
 export { ImageCropperContext, type ImageCropperContextProps } from './image-cropper-context.js';
 export { ImageCropperGrid, type ImageCropperGridBaseProps, type ImageCropperGridProps } from './image-cropper-grid.js';
 export { ImageCropperHandle, type ImageCropperHandleBaseProps, type ImageCropperHandleProps, } from './image-cropper-handle.js';

package/dist/components/json-tree-view/json-tree-view-node.d.cts

@@ -17,4 +17,4 @@ export interface JsonTreeViewNodeProps extends JsonTreeViewNodeBaseProps {
     node: JsonNode;
     indexPath: number[];
 }
-export declare function JsonTreeViewNode(props: JsonTreeViewNodeProps): import("react").JSX.Element;
+export declare function JsonTreeViewNode(props: JsonTreeViewNodeProps): import('react').JSX.Element;

package/dist/components/json-tree-view/json-tree-view-node.d.ts

@@ -17,4 +17,4 @@ export interface JsonTreeViewNodeProps extends JsonTreeViewNodeBaseProps {
     node: JsonNode;
     indexPath: number[];
 }
-export declare function JsonTreeViewNode(props: JsonTreeViewNodeProps): import("react").JSX.Element;
+export declare function JsonTreeViewNode(props: JsonTreeViewNodeProps): import('react').JSX.Element;

package/dist/components/listbox/listbox-item-text.cjs

@@ -10,7 +10,7 @@ var ListboxItemText = (0, react.forwardRef)((props, ref) => {
 	const listbox = require_use_listbox_context.useListboxContext();
 	const itemProps = require_use_listbox_item_props_context.useListboxItemPropsContext();
 	const mergedProps = (0, _zag_js_react.mergeProps)(listbox.getItemTextProps(itemProps), props);
-	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/listbox/listbox-item-text.d.cts

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

package/dist/components/listbox/listbox-item-text.d.ts

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

package/dist/components/listbox/listbox-item-text.js

@@ -10,7 +10,7 @@ var ListboxItemText = forwardRef((props, ref) => {
 	const listbox = useListboxContext();
 	const itemProps = useListboxItemPropsContext();
 	const mergedProps = mergeProps(listbox.getItemTextProps(itemProps), props);
-	return /* @__PURE__ */ jsx(ark.div, {
+	return /* @__PURE__ */ jsx(ark.span, {
 		...mergedProps,
 		ref
 	});

package/dist/components/marquee/marquee.anatomy.js

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

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

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

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

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

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

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

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

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

package/dist/components/menu/menu.anatomy.js

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

package/dist/components/navigation-menu/navigation-menu.anatomy.js

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

package/dist/components/number-input/number-input.anatomy.js

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

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

@@ -9,6 +9,6 @@ export { PaginationPrevTrigger, type PaginationPrevTriggerBaseProps, type Pagina
 export { PaginationRoot, type PaginationRootBaseProps, type PaginationRootProps } from './pagination-root.js';
 export { PaginationRootProvider, type PaginationRootProviderBaseProps, type PaginationRootProviderProps, } from './pagination-root-provider.js';
 export { paginationAnatomy } from './pagination.anatomy.js';
-export { usePagination, type UsePaginationProps, type UsePaginationReturn } from './use-pagination.js';
+export { usePagination, type PaginationAnchorProps, type UsePaginationProps, type UsePaginationReturn, } from './use-pagination.js';
 export { usePaginationContext, type UsePaginationContext } from './use-pagination-context.js';
 export * as Pagination from './pagination.js';

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

@@ -9,6 +9,6 @@ export { PaginationPrevTrigger, type PaginationPrevTriggerBaseProps, type Pagina
 export { PaginationRoot, type PaginationRootBaseProps, type PaginationRootProps } from './pagination-root.js';
 export { PaginationRootProvider, type PaginationRootProviderBaseProps, type PaginationRootProviderProps, } from './pagination-root-provider.js';
 export { paginationAnatomy } from './pagination.anatomy.js';
-export { usePagination, type UsePaginationProps, type UsePaginationReturn } from './use-pagination.js';
+export { usePagination, type PaginationAnchorProps, type UsePaginationProps, type UsePaginationReturn, } from './use-pagination.js';
 export { usePaginationContext, type UsePaginationContext } from './use-pagination-context.js';
 export * as Pagination from './pagination.js';

package/dist/components/pagination/pagination-first-trigger.cjs

@@ -8,6 +8,10 @@ let react_jsx_runtime = require("react/jsx-runtime");
 var PaginationFirstTrigger = (0, react.forwardRef)((props, ref) => {
 	const pagination = require_use_pagination_context.usePaginationContext();
 	const mergedProps = (0, _zag_js_react.mergeProps)(pagination.getFirstTriggerProps(), props);
+	if (pagination.type === "link") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.a, {
+		...mergedProps,
+		ref
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.button, {
 		...mergedProps,
 		ref

package/dist/components/pagination/pagination-first-trigger.d.cts

@@ -1,7 +1,8 @@
 import { HTMLProps, PolymorphicProps } from '../factory.js';
+import { PaginationAnchorProps } from './use-pagination.js';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface PaginationFirstTriggerBaseProps extends PolymorphicProps {
 }
-export interface PaginationFirstTriggerProps extends HTMLProps<'button'>, PaginationFirstTriggerBaseProps {
+export interface PaginationFirstTriggerProps extends HTMLProps<'button'>, PaginationAnchorProps, PaginationFirstTriggerBaseProps {
 }
-export declare const PaginationFirstTrigger: ForwardRefExoticComponent<PaginationFirstTriggerProps & RefAttributes<HTMLButtonElement>>;
+export declare const PaginationFirstTrigger: ForwardRefExoticComponent<PaginationFirstTriggerProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;

package/dist/components/pagination/pagination-first-trigger.d.ts

@@ -1,7 +1,8 @@
 import { HTMLProps, PolymorphicProps } from '../factory.js';
+import { PaginationAnchorProps } from './use-pagination.js';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface PaginationFirstTriggerBaseProps extends PolymorphicProps {
 }
-export interface PaginationFirstTriggerProps extends HTMLProps<'button'>, PaginationFirstTriggerBaseProps {
+export interface PaginationFirstTriggerProps extends HTMLProps<'button'>, PaginationAnchorProps, PaginationFirstTriggerBaseProps {
 }
-export declare const PaginationFirstTrigger: ForwardRefExoticComponent<PaginationFirstTriggerProps & RefAttributes<HTMLButtonElement>>;
+export declare const PaginationFirstTrigger: ForwardRefExoticComponent<PaginationFirstTriggerProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;

package/dist/components/pagination/pagination-first-trigger.js

@@ -8,6 +8,10 @@ import { jsx } from "react/jsx-runtime";
 var PaginationFirstTrigger = forwardRef((props, ref) => {
 	const pagination = usePaginationContext();
 	const mergedProps = mergeProps(pagination.getFirstTriggerProps(), props);
+	if (pagination.type === "link") return /* @__PURE__ */ jsx(ark.a, {
+		...mergedProps,
+		ref
+	});
 	return /* @__PURE__ */ jsx(ark.button, {
 		...mergedProps,
 		ref

package/dist/components/pagination/pagination-item.cjs

@@ -11,6 +11,10 @@ var PaginationItem = (0, react.forwardRef)((props, ref) => {
 	const [itemProps, localProps] = splitItemProps(props, ["value", "type"]);
 	const pagination = require_use_pagination_context.usePaginationContext();
 	const mergedProps = (0, _zag_js_react.mergeProps)(pagination.getItemProps(itemProps), localProps);
+	if (pagination.type === "link") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.a, {
+		...mergedProps,
+		ref
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.button, {
 		...mergedProps,
 		ref

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

@@ -1,9 +1,10 @@
 import { ItemProps } from '@zag-js/pagination';
 import { Assign } from '../../types.js';
 import { HTMLProps, PolymorphicProps } from '../factory.js';
+import { PaginationAnchorProps } from './use-pagination.js';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface PaginationItemBaseProps extends ItemProps, PolymorphicProps {
 }
-export interface PaginationItemProps extends Assign<HTMLProps<'button'>, PaginationItemBaseProps> {
+export interface PaginationItemProps extends Assign<HTMLProps<'button'> & PaginationAnchorProps, PaginationItemBaseProps> {
 }
-export declare const PaginationItem: ForwardRefExoticComponent<PaginationItemProps & RefAttributes<HTMLButtonElement>>;
+export declare const PaginationItem: ForwardRefExoticComponent<PaginationItemProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;

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

@@ -1,9 +1,10 @@
 import { ItemProps } from '@zag-js/pagination';
 import { Assign } from '../../types.js';
 import { HTMLProps, PolymorphicProps } from '../factory.js';
+import { PaginationAnchorProps } from './use-pagination.js';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface PaginationItemBaseProps extends ItemProps, PolymorphicProps {
 }
-export interface PaginationItemProps extends Assign<HTMLProps<'button'>, PaginationItemBaseProps> {
+export interface PaginationItemProps extends Assign<HTMLProps<'button'> & PaginationAnchorProps, PaginationItemBaseProps> {
 }
-export declare const PaginationItem: ForwardRefExoticComponent<PaginationItemProps & RefAttributes<HTMLButtonElement>>;
+export declare const PaginationItem: ForwardRefExoticComponent<PaginationItemProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;