@ark-ui/react 5.39.3 → 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.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/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/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.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/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.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/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,13 +62,13 @@ 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
 	]);
@@ -78,7 +79,7 @@ var useField = (props = {}) => {
 		"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
@@ -87,7 +88,7 @@ var useField = (props = {}) => {
 		invalid,
 		required,
 		readOnly,
-		id,
+		controlId,
 		disabled
 	]);
 	const getInputProps = (0, react.useMemo)(() => () => ({
@@ -120,7 +121,7 @@ var useField = (props = {}) => {
 		ariaDescribedby: describedById,
 		ids: {
 			root: rootId,
-			control: id,
+			control: controlId,
 			label: labelId,
 			errorText: errorTextId,
 			helperText: helperTextId

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,13 +62,13 @@ 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
 	]);
@@ -78,7 +79,7 @@ var useField = (props = {}) => {
 		"data-invalid": dataAttr(invalid),
 		"data-required": dataAttr(required),
 		"data-readonly": dataAttr(readOnly),
-		id,
+		id: controlId,
 		required,
 		disabled,
 		readOnly
@@ -87,7 +88,7 @@ var useField = (props = {}) => {
 		invalid,
 		required,
 		readOnly,
-		id,
+		controlId,
 		disabled
 	]);
 	const getInputProps = useMemo(() => () => ({
@@ -120,7 +121,7 @@ var useField = (props = {}) => {
 		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.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/frame/index.js

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

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/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.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>>;

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

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

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

@@ -8,6 +8,10 @@ let react_jsx_runtime = require("react/jsx-runtime");
 var PaginationLastTrigger = (0, react.forwardRef)((props, ref) => {
 	const pagination = require_use_pagination_context.usePaginationContext();
 	const mergedProps = (0, _zag_js_react.mergeProps)(pagination.getLastTriggerProps(), 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-last-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 PaginationLastTriggerBaseProps extends PolymorphicProps {
 }
-export interface PaginationLastTriggerProps extends HTMLProps<'button'>, PaginationLastTriggerBaseProps {
+export interface PaginationLastTriggerProps extends HTMLProps<'button'>, PaginationAnchorProps, PaginationLastTriggerBaseProps {
 }
-export declare const PaginationLastTrigger: ForwardRefExoticComponent<PaginationLastTriggerProps & RefAttributes<HTMLButtonElement>>;
+export declare const PaginationLastTrigger: ForwardRefExoticComponent<PaginationLastTriggerProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;

package/dist/components/pagination/pagination-last-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 PaginationLastTriggerBaseProps extends PolymorphicProps {
 }
-export interface PaginationLastTriggerProps extends HTMLProps<'button'>, PaginationLastTriggerBaseProps {
+export interface PaginationLastTriggerProps extends HTMLProps<'button'>, PaginationAnchorProps, PaginationLastTriggerBaseProps {
 }
-export declare const PaginationLastTrigger: ForwardRefExoticComponent<PaginationLastTriggerProps & RefAttributes<HTMLButtonElement>>;
+export declare const PaginationLastTrigger: ForwardRefExoticComponent<PaginationLastTriggerProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;

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

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

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

@@ -8,6 +8,10 @@ let react_jsx_runtime = require("react/jsx-runtime");
 var PaginationNextTrigger = (0, react.forwardRef)((props, ref) => {
 	const pagination = require_use_pagination_context.usePaginationContext();
 	const mergedProps = (0, _zag_js_react.mergeProps)(pagination.getNextTriggerProps(), 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-next-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 PaginationNextTriggerBaseProps extends PolymorphicProps {
 }
-export interface PaginationNextTriggerProps extends HTMLProps<'button'>, PaginationNextTriggerBaseProps {
+export interface PaginationNextTriggerProps extends HTMLProps<'button'>, PaginationAnchorProps, PaginationNextTriggerBaseProps {
 }
-export declare const PaginationNextTrigger: ForwardRefExoticComponent<PaginationNextTriggerProps & RefAttributes<HTMLButtonElement>>;
+export declare const PaginationNextTrigger: ForwardRefExoticComponent<PaginationNextTriggerProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;