@ark-ui/react 5.39.3 → 5.40.0

package/dist/components/pagination/pagination-next-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 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>>;

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

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

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

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

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

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

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

package/dist/components/pagination/pagination.anatomy.js

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

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

@@ -1,6 +1,11 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types.js';
+import { HTMLProps } from '../factory.js';
 import * as pagination from '@zag-js/pagination';
+/**
+ * The anchor attributes the items and triggers accept, since they render as links under `type="link"`.
+ */
+export type PaginationAnchorProps = Omit<HTMLProps<'a'>, keyof HTMLProps<'button'>>;
 export interface UsePaginationProps extends Optional<Omit<pagination.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UsePaginationReturn extends pagination.Api<PropTypes> {

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

@@ -1,6 +1,11 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types.js';
+import { HTMLProps } from '../factory.js';
 import * as pagination from '@zag-js/pagination';
+/**
+ * The anchor attributes the items and triggers accept, since they render as links under `type="link"`.
+ */
+export type PaginationAnchorProps = Omit<HTMLProps<'a'>, keyof HTMLProps<'button'>>;
 export interface UsePaginationProps extends Optional<Omit<pagination.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UsePaginationReturn extends pagination.Api<PropTypes> {

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

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

package/dist/components/pin-input/pin-input-control.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_pin_input_context = require("./use-pin-input-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 PinInputControl = (0, react.forwardRef)((props, ref) => {
 	const pinInput = require_use_pin_input_context.usePinInputContext();
 	const mergedProps = (0, _zag_js_react.mergeProps)(pinInput.getControlProps(), props);
+	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/pin-input/pin-input-control.js

@@ -1,5 +1,6 @@
 "use client";
 import { ark } from "../factory.js";
+import { useFieldContext } from "../field/use-field-context.js";
 import { usePinInputContext } from "./use-pin-input-context.js";
 import { forwardRef } from "react";
 import { mergeProps } from "@zag-js/react";
@@ -8,7 +9,9 @@ import { jsx } from "react/jsx-runtime";
 var PinInputControl = forwardRef((props, ref) => {
 	const pinInput = usePinInputContext();
 	const mergedProps = mergeProps(pinInput.getControlProps(), props);
+	const field = useFieldContext();
 	return /* @__PURE__ */ jsx(ark.div, {
+		"aria-describedby": field?.ariaDescribedby,
 		...mergedProps,
 		ref
 	});

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

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

package/dist/components/popover/popover.anatomy.js

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

package/dist/components/portal/index.js

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

package/dist/components/progress/progress.anatomy.js

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

package/dist/components/qr-code/qr-code.anatomy.js

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

package/dist/components/radio-group/radio-group.anatomy.js

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

package/dist/components/rating-group/rating-group-control.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_rating_group_context = require("./use-rating-group-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 RatingGroupControl = (0, react.forwardRef)((props, ref) => {
 	const ratingGroup = require_use_rating_group_context.useRatingGroupContext();
 	const mergedProps = (0, _zag_js_react.mergeProps)(ratingGroup.getControlProps(), props);
+	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/rating-group/rating-group-control.js

@@ -1,5 +1,6 @@
 "use client";
 import { ark } from "../factory.js";
+import { useFieldContext } from "../field/use-field-context.js";
 import { useRatingGroupContext } from "./use-rating-group-context.js";
 import { forwardRef } from "react";
 import { mergeProps } from "@zag-js/react";
@@ -8,7 +9,9 @@ import { jsx } from "react/jsx-runtime";
 var RatingGroupControl = forwardRef((props, ref) => {
 	const ratingGroup = useRatingGroupContext();
 	const mergedProps = mergeProps(ratingGroup.getControlProps(), props);
+	const field = useFieldContext();
 	return /* @__PURE__ */ jsx(ark.div, {
+		"aria-describedby": field?.ariaDescribedby,
 		...mergedProps,
 		ref
 	});

package/dist/components/rating-group/rating-group-item.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_rating_group_context = require("./use-rating-group-context.cjs");
 const require_use_rating_group_item_context = require("./use-rating-group-item-context.cjs");
 let react = require("react");
@@ -13,9 +14,11 @@ var RatingGroupItem = (0, react.forwardRef)((props, ref) => {
 	const ratingGroup = require_use_rating_group_context.useRatingGroupContext();
 	const mergedProps = (0, _zag_js_react.mergeProps)(ratingGroup.getItemProps(itemProps), localProps);
 	const itemState = ratingGroup.getItemState(itemProps);
+	const field = require_use_field_context.useFieldContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_rating_group_item_context.RatingGroupItemProvider, {
 		value: itemState,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.span, {
+			"aria-describedby": field?.ariaDescribedby,
 			...mergedProps,
 			ref
 		})

package/dist/components/rating-group/rating-group-item.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 { useRatingGroupContext } from "./use-rating-group-context.js";
 import { RatingGroupItemProvider } from "./use-rating-group-item-context.js";
 import { forwardRef } from "react";
@@ -13,9 +14,11 @@ var RatingGroupItem = forwardRef((props, ref) => {
 	const ratingGroup = useRatingGroupContext();
 	const mergedProps = mergeProps(ratingGroup.getItemProps(itemProps), localProps);
 	const itemState = ratingGroup.getItemState(itemProps);
+	const field = useFieldContext();
 	return /* @__PURE__ */ jsx(RatingGroupItemProvider, {
 		value: itemState,
 		children: /* @__PURE__ */ jsx(ark.span, {
+			"aria-describedby": field?.ariaDescribedby,
 			...mergedProps,
 			ref
 		})

package/dist/components/rating-group/rating-group.anatomy.js

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

package/dist/components/scroll-area/scroll-area.anatomy.js

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

package/dist/components/select/select-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_select_context = require("./use-select-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 SelectTrigger = (0, react.forwardRef)((props, ref) => {
 	const select = require_use_select_context.useSelectContext();
 	const mergedProps = (0, _zag_js_react.mergeProps)(select.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/select/select-trigger.js

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

package/dist/components/select/select.anatomy.js

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

package/dist/components/signature-pad/signature-pad-control.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_signature_pad_context = require("./use-signature-pad-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 SignaturePadControl = (0, react.forwardRef)((props, ref) => {
 	const signaturePad = require_use_signature_pad_context.useSignaturePadContext();
 	const mergedProps = (0, _zag_js_react.mergeProps)(signaturePad.getControlProps(), props);
+	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/signature-pad/signature-pad-control.js

@@ -1,5 +1,6 @@
 "use client";
 import { ark } from "../factory.js";
+import { useFieldContext } from "../field/use-field-context.js";
 import { useSignaturePadContext } from "./use-signature-pad-context.js";
 import { forwardRef } from "react";
 import { mergeProps } from "@zag-js/react";
@@ -8,7 +9,9 @@ import { jsx } from "react/jsx-runtime";
 var SignaturePadControl = forwardRef((props, ref) => {
 	const signaturePad = useSignaturePadContext();
 	const mergedProps = mergeProps(signaturePad.getControlProps(), props);
+	const field = useFieldContext();
 	return /* @__PURE__ */ jsx(ark.div, {
+		"aria-describedby": field?.ariaDescribedby,
 		...mergedProps,
 		ref
 	});

package/dist/components/signature-pad/signature-pad.anatomy.js

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

package/dist/components/slider/slider.anatomy.js

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

package/dist/components/splitter/splitter.anatomy.js

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

package/dist/components/steps/steps.anatomy.js

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

package/dist/components/switch/switch.anatomy.js

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

package/dist/components/tabs/tabs.anatomy.js

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

package/dist/components/tags-input/tags-input-input.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_tags_input_context = require("./use-tags-input-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 TagsInputInput = (0, react.forwardRef)((props, ref) => {
 	const tagsInput = require_use_tags_input_context.useTagsInputContext();
 	const mergedProps = (0, _zag_js_react.mergeProps)(tagsInput.getInputProps(), props);
+	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/tags-input/tags-input-input.js

@@ -1,5 +1,6 @@
 "use client";
 import { ark } from "../factory.js";
+import { useFieldContext } from "../field/use-field-context.js";
 import { useTagsInputContext } from "./use-tags-input-context.js";
 import { forwardRef } from "react";
 import { mergeProps } from "@zag-js/react";
@@ -8,7 +9,9 @@ import { jsx } from "react/jsx-runtime";
 var TagsInputInput = forwardRef((props, ref) => {
 	const tagsInput = useTagsInputContext();
 	const mergedProps = mergeProps(tagsInput.getInputProps(), props);
+	const field = useFieldContext();
 	return /* @__PURE__ */ jsx(ark.input, {
+		"aria-describedby": field?.ariaDescribedby,
 		...mergedProps,
 		ref
 	});

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

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

package/dist/components/timer/timer.anatomy.js

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

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

@@ -1,20 +1,28 @@
 "use client";
+const require_factory = require("../factory.cjs");
 const require_use_toast_context = require("./use-toast-context.cjs");
 let react = require("react");
 let _zag_js_react = require("@zag-js/react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/toast/toast-root.tsx
 var ToastRoot = (0, react.forwardRef)((props, ref) => {
+	const { asChild, children, ...localProps } = props;
 	const toast = require_use_toast_context.useToastContext();
-	const mergedProps = (0, _zag_js_react.mergeProps)(toast.getRootProps(), props);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	const mergedProps = (0, _zag_js_react.mergeProps)(toast.getRootProps(), localProps);
+	const withGhosts = (content) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { ...toast.getGhostBeforeProps() }),
+		content,
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { ...toast.getGhostAfterProps() })
+	] });
+	const asChildContent = () => {
+		if (!(0, react.isValidElement)(children)) return children;
+		return (0, react.cloneElement)(children, void 0, withGhosts(children.props.children));
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
 		...mergedProps,
+		asChild,
 		ref,
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { ...toast.getGhostBeforeProps() }),
-			props.children,
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { ...toast.getGhostAfterProps() })
-		]
+		children: asChild ? asChildContent() : withGhosts(children)
 	});
 });
 ToastRoot.displayName = "ToastRoot";

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

@@ -1,20 +1,28 @@
 "use client";
+import { ark } from "../factory.js";
 import { useToastContext } from "./use-toast-context.js";
-import { forwardRef } from "react";
+import { cloneElement, forwardRef, isValidElement } from "react";
 import { mergeProps } from "@zag-js/react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/toast/toast-root.tsx
 var ToastRoot = forwardRef((props, ref) => {
+	const { asChild, children, ...localProps } = props;
 	const toast = useToastContext();
-	const mergedProps = mergeProps(toast.getRootProps(), props);
-	return /* @__PURE__ */ jsxs("div", {
+	const mergedProps = mergeProps(toast.getRootProps(), localProps);
+	const withGhosts = (content) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx("div", { ...toast.getGhostBeforeProps() }),
+		content,
+		/* @__PURE__ */ jsx("div", { ...toast.getGhostAfterProps() })
+	] });
+	const asChildContent = () => {
+		if (!isValidElement(children)) return children;
+		return cloneElement(children, void 0, withGhosts(children.props.children));
+	};
+	return /* @__PURE__ */ jsx(ark.div, {
 		...mergedProps,
+		asChild,
 		ref,
-		children: [
-			/* @__PURE__ */ jsx("div", { ...toast.getGhostBeforeProps() }),
-			props.children,
-			/* @__PURE__ */ jsx("div", { ...toast.getGhostAfterProps() })
-		]
+		children: asChild ? asChildContent() : withGhosts(children)
 	});
 });
 ToastRoot.displayName = "ToastRoot";

package/dist/components/toast/toast.anatomy.js

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

package/dist/components/toc/toc-nav.cjs

@@ -7,7 +7,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 var TocNav = (0, react.forwardRef)((props, ref) => {
 	const { placement, ...rest } = props;
 	const toc = require_use_toc_context.useTocContext();
-	const mergedProps = (0, _zag_js_react.mergeProps)(toc.getRootProps(), rest);
+	const mergedProps = (0, _zag_js_react.mergeProps)(toc.getNavProps(), rest);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.nav, {
 		...mergedProps,
 		"data-placement": placement,

package/dist/components/toc/toc-nav.js

@@ -7,7 +7,7 @@ import { jsx } from "react/jsx-runtime";
 var TocNav = forwardRef((props, ref) => {
 	const { placement, ...rest } = props;
 	const toc = useTocContext();
-	const mergedProps = mergeProps(toc.getRootProps(), rest);
+	const mergedProps = mergeProps(toc.getNavProps(), rest);
 	return /* @__PURE__ */ jsx(ark.nav, {
 		...mergedProps,
 		"data-placement": placement,

package/dist/components/toc/toc-root-provider.cjs

@@ -2,15 +2,17 @@ const require_create_split_props = require("../../utils/create-split-props.cjs")
 const require_factory = require("../factory.cjs");
 const require_use_toc_context = require("./use-toc-context.cjs");
 let react = require("react");
+let _zag_js_react = require("@zag-js/react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/toc/toc-root-provider.tsx
 var splitRootProviderProps = require_create_split_props.createSplitProps();
 var TocRootProvider = (0, react.forwardRef)((props, ref) => {
 	const [{ value: toc }, localProps] = splitRootProviderProps(props, ["value"]);
+	const mergedProps = (0, _zag_js_react.mergeProps)(toc.getRootProps(), localProps);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_toc_context.TocProvider, {
 		value: toc,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
-			...localProps,
+			...mergedProps,
 			ref
 		})
 	});

package/dist/components/toc/toc-root-provider.js

@@ -2,15 +2,17 @@ import { createSplitProps } from "../../utils/create-split-props.js";
 import { ark } from "../factory.js";
 import { TocProvider } from "./use-toc-context.js";
 import { forwardRef } from "react";
+import { mergeProps } from "@zag-js/react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/toc/toc-root-provider.tsx
 var splitRootProviderProps = createSplitProps();
 var TocRootProvider = forwardRef((props, ref) => {
 	const [{ value: toc }, localProps] = splitRootProviderProps(props, ["value"]);
+	const mergedProps = mergeProps(toc.getRootProps(), localProps);
 	return /* @__PURE__ */ jsx(TocProvider, {
 		value: toc,
 		children: /* @__PURE__ */ jsx(ark.div, {
-			...localProps,
+			...mergedProps,
 			ref
 		})
 	});

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

@@ -16,6 +16,7 @@ var TocRoot = (0, react.forwardRef)((props, ref) => {
 		"id",
 		"ids",
 		"items",
+		"multiple",
 		"onActiveChange",
 		"rootMargin",
 		"scrollBehavior",

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

@@ -16,6 +16,7 @@ var TocRoot = forwardRef((props, ref) => {
 		"id",
 		"ids",
 		"items",
+		"multiple",
 		"onActiveChange",
 		"rootMargin",
 		"scrollBehavior",

package/dist/components/toc/toc.anatomy.js

@@ -1,2 +1 @@
-import { anatomy as tocAnatomy } from "@zag-js/toc";
-export { tocAnatomy };
+export { anatomy as tocAnatomy } from "@zag-js/toc";

package/dist/components/toggle-group/toggle-group.anatomy.js

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

package/dist/components/tooltip/tooltip.anatomy.js

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

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

@@ -1,6 +1,6 @@
 export { waitForElement, waitForElementValue, waitForPromise, type WaitOptions } from '@zag-js/tour';
 export { waitForEvent, type WaitForEventOptions } from './wait-for-event.js';
-export type { ElementIds as TourElementIds, FocusOutsideEvent as TourFocusOutsideEvent, InteractOutsideEvent as TourInteractOutsideEvent, IntlTranslations as TourIntlTranslations, Point as TourPoint, PointerDownOutsideEvent as TourPointerDownOutsideEvent, ProgressTextDetails as TourProgressTextDetails, StatusChangeDetails as TourStatusChangeDetails, StepAction as TourStepAction, StepActionFn as TourStepActionFn, StepActionMap as TourStepActionMap, StepActionType as TourStepActionType, StepBaseDetails as TourStepBaseDetails, StepChangeDetails as TourStepChangeDetails, StepDetails as TourStepDetails, StepEffectArgs as TourStepEffectArgs, StepEffectCleanup as TourStepEffectCleanup, StepPlacement as TourStepPlacement, StepsChangeDetails as TourStepsChangeDetails, StepStatus as TourStepStatus, StepType as TourStepType, } from '@zag-js/tour';
+export type { ElementIds as TourElementIds, FocusOutsideEvent as TourFocusOutsideEvent, InteractOutsideEvent as TourInteractOutsideEvent, IntlTranslations as TourIntlTranslations, Point as TourPoint, PointerDownOutsideEvent as TourPointerDownOutsideEvent, ProgressTextDetails as TourProgressTextDetails, ScrollToTargetDetails as TourScrollToTargetDetails, StatusChangeDetails as TourStatusChangeDetails, StepAction as TourStepAction, StepActionFn as TourStepActionFn, StepActionMap as TourStepActionMap, StepActionType as TourStepActionType, StepBaseDetails as TourStepBaseDetails, StepChangeDetails as TourStepChangeDetails, StepDetails as TourStepDetails, StepEffectArgs as TourStepEffectArgs, StepEffectCleanup as TourStepEffectCleanup, StepPlacement as TourStepPlacement, StepsChangeDetails as TourStepsChangeDetails, StepStatus as TourStepStatus, StepType as TourStepType, } from '@zag-js/tour';
 export { TourActionTrigger, type TourActionTriggerBaseProps, type TourActionTriggerProps, } from './tour-action-trigger.js';
 export { TourActions, type TourActionsProps } from './tour-actions.js';
 export { TourArrow, type TourArrowBaseProps, type TourArrowProps } from './tour-arrow.js';