@ark-ui/react 4.8.0 → 4.9.0

package/dist/components/date-picker/date-picker-input.cjs

@@ -11,9 +11,15 @@ const factory = require('../factory.cjs');
 const useDatePickerContext = require('./use-date-picker-context.cjs');
 
 const DatePickerInput = react.forwardRef((props, ref) => {
-  const [inputProps, localProps] = createSplitProps.createSplitProps()(props, ["index"]);
+  const [inputProps, localProps] = createSplitProps.createSplitProps()(props, [
+    "index",
+    "fixOnBlur"
+  ]);
   const datePicker = useDatePickerContext.useDatePickerContext();
-  const mergedProps = react$1.mergeProps(datePicker.getInputProps(inputProps), localProps);
+  const mergedProps = react$1.mergeProps(
+    datePicker.getInputProps(inputProps),
+    localProps
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
 });
 DatePickerInput.displayName = "DatePickerInput";

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

@@ -3,6 +3,6 @@ import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface DatePickerInputBaseProps extends InputProps, PolymorphicProps {
 }
-export interface DatePickerInputProps extends HTMLProps<'input'>, DatePickerInputBaseProps {
+export interface DatePickerInputProps extends HTMLProps<"input">, DatePickerInputBaseProps {
 }
 export declare const DatePickerInput: ForwardRefExoticComponent<DatePickerInputProps & RefAttributes<HTMLInputElement>>;

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

@@ -3,6 +3,6 @@ import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface DatePickerInputBaseProps extends InputProps, PolymorphicProps {
 }
-export interface DatePickerInputProps extends HTMLProps<'input'>, DatePickerInputBaseProps {
+export interface DatePickerInputProps extends HTMLProps<"input">, DatePickerInputBaseProps {
 }
 export declare const DatePickerInput: ForwardRefExoticComponent<DatePickerInputProps & RefAttributes<HTMLInputElement>>;

package/dist/components/date-picker/date-picker-input.js

@@ -7,9 +7,15 @@ import { ark } from '../factory.js';
 import { useDatePickerContext } from './use-date-picker-context.js';
 
 const DatePickerInput = forwardRef((props, ref) => {
-  const [inputProps, localProps] = createSplitProps()(props, ["index"]);
+  const [inputProps, localProps] = createSplitProps()(props, [
+    "index",
+    "fixOnBlur"
+  ]);
   const datePicker = useDatePickerContext();
-  const mergedProps = mergeProps(datePicker.getInputProps(inputProps), localProps);
+  const mergedProps = mergeProps(
+    datePicker.getInputProps(inputProps),
+    localProps
+  );
   return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
 });
 DatePickerInput.displayName = "DatePickerInput";

package/dist/components/date-picker/date-picker-root.cjs

@@ -14,44 +14,53 @@ const usePresenceContext = require('../presence/use-presence-context.cjs');
 const useDatePicker = require('./use-date-picker.cjs');
 const useDatePickerContext = require('./use-date-picker-context.cjs');
 
-const DatePickerRoot = react.forwardRef((props, ref) => {
-  const [presenceProps, datePickerProps] = splitPresenceProps.splitPresenceProps(props);
-  const [useDatePickerProps, localProps] = createSplitProps.createSplitProps()(datePickerProps, [
-    "closeOnSelect",
-    "defaultOpen",
-    "defaultValue",
-    "disabled",
-    "fixedWeeks",
-    "focusedValue",
-    "format",
-    "id",
-    "ids",
-    "isDateUnavailable",
-    "isDateUnavailable",
-    "locale",
-    "max",
-    "min",
-    "name",
-    "numOfMonths",
-    "onFocusChange",
-    "onOpenChange",
-    "onValueChange",
-    "onViewChange",
-    "open",
-    "positioning",
-    "readOnly",
-    "selectionMode",
-    "startOfWeek",
-    "timeZone",
-    "translations",
-    "value",
-    "view"
-  ]);
-  const datePicker = useDatePicker.useDatePicker(useDatePickerProps);
-  const presence = usePresence.usePresence(react$1.mergeProps({ present: datePicker.open }, presenceProps));
-  const mergedProps = react$1.mergeProps(datePicker.getRootProps(), localProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(useDatePickerContext.DatePickerProvider, { value: datePicker, children: /* @__PURE__ */ jsxRuntime.jsx(usePresenceContext.PresenceProvider, { value: presence, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
-});
+const DatePickerRoot = react.forwardRef(
+  (props, ref) => {
+    const [presenceProps, datePickerProps] = splitPresenceProps.splitPresenceProps(props);
+    const [useDatePickerProps, localProps] = createSplitProps.createSplitProps()(datePickerProps, [
+      "closeOnSelect",
+      "defaultOpen",
+      "defaultValue",
+      "defaultView",
+      "disabled",
+      "fixedWeeks",
+      "focusedValue",
+      "format",
+      "id",
+      "ids",
+      "isDateUnavailable",
+      "isDateUnavailable",
+      "locale",
+      "max",
+      "maxView",
+      "min",
+      "minView",
+      "name",
+      "numOfMonths",
+      "onFocusChange",
+      "onOpenChange",
+      "onValueChange",
+      "onViewChange",
+      "open",
+      "parse",
+      "placeholder",
+      "positioning",
+      "readOnly",
+      "selectionMode",
+      "startOfWeek",
+      "timeZone",
+      "translations",
+      "value",
+      "view"
+    ]);
+    const datePicker = useDatePicker.useDatePicker(useDatePickerProps);
+    const presence = usePresence.usePresence(
+      react$1.mergeProps({ present: datePicker.open }, presenceProps)
+    );
+    const mergedProps = react$1.mergeProps(datePicker.getRootProps(), localProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(useDatePickerContext.DatePickerProvider, { value: datePicker, children: /* @__PURE__ */ jsxRuntime.jsx(usePresenceContext.PresenceProvider, { value: presence, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
+  }
+);
 DatePickerRoot.displayName = "DatePickerRoot";
 
 exports.DatePickerRoot = DatePickerRoot;

package/dist/components/date-picker/date-picker-root.d.cts

@@ -5,6 +5,6 @@ import { UseDatePickerProps } from './use-date-picker';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface DatePickerRootBaseProps extends UseDatePickerProps, UsePresenceProps, PolymorphicProps {
 }
-export interface DatePickerRootProps extends Assign<HTMLProps<'div'>, DatePickerRootBaseProps> {
+export interface DatePickerRootProps extends Assign<HTMLProps<"div">, DatePickerRootBaseProps> {
 }
 export declare const DatePickerRoot: ForwardRefExoticComponent<DatePickerRootProps & RefAttributes<HTMLDivElement>>;

package/dist/components/date-picker/date-picker-root.d.ts

@@ -5,6 +5,6 @@ import { UseDatePickerProps } from './use-date-picker';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface DatePickerRootBaseProps extends UseDatePickerProps, UsePresenceProps, PolymorphicProps {
 }
-export interface DatePickerRootProps extends Assign<HTMLProps<'div'>, DatePickerRootBaseProps> {
+export interface DatePickerRootProps extends Assign<HTMLProps<"div">, DatePickerRootBaseProps> {
 }
 export declare const DatePickerRoot: ForwardRefExoticComponent<DatePickerRootProps & RefAttributes<HTMLDivElement>>;

package/dist/components/date-picker/date-picker-root.js

@@ -10,44 +10,53 @@ import { PresenceProvider } from '../presence/use-presence-context.js';
 import { useDatePicker } from './use-date-picker.js';
 import { DatePickerProvider } from './use-date-picker-context.js';
 
-const DatePickerRoot = forwardRef((props, ref) => {
-  const [presenceProps, datePickerProps] = splitPresenceProps(props);
-  const [useDatePickerProps, localProps] = createSplitProps()(datePickerProps, [
-    "closeOnSelect",
-    "defaultOpen",
-    "defaultValue",
-    "disabled",
-    "fixedWeeks",
-    "focusedValue",
-    "format",
-    "id",
-    "ids",
-    "isDateUnavailable",
-    "isDateUnavailable",
-    "locale",
-    "max",
-    "min",
-    "name",
-    "numOfMonths",
-    "onFocusChange",
-    "onOpenChange",
-    "onValueChange",
-    "onViewChange",
-    "open",
-    "positioning",
-    "readOnly",
-    "selectionMode",
-    "startOfWeek",
-    "timeZone",
-    "translations",
-    "value",
-    "view"
-  ]);
-  const datePicker = useDatePicker(useDatePickerProps);
-  const presence = usePresence(mergeProps({ present: datePicker.open }, presenceProps));
-  const mergedProps = mergeProps(datePicker.getRootProps(), localProps);
-  return /* @__PURE__ */ jsx(DatePickerProvider, { value: datePicker, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presence, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
-});
+const DatePickerRoot = forwardRef(
+  (props, ref) => {
+    const [presenceProps, datePickerProps] = splitPresenceProps(props);
+    const [useDatePickerProps, localProps] = createSplitProps()(datePickerProps, [
+      "closeOnSelect",
+      "defaultOpen",
+      "defaultValue",
+      "defaultView",
+      "disabled",
+      "fixedWeeks",
+      "focusedValue",
+      "format",
+      "id",
+      "ids",
+      "isDateUnavailable",
+      "isDateUnavailable",
+      "locale",
+      "max",
+      "maxView",
+      "min",
+      "minView",
+      "name",
+      "numOfMonths",
+      "onFocusChange",
+      "onOpenChange",
+      "onValueChange",
+      "onViewChange",
+      "open",
+      "parse",
+      "placeholder",
+      "positioning",
+      "readOnly",
+      "selectionMode",
+      "startOfWeek",
+      "timeZone",
+      "translations",
+      "value",
+      "view"
+    ]);
+    const datePicker = useDatePicker(useDatePickerProps);
+    const presence = usePresence(
+      mergeProps({ present: datePicker.open }, presenceProps)
+    );
+    const mergedProps = mergeProps(datePicker.getRootProps(), localProps);
+    return /* @__PURE__ */ jsx(DatePickerProvider, { value: datePicker, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presence, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
+  }
+);
 DatePickerRoot.displayName = "DatePickerRoot";
 
 export { DatePickerRoot };

package/dist/components/date-picker/use-date-picker.cjs

@@ -11,20 +11,20 @@ const useLocaleContext = require('../../providers/locale/use-locale-context.cjs'
 const useEvent = require('../../utils/use-event.cjs');
 
 function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
-  if (e) {
-    for (const k in e) {
-      if (k !== 'default') {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
+	const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+	if (e) {
+		for (const k in e) {
+			if (k !== 'default') {
+				const d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: () => e[k]
+				});
+			}
+		}
+	}
+	n.default = e;
+	return Object.freeze(n);
 }
 
 const datePicker__namespace = /*#__PURE__*/_interopNamespaceDefault(datePicker);
@@ -39,6 +39,7 @@ const useDatePicker = (props = {}) => {
     open: props.defaultOpen,
     "open.controlled": props.open !== void 0,
     value: props.defaultValue,
+    view: props.defaultView,
     ...props
   };
   const context = {
@@ -49,7 +50,9 @@ const useDatePicker = (props = {}) => {
     onViewChange: useEvent.useEvent(props.onViewChange),
     onOpenChange: useEvent.useEvent(props.onOpenChange)
   };
-  const [state, send] = react$1.useMachine(datePicker__namespace.machine(initialContext), { context });
+  const [state, send] = react$1.useMachine(datePicker__namespace.machine(initialContext), {
+    context
+  });
   return datePicker__namespace.connect(state, send, react$1.normalizeProps);
 };
 

package/dist/components/date-picker/use-date-picker.d.cts

@@ -1,17 +1,19 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
-import * as datePicker from '@zag-js/date-picker';
-export interface UseDatePickerProps extends Optional<Omit<datePicker.Context, 'dir' | 'getRootNode' | 'parse' | 'open.controlled'>, 'id'> {
+import * as datePicker from "@zag-js/date-picker";
+export interface UseDatePickerProps extends Optional<Omit<datePicker.Context, "dir" | "getRootNode" | "open.controlled">, "id"> {
     /**
      * The initial open state of the date picker when it is first rendered.
-     * Use when you do not need to control its open state.
      */
-    defaultOpen?: datePicker.Context['open'];
+    defaultOpen?: datePicker.Context["open"];
     /**
      * The initial value of the date picker when it is first rendered.
-     * Use when you do not need to control the state of the date picker.
      */
-    defaultValue?: datePicker.Context['value'];
+    defaultValue?: datePicker.Context["value"];
+    /**
+     * The initial view of the date picker when it is first rendered.
+     */
+    defaultView?: datePicker.Context["view"];
 }
 export interface UseDatePickerReturn extends datePicker.Api<PropTypes> {
 }

package/dist/components/date-picker/use-date-picker.d.ts

@@ -1,17 +1,19 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
-import * as datePicker from '@zag-js/date-picker';
-export interface UseDatePickerProps extends Optional<Omit<datePicker.Context, 'dir' | 'getRootNode' | 'parse' | 'open.controlled'>, 'id'> {
+import * as datePicker from "@zag-js/date-picker";
+export interface UseDatePickerProps extends Optional<Omit<datePicker.Context, "dir" | "getRootNode" | "open.controlled">, "id"> {
     /**
      * The initial open state of the date picker when it is first rendered.
-     * Use when you do not need to control its open state.
      */
-    defaultOpen?: datePicker.Context['open'];
+    defaultOpen?: datePicker.Context["open"];
     /**
      * The initial value of the date picker when it is first rendered.
-     * Use when you do not need to control the state of the date picker.
      */
-    defaultValue?: datePicker.Context['value'];
+    defaultValue?: datePicker.Context["value"];
+    /**
+     * The initial view of the date picker when it is first rendered.
+     */
+    defaultView?: datePicker.Context["view"];
 }
 export interface UseDatePickerReturn extends datePicker.Api<PropTypes> {
 }

package/dist/components/date-picker/use-date-picker.js

@@ -16,6 +16,7 @@ const useDatePicker = (props = {}) => {
     open: props.defaultOpen,
     "open.controlled": props.open !== void 0,
     value: props.defaultValue,
+    view: props.defaultView,
     ...props
   };
   const context = {
@@ -26,7 +27,9 @@ const useDatePicker = (props = {}) => {
     onViewChange: useEvent(props.onViewChange),
     onOpenChange: useEvent(props.onOpenChange)
   };
-  const [state, send] = useMachine(datePicker.machine(initialContext), { context });
+  const [state, send] = useMachine(datePicker.machine(initialContext), {
+    context
+  });
   return datePicker.connect(state, send, normalizeProps);
 };
 

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

@@ -6,16 +6,21 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
+const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useFileUploadContext = require('./use-file-upload-context.cjs');
 
-const FileUploadDropzone = react.forwardRef(
-  (props, ref) => {
-    const fileUpload = useFileUploadContext.useFileUploadContext();
-    const mergedProps = react$1.mergeProps(fileUpload.getDropzoneProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
+const FileUploadDropzone = react.forwardRef((props, ref) => {
+  const [dropzoneProps, localProps] = createSplitProps.createSplitProps()(props, [
+    "disableClick"
+  ]);
+  const fileUpload = useFileUploadContext.useFileUploadContext();
+  const mergedProps = react$1.mergeProps(
+    fileUpload.getDropzoneProps(dropzoneProps),
+    localProps
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
 FileUploadDropzone.displayName = "FileUploadDropzone";
 
 exports.FileUploadDropzone = FileUploadDropzone;

package/dist/components/file-upload/file-upload-dropzone.d.cts

@@ -1,7 +1,8 @@
+import { DropzoneProps } from '@zag-js/file-upload';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export interface FileUploadDropzoneBaseProps extends PolymorphicProps {
+export interface FileUploadDropzoneBaseProps extends PolymorphicProps, DropzoneProps {
 }
-export interface FileUploadDropzoneProps extends HTMLProps<'div'>, FileUploadDropzoneBaseProps {
+export interface FileUploadDropzoneProps extends HTMLProps<"div">, FileUploadDropzoneBaseProps {
 }
 export declare const FileUploadDropzone: ForwardRefExoticComponent<FileUploadDropzoneProps & RefAttributes<HTMLDivElement>>;

package/dist/components/file-upload/file-upload-dropzone.d.ts

@@ -1,7 +1,8 @@
+import { DropzoneProps } from '@zag-js/file-upload';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export interface FileUploadDropzoneBaseProps extends PolymorphicProps {
+export interface FileUploadDropzoneBaseProps extends PolymorphicProps, DropzoneProps {
 }
-export interface FileUploadDropzoneProps extends HTMLProps<'div'>, FileUploadDropzoneBaseProps {
+export interface FileUploadDropzoneProps extends HTMLProps<"div">, FileUploadDropzoneBaseProps {
 }
 export declare const FileUploadDropzone: ForwardRefExoticComponent<FileUploadDropzoneProps & RefAttributes<HTMLDivElement>>;

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

@@ -2,16 +2,21 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
+import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { useFileUploadContext } from './use-file-upload-context.js';
 
-const FileUploadDropzone = forwardRef(
-  (props, ref) => {
-    const fileUpload = useFileUploadContext();
-    const mergedProps = mergeProps(fileUpload.getDropzoneProps(), props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
+const FileUploadDropzone = forwardRef((props, ref) => {
+  const [dropzoneProps, localProps] = createSplitProps()(props, [
+    "disableClick"
+  ]);
+  const fileUpload = useFileUploadContext();
+  const mergedProps = mergeProps(
+    fileUpload.getDropzoneProps(dropzoneProps),
+    localProps
+  );
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 FileUploadDropzone.displayName = "FileUploadDropzone";
 
 export { FileUploadDropzone };

package/dist/components/file-upload/file-upload-item-preview-image.cjs

@@ -14,10 +14,14 @@ const FileUploadItemPreviewImage = react.forwardRef((props, ref) => {
   const [url, setUrl] = react.useState("");
   const fileUpload = useFileUploadContext.useFileUploadContext();
   const itemProps = useFileUploadItemPropsContext.useFileUploadItemPropsContext();
-  const mergedProps = react$1.mergeProps(fileUpload.getItemPreviewImageProps({ ...itemProps, url }), props);
+  const mergedProps = react$1.mergeProps(
+    fileUpload.getItemPreviewImageProps({ ...itemProps, url }),
+    props
+  );
   react.useEffect(() => {
     return fileUpload.createFileUrl(itemProps.file, (url2) => setUrl(url2));
   }, [itemProps, fileUpload]);
+  if (!url) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.img, { ...mergedProps, ref });
 });
 FileUploadItemPreviewImage.displayName = "FileUploadItemPreviewImage";

package/dist/components/file-upload/file-upload-item-preview-image.d.cts

@@ -2,6 +2,6 @@ import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface FileUploadItemPreviewImageBaseProps extends PolymorphicProps {
 }
-export interface FileUploadItemPreviewImageProps extends HTMLProps<'img'>, FileUploadItemPreviewImageBaseProps {
+export interface FileUploadItemPreviewImageProps extends HTMLProps<"img">, FileUploadItemPreviewImageBaseProps {
 }
 export declare const FileUploadItemPreviewImage: ForwardRefExoticComponent<FileUploadItemPreviewImageProps & RefAttributes<HTMLImageElement>>;

package/dist/components/file-upload/file-upload-item-preview-image.d.ts

@@ -2,6 +2,6 @@ import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface FileUploadItemPreviewImageBaseProps extends PolymorphicProps {
 }
-export interface FileUploadItemPreviewImageProps extends HTMLProps<'img'>, FileUploadItemPreviewImageBaseProps {
+export interface FileUploadItemPreviewImageProps extends HTMLProps<"img">, FileUploadItemPreviewImageBaseProps {
 }
 export declare const FileUploadItemPreviewImage: ForwardRefExoticComponent<FileUploadItemPreviewImageProps & RefAttributes<HTMLImageElement>>;

package/dist/components/file-upload/file-upload-item-preview-image.js

@@ -10,10 +10,14 @@ const FileUploadItemPreviewImage = forwardRef((props, ref) => {
   const [url, setUrl] = useState("");
   const fileUpload = useFileUploadContext();
   const itemProps = useFileUploadItemPropsContext();
-  const mergedProps = mergeProps(fileUpload.getItemPreviewImageProps({ ...itemProps, url }), props);
+  const mergedProps = mergeProps(
+    fileUpload.getItemPreviewImageProps({ ...itemProps, url }),
+    props
+  );
   useEffect(() => {
     return fileUpload.createFileUrl(itemProps.file, (url2) => setUrl(url2));
   }, [itemProps, fileUpload]);
+  if (!url) return null;
   return /* @__PURE__ */ jsx(ark.img, { ...mergedProps, ref });
 });
 FileUploadItemPreviewImage.displayName = "FileUploadItemPreviewImage";

package/dist/components/tour/tour-progress-text.cjs

@@ -12,7 +12,7 @@ const useTourContext = require('./use-tour-context.cjs');
 const TourProgressText = react.forwardRef((props, ref) => {
   const tour = useTourContext.useTourContext();
   const mergedProps = react$1.mergeProps(tour.getProgressTextProps(), props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: mergedProps.children || tour.getProgressText() });
 });
 TourProgressText.displayName = "TourProgressText";
 

package/dist/components/tour/tour-progress-text.d.cts

@@ -2,6 +2,6 @@ import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface TourProgressTextBaseProps extends PolymorphicProps {
 }
-export interface TourProgressTextProps extends HTMLProps<'div'>, TourProgressTextBaseProps {
+export interface TourProgressTextProps extends HTMLProps<"div">, TourProgressTextBaseProps {
 }
 export declare const TourProgressText: ForwardRefExoticComponent<TourProgressTextProps & RefAttributes<HTMLDivElement>>;

package/dist/components/tour/tour-progress-text.d.ts

@@ -2,6 +2,6 @@ import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface TourProgressTextBaseProps extends PolymorphicProps {
 }
-export interface TourProgressTextProps extends HTMLProps<'div'>, TourProgressTextBaseProps {
+export interface TourProgressTextProps extends HTMLProps<"div">, TourProgressTextBaseProps {
 }
 export declare const TourProgressText: ForwardRefExoticComponent<TourProgressTextProps & RefAttributes<HTMLDivElement>>;

package/dist/components/tour/tour-progress-text.js

@@ -8,7 +8,7 @@ import { useTourContext } from './use-tour-context.js';
 const TourProgressText = forwardRef((props, ref) => {
   const tour = useTourContext();
   const mergedProps = mergeProps(tour.getProgressTextProps(), props);
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: mergedProps.children || tour.getProgressText() });
 });
 TourProgressText.displayName = "TourProgressText";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "4.8.0",
+  "version": "4.9.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -160,58 +160,58 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@internationalized/date": "3.6.0",
-    "@zag-js/accordion": "0.81.1",
-    "@zag-js/anatomy": "0.81.1",
-    "@zag-js/auto-resize": "0.81.1",
-    "@zag-js/avatar": "0.81.1",
-    "@zag-js/carousel": "0.81.1",
-    "@zag-js/checkbox": "0.81.1",
-    "@zag-js/clipboard": "0.81.1",
-    "@zag-js/collapsible": "0.81.1",
-    "@zag-js/collection": "0.81.1",
-    "@zag-js/color-picker": "0.81.1",
-    "@zag-js/color-utils": "0.81.1",
-    "@zag-js/combobox": "0.81.1",
-    "@zag-js/core": "0.81.1",
-    "@zag-js/date-picker": "0.81.1",
-    "@zag-js/date-utils": "0.81.1",
-    "@zag-js/dialog": "0.81.1",
-    "@zag-js/dom-query": "0.81.1",
-    "@zag-js/editable": "0.81.1",
-    "@zag-js/file-upload": "0.81.1",
-    "@zag-js/file-utils": "0.81.1",
-    "@zag-js/focus-trap": "0.81.1",
-    "@zag-js/highlight-word": "0.81.1",
-    "@zag-js/hover-card": "0.81.1",
-    "@zag-js/i18n-utils": "0.81.1",
-    "@zag-js/menu": "0.81.1",
-    "@zag-js/number-input": "0.81.1",
-    "@zag-js/pagination": "0.81.1",
-    "@zag-js/pin-input": "0.81.1",
-    "@zag-js/popover": "0.81.1",
-    "@zag-js/presence": "0.81.1",
-    "@zag-js/progress": "0.81.1",
-    "@zag-js/qr-code": "0.81.1",
-    "@zag-js/radio-group": "0.81.1",
-    "@zag-js/rating-group": "0.81.1",
-    "@zag-js/react": "0.81.1",
-    "@zag-js/select": "0.81.1",
-    "@zag-js/signature-pad": "0.81.1",
-    "@zag-js/slider": "0.81.1",
-    "@zag-js/splitter": "0.81.1",
-    "@zag-js/steps": "0.81.1",
-    "@zag-js/switch": "0.81.1",
-    "@zag-js/tabs": "0.81.1",
-    "@zag-js/tags-input": "0.81.1",
-    "@zag-js/time-picker": "0.81.1",
-    "@zag-js/timer": "0.81.1",
-    "@zag-js/toast": "0.81.1",
-    "@zag-js/toggle-group": "0.81.1",
-    "@zag-js/tooltip": "0.81.1",
-    "@zag-js/tour": "0.81.1",
-    "@zag-js/tree-view": "0.81.1",
-    "@zag-js/types": "0.81.1"
+    "@internationalized/date": "3.7.0",
+    "@zag-js/accordion": "0.82.0",
+    "@zag-js/anatomy": "0.82.0",
+    "@zag-js/auto-resize": "0.82.0",
+    "@zag-js/avatar": "0.82.0",
+    "@zag-js/carousel": "0.82.0",
+    "@zag-js/checkbox": "0.82.0",
+    "@zag-js/clipboard": "0.82.0",
+    "@zag-js/collapsible": "0.82.0",
+    "@zag-js/collection": "0.82.0",
+    "@zag-js/color-picker": "0.82.0",
+    "@zag-js/color-utils": "0.82.0",
+    "@zag-js/combobox": "0.82.0",
+    "@zag-js/core": "0.82.0",
+    "@zag-js/date-picker": "0.82.0",
+    "@zag-js/date-utils": "0.82.0",
+    "@zag-js/dialog": "0.82.0",
+    "@zag-js/dom-query": "0.82.0",
+    "@zag-js/editable": "0.82.0",
+    "@zag-js/file-upload": "0.82.0",
+    "@zag-js/file-utils": "0.82.0",
+    "@zag-js/focus-trap": "0.82.0",
+    "@zag-js/highlight-word": "0.82.0",
+    "@zag-js/hover-card": "0.82.0",
+    "@zag-js/i18n-utils": "0.82.0",
+    "@zag-js/menu": "0.82.0",
+    "@zag-js/number-input": "0.82.0",
+    "@zag-js/pagination": "0.82.0",
+    "@zag-js/pin-input": "0.82.0",
+    "@zag-js/popover": "0.82.0",
+    "@zag-js/presence": "0.82.0",
+    "@zag-js/progress": "0.82.0",
+    "@zag-js/qr-code": "0.82.0",
+    "@zag-js/radio-group": "0.82.0",
+    "@zag-js/rating-group": "0.82.0",
+    "@zag-js/react": "0.82.0",
+    "@zag-js/select": "0.82.0",
+    "@zag-js/signature-pad": "0.82.0",
+    "@zag-js/slider": "0.82.0",
+    "@zag-js/splitter": "0.82.0",
+    "@zag-js/steps": "0.82.0",
+    "@zag-js/switch": "0.82.0",
+    "@zag-js/tabs": "0.82.0",
+    "@zag-js/tags-input": "0.82.0",
+    "@zag-js/time-picker": "0.82.0",
+    "@zag-js/timer": "0.82.0",
+    "@zag-js/toast": "0.82.0",
+    "@zag-js/toggle-group": "0.82.0",
+    "@zag-js/tooltip": "0.82.0",
+    "@zag-js/tour": "0.82.0",
+    "@zag-js/tree-view": "0.82.0",
+    "@zag-js/types": "0.82.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
@@ -225,14 +225,14 @@
     "@testing-library/react": "16.1.0",
     "@testing-library/user-event": "14.5.2",
     "@types/jsdom": "21.1.7",
-    "@types/react": "19.0.2",
-    "@types/react-dom": "19.0.2",
+    "@types/react": "19.0.7",
+    "@types/react-dom": "19.0.3",
     "@vitejs/plugin-react": "4.3.4",
-    "@zag-js/stringify-state": "0.81.1",
+    "@zag-js/stringify-state": "0.82.0",
     "clean-package": "2.2.0",
     "globby": "14.0.2",
     "jsdom": "25.0.1",
-    "lucide-react": "0.469.0",
+    "lucide-react": "0.473.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-frame-component": "5.2.7",
@@ -240,9 +240,9 @@
     "release-it": "17.11.0",
     "resize-observer-polyfill": "1.5.1",
     "storybook": "8.4.7",
-    "typescript": "5.7.2",
+    "typescript": "5.7.3",
     "vite": "5.4.11",
-    "vite-plugin-dts": "4.4.0",
+    "vite-plugin-dts": "4.5.0",
     "vitest": "2.1.8",
     "vitest-axe": "1.0.0-pre.3"
   },