@ark-ui/react 5.1.0 → 5.3.0

package/dist/components/collapsible/collapsible-indicator.cjs

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+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 factory = require('../factory.cjs');
+const useCollapsibleContext = require('./use-collapsible-context.cjs');
+
+const CollapsibleIndicator = react.forwardRef((props, ref) => {
+  const collapsible = useCollapsibleContext.useCollapsibleContext();
+  const mergedProps = react$1.mergeProps(collapsible.getIndicatorProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
+CollapsibleIndicator.displayName = "CollapsibleIndicator";
+
+exports.CollapsibleIndicator = CollapsibleIndicator;

package/dist/components/collapsible/collapsible-indicator.d.cts

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface CollapsibleIndicatorBaseProps extends PolymorphicProps {
+}
+export interface CollapsibleIndicatorProps extends HTMLProps<'div'>, CollapsibleIndicatorBaseProps {
+}
+export declare const CollapsibleIndicator: ForwardRefExoticComponent<CollapsibleIndicatorProps & RefAttributes<HTMLDivElement>>;

package/dist/components/collapsible/collapsible-indicator.d.ts

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface CollapsibleIndicatorBaseProps extends PolymorphicProps {
+}
+export interface CollapsibleIndicatorProps extends HTMLProps<'div'>, CollapsibleIndicatorBaseProps {
+}
+export declare const CollapsibleIndicator: ForwardRefExoticComponent<CollapsibleIndicatorProps & RefAttributes<HTMLDivElement>>;

package/dist/components/collapsible/collapsible-indicator.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { useCollapsibleContext } from './use-collapsible-context.js';
+
+const CollapsibleIndicator = forwardRef((props, ref) => {
+  const collapsible = useCollapsibleContext();
+  const mergedProps = mergeProps(collapsible.getIndicatorProps(), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
+CollapsibleIndicator.displayName = "CollapsibleIndicator";
+
+export { CollapsibleIndicator };

package/dist/components/collapsible/collapsible.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const collapsibleContent = require('./collapsible-content.cjs');
 const collapsibleContext = require('./collapsible-context.cjs');
+const collapsibleIndicator = require('./collapsible-indicator.cjs');
 const collapsibleRoot = require('./collapsible-root.cjs');
 const collapsibleRootProvider = require('./collapsible-root-provider.cjs');
 const collapsibleTrigger = require('./collapsible-trigger.cjs');
@@ -12,6 +13,7 @@ const collapsibleTrigger = require('./collapsible-trigger.cjs');
 
 exports.Content = collapsibleContent.CollapsibleContent;
 exports.Context = collapsibleContext.CollapsibleContext;
+exports.Indicator = collapsibleIndicator.CollapsibleIndicator;
 exports.Root = collapsibleRoot.CollapsibleRoot;
 exports.RootProvider = collapsibleRootProvider.CollapsibleRootProvider;
 exports.Trigger = collapsibleTrigger.CollapsibleTrigger;

package/dist/components/collapsible/collapsible.d.cts

@@ -1,6 +1,7 @@
 export type { OpenChangeDetails } from '@zag-js/collapsible';
 export { CollapsibleContent as Content, type CollapsibleContentBaseProps as ContentBaseProps, type CollapsibleContentProps as ContentProps, } from './collapsible-content';
 export { CollapsibleContext as Context, type CollapsibleContextProps as ContextProps } from './collapsible-context';
+export { CollapsibleIndicator as Indicator, type CollapsibleIndicatorBaseProps as IndicatorBaseProps, type CollapsibleIndicatorProps as IndicatorProps, } from './collapsible-indicator';
 export { CollapsibleRoot as Root, type CollapsibleRootBaseProps as RootBaseProps, type CollapsibleRootProps as RootProps, } from './collapsible-root';
 export { CollapsibleRootProvider as RootProvider, type CollapsibleRootProviderBaseProps as RootProviderBaseProps, type CollapsibleRootProviderProps as RootProviderProps, } from './collapsible-root-provider';
 export { CollapsibleTrigger as Trigger, type CollapsibleTriggerBaseProps as TriggerBaseProps, type CollapsibleTriggerProps as TriggerProps, } from './collapsible-trigger';

package/dist/components/collapsible/collapsible.d.ts

@@ -1,6 +1,7 @@
 export type { OpenChangeDetails } from '@zag-js/collapsible';
 export { CollapsibleContent as Content, type CollapsibleContentBaseProps as ContentBaseProps, type CollapsibleContentProps as ContentProps, } from './collapsible-content';
 export { CollapsibleContext as Context, type CollapsibleContextProps as ContextProps } from './collapsible-context';
+export { CollapsibleIndicator as Indicator, type CollapsibleIndicatorBaseProps as IndicatorBaseProps, type CollapsibleIndicatorProps as IndicatorProps, } from './collapsible-indicator';
 export { CollapsibleRoot as Root, type CollapsibleRootBaseProps as RootBaseProps, type CollapsibleRootProps as RootProps, } from './collapsible-root';
 export { CollapsibleRootProvider as RootProvider, type CollapsibleRootProviderBaseProps as RootProviderBaseProps, type CollapsibleRootProviderProps as RootProviderProps, } from './collapsible-root-provider';
 export { CollapsibleTrigger as Trigger, type CollapsibleTriggerBaseProps as TriggerBaseProps, type CollapsibleTriggerProps as TriggerProps, } from './collapsible-trigger';

package/dist/components/collapsible/collapsible.js

@@ -1,5 +1,6 @@
 export { CollapsibleContent as Content } from './collapsible-content.js';
 export { CollapsibleContext as Context } from './collapsible-context.js';
+export { CollapsibleIndicator as Indicator } from './collapsible-indicator.js';
 export { CollapsibleRoot as Root } from './collapsible-root.js';
 export { CollapsibleRootProvider as RootProvider } from './collapsible-root-provider.js';
 export { CollapsibleTrigger as Trigger } from './collapsible-trigger.js';

package/dist/components/collapsible/index.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const collapsibleContent = require('./collapsible-content.cjs');
 const collapsibleContext = require('./collapsible-context.cjs');
+const collapsibleIndicator = require('./collapsible-indicator.cjs');
 const collapsibleRoot = require('./collapsible-root.cjs');
 const collapsibleRootProvider = require('./collapsible-root-provider.cjs');
 const collapsibleTrigger = require('./collapsible-trigger.cjs');
@@ -16,6 +17,7 @@ const collapsible = require('@zag-js/collapsible');
 
 exports.CollapsibleContent = collapsibleContent.CollapsibleContent;
 exports.CollapsibleContext = collapsibleContext.CollapsibleContext;
+exports.CollapsibleIndicator = collapsibleIndicator.CollapsibleIndicator;
 exports.CollapsibleRoot = collapsibleRoot.CollapsibleRoot;
 exports.CollapsibleRootProvider = collapsibleRootProvider.CollapsibleRootProvider;
 exports.CollapsibleTrigger = collapsibleTrigger.CollapsibleTrigger;

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

@@ -1,6 +1,7 @@
 export type { OpenChangeDetails as CollapsibleOpenChangeDetails } from '@zag-js/collapsible';
 export { CollapsibleContent, type CollapsibleContentBaseProps, type CollapsibleContentProps, } from './collapsible-content';
 export { CollapsibleContext, type CollapsibleContextProps } from './collapsible-context';
+export { CollapsibleIndicator, type CollapsibleIndicatorBaseProps, type CollapsibleIndicatorProps, } from './collapsible-indicator';
 export { CollapsibleRoot, type CollapsibleRootBaseProps, type CollapsibleRootProps } from './collapsible-root';
 export { CollapsibleRootProvider, type CollapsibleRootProviderBaseProps, type CollapsibleRootProviderProps, } from './collapsible-root-provider';
 export { CollapsibleTrigger, type CollapsibleTriggerBaseProps, type CollapsibleTriggerProps, } from './collapsible-trigger';

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

@@ -1,6 +1,7 @@
 export type { OpenChangeDetails as CollapsibleOpenChangeDetails } from '@zag-js/collapsible';
 export { CollapsibleContent, type CollapsibleContentBaseProps, type CollapsibleContentProps, } from './collapsible-content';
 export { CollapsibleContext, type CollapsibleContextProps } from './collapsible-context';
+export { CollapsibleIndicator, type CollapsibleIndicatorBaseProps, type CollapsibleIndicatorProps, } from './collapsible-indicator';
 export { CollapsibleRoot, type CollapsibleRootBaseProps, type CollapsibleRootProps } from './collapsible-root';
 export { CollapsibleRootProvider, type CollapsibleRootProviderBaseProps, type CollapsibleRootProviderProps, } from './collapsible-root-provider';
 export { CollapsibleTrigger, type CollapsibleTriggerBaseProps, type CollapsibleTriggerProps, } from './collapsible-trigger';

package/dist/components/collapsible/index.js

@@ -1,5 +1,6 @@
 export { CollapsibleContent } from './collapsible-content.js';
 export { CollapsibleContext } from './collapsible-context.js';
+export { CollapsibleIndicator } from './collapsible-indicator.js';
 export { CollapsibleRoot } from './collapsible-root.js';
 export { CollapsibleRootProvider } from './collapsible-root-provider.js';
 export { CollapsibleTrigger } from './collapsible-trigger.js';

package/dist/components/color-picker/color-picker-value-text.cjs

@@ -10,10 +10,11 @@ const factory = require('../factory.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
 
 const ColorPickerValueText = react.forwardRef((props, ref) => {
-  const { children, ...localprops } = props;
+  const { children, format, ...localprops } = props;
   const colorPicker = useColorPickerContext.useColorPickerContext();
   const mergedProps = react$1.mergeProps(colorPicker.getValueTextProps(), localprops);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: props.children || colorPicker.valueAsString });
+  const valueAsString = format ? colorPicker.value.toString(format) : colorPicker.valueAsString;
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: props.children || valueAsString });
 });
 ColorPickerValueText.displayName = "ColorPickerValueText";
 

package/dist/components/color-picker/color-picker-value-text.d.cts

@@ -1,6 +1,8 @@
+import { ColorStringFormat } from '@zag-js/color-utils';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface ColorPickerValueTextBaseProps extends PolymorphicProps {
+    format?: ColorStringFormat;
 }
 export interface ColorPickerValueTextProps extends HTMLProps<'span'>, ColorPickerValueTextBaseProps {
 }

package/dist/components/color-picker/color-picker-value-text.d.ts

@@ -1,6 +1,8 @@
+import { ColorStringFormat } from '@zag-js/color-utils';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface ColorPickerValueTextBaseProps extends PolymorphicProps {
+    format?: ColorStringFormat;
 }
 export interface ColorPickerValueTextProps extends HTMLProps<'span'>, ColorPickerValueTextBaseProps {
 }

package/dist/components/color-picker/color-picker-value-text.js

@@ -6,10 +6,11 @@ import { ark } from '../factory.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 
 const ColorPickerValueText = forwardRef((props, ref) => {
-  const { children, ...localprops } = props;
+  const { children, format, ...localprops } = props;
   const colorPicker = useColorPickerContext();
   const mergedProps = mergeProps(colorPicker.getValueTextProps(), localprops);
-  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: props.children || colorPicker.valueAsString });
+  const valueAsString = format ? colorPicker.value.toString(format) : colorPicker.valueAsString;
+  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: props.children || valueAsString });
 });
 ColorPickerValueText.displayName = "ColorPickerValueText";
 

package/dist/components/download-trigger/download-trigger.cjs

@@ -0,0 +1,37 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const fileUtils = require('@zag-js/file-utils');
+const index = require('../../node_modules/@zag-js/utils/dist/index.cjs');
+const react = require('react');
+const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
+const factory = require('../factory.cjs');
+
+const DownloadTrigger = react.forwardRef((props, ref) => {
+  const { fileName, data, mimeType, ...rest } = props;
+  const { getWindow } = useEnvironmentContext.useEnvironmentContext();
+  const download = (data2) => {
+    fileUtils.downloadFile({ file: data2, name: fileName, type: mimeType, win: getWindow() });
+  };
+  const onClick = (e) => {
+    props.onClick?.(e);
+    if (e.defaultPrevented) return;
+    if (index.isFunction(data)) {
+      const maybePromise = data();
+      if (maybePromise instanceof Promise) {
+        maybePromise.then((data2) => download(data2));
+      } else {
+        download(maybePromise);
+      }
+    } else {
+      download(data);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ref, ...rest, type: "button", onClick });
+});
+DownloadTrigger.displayName = "DownloadTrigger";
+
+exports.DownloadTrigger = DownloadTrigger;

package/dist/components/download-trigger/download-trigger.d.cts

@@ -0,0 +1,22 @@
+import { FileMimeType } from '@zag-js/file-utils';
+import { MaybePromise } from '../../types';
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export type DownloadableData = string | Blob | File;
+export interface DownloadTriggerBaseProps extends PolymorphicProps {
+    /**
+     * The name of the file to download
+     */
+    fileName: string;
+    /**
+     * The data to download
+     */
+    data: DownloadableData | (() => MaybePromise<DownloadableData>);
+    /**
+     * The MIME type of the data to download
+     */
+    mimeType: FileMimeType;
+}
+export interface DownloadTriggerProps extends HTMLProps<'button'>, DownloadTriggerBaseProps {
+}
+export declare const DownloadTrigger: ForwardRefExoticComponent<DownloadTriggerProps & RefAttributes<HTMLButtonElement>>;

package/dist/components/download-trigger/download-trigger.d.ts

@@ -0,0 +1,22 @@
+import { FileMimeType } from '@zag-js/file-utils';
+import { MaybePromise } from '../../types';
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export type DownloadableData = string | Blob | File;
+export interface DownloadTriggerBaseProps extends PolymorphicProps {
+    /**
+     * The name of the file to download
+     */
+    fileName: string;
+    /**
+     * The data to download
+     */
+    data: DownloadableData | (() => MaybePromise<DownloadableData>);
+    /**
+     * The MIME type of the data to download
+     */
+    mimeType: FileMimeType;
+}
+export interface DownloadTriggerProps extends HTMLProps<'button'>, DownloadTriggerBaseProps {
+}
+export declare const DownloadTrigger: ForwardRefExoticComponent<DownloadTriggerProps & RefAttributes<HTMLButtonElement>>;

package/dist/components/download-trigger/download-trigger.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { downloadFile } from '@zag-js/file-utils';
+import { isFunction } from '../../node_modules/@zag-js/utils/dist/index.js';
+import { forwardRef } from 'react';
+import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
+import { ark } from '../factory.js';
+
+const DownloadTrigger = forwardRef((props, ref) => {
+  const { fileName, data, mimeType, ...rest } = props;
+  const { getWindow } = useEnvironmentContext();
+  const download = (data2) => {
+    downloadFile({ file: data2, name: fileName, type: mimeType, win: getWindow() });
+  };
+  const onClick = (e) => {
+    props.onClick?.(e);
+    if (e.defaultPrevented) return;
+    if (isFunction(data)) {
+      const maybePromise = data();
+      if (maybePromise instanceof Promise) {
+        maybePromise.then((data2) => download(data2));
+      } else {
+        download(maybePromise);
+      }
+    } else {
+      download(data);
+    }
+  };
+  return /* @__PURE__ */ jsx(ark.button, { ref, ...rest, type: "button", onClick });
+});
+DownloadTrigger.displayName = "DownloadTrigger";
+
+export { DownloadTrigger };

package/dist/components/download-trigger/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const downloadTrigger = require('./download-trigger.cjs');
+
+
+
+exports.DownloadTrigger = downloadTrigger.DownloadTrigger;

package/dist/components/download-trigger/index.d.cts

@@ -0,0 +1,2 @@
+export { DownloadTrigger } from './download-trigger';
+export type { DownloadTriggerBaseProps, DownloadTriggerProps } from './download-trigger';

package/dist/components/download-trigger/index.d.ts

@@ -0,0 +1,2 @@
+export { DownloadTrigger } from './download-trigger';
+export type { DownloadTriggerBaseProps, DownloadTriggerProps } from './download-trigger';

package/dist/components/download-trigger/index.js

@@ -0,0 +1 @@
+export { DownloadTrigger } from './download-trigger.js';

package/dist/components/index.cjs

@@ -65,6 +65,7 @@ const useClipboardContext = require('./clipboard/use-clipboard-context.cjs');
 const clipboard$1 = require('./clipboard/clipboard.cjs');
 const collapsibleContent = require('./collapsible/collapsible-content.cjs');
 const collapsibleContext = require('./collapsible/collapsible-context.cjs');
+const collapsibleIndicator = require('./collapsible/collapsible-indicator.cjs');
 const collapsibleRoot = require('./collapsible/collapsible-root.cjs');
 const collapsibleRootProvider = require('./collapsible/collapsible-root-provider.cjs');
 const collapsibleTrigger = require('./collapsible/collapsible-trigger.cjs');
@@ -171,6 +172,7 @@ const dialogTrigger = require('./dialog/dialog-trigger.cjs');
 const useDialog = require('./dialog/use-dialog.cjs');
 const useDialogContext = require('./dialog/use-dialog-context.cjs');
 const dialog$1 = require('./dialog/dialog.cjs');
+const downloadTrigger = require('./download-trigger/download-trigger.cjs');
 const editableArea = require('./editable/editable-area.cjs');
 const editableCancelTrigger = require('./editable/editable-cancel-trigger.cjs');
 const editableContext = require('./editable/editable-context.cjs');
@@ -704,6 +706,7 @@ exports.useClipboardContext = useClipboardContext.useClipboardContext;
 exports.Clipboard = clipboard$1;
 exports.CollapsibleContent = collapsibleContent.CollapsibleContent;
 exports.CollapsibleContext = collapsibleContext.CollapsibleContext;
+exports.CollapsibleIndicator = collapsibleIndicator.CollapsibleIndicator;
 exports.CollapsibleRoot = collapsibleRoot.CollapsibleRoot;
 exports.CollapsibleRootProvider = collapsibleRootProvider.CollapsibleRootProvider;
 exports.CollapsibleTrigger = collapsibleTrigger.CollapsibleTrigger;
@@ -818,6 +821,7 @@ exports.DialogTrigger = dialogTrigger.DialogTrigger;
 exports.useDialog = useDialog.useDialog;
 exports.useDialogContext = useDialogContext.useDialogContext;
 exports.Dialog = dialog$1;
+exports.DownloadTrigger = downloadTrigger.DownloadTrigger;
 exports.EditableArea = editableArea.EditableArea;
 exports.EditableCancelTrigger = editableCancelTrigger.EditableCancelTrigger;
 exports.EditableContext = editableContext.EditableContext;

package/dist/components/index.d.cts

@@ -9,6 +9,7 @@ export * from './color-picker';
 export * from './combobox';
 export * from './date-picker';
 export * from './dialog';
+export * from './download-trigger';
 export * from './editable';
 export * from './factory';
 export * from './field';

package/dist/components/index.d.ts

@@ -9,6 +9,7 @@ export * from './color-picker';
 export * from './combobox';
 export * from './date-picker';
 export * from './dialog';
+export * from './download-trigger';
 export * from './editable';
 export * from './factory';
 export * from './field';

package/dist/components/index.js

@@ -66,6 +66,7 @@ import * as clipboard from './clipboard/clipboard.js';
 export { clipboard as Clipboard };
 export { CollapsibleContent } from './collapsible/collapsible-content.js';
 export { CollapsibleContext } from './collapsible/collapsible-context.js';
+export { CollapsibleIndicator } from './collapsible/collapsible-indicator.js';
 export { CollapsibleRoot } from './collapsible/collapsible-root.js';
 export { CollapsibleRootProvider } from './collapsible/collapsible-root-provider.js';
 export { CollapsibleTrigger } from './collapsible/collapsible-trigger.js';
@@ -177,6 +178,7 @@ export { useDialog } from './dialog/use-dialog.js';
 export { useDialogContext } from './dialog/use-dialog-context.js';
 import * as dialog from './dialog/dialog.js';
 export { dialog as Dialog };
+export { DownloadTrigger } from './download-trigger/download-trigger.js';
 export { EditableArea } from './editable/editable-area.js';
 export { EditableCancelTrigger } from './editable/editable-cancel-trigger.js';
 export { EditableContext } from './editable/editable-context.js';

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

@@ -1,4 +1,4 @@
-export type { SizeChangeDetails as SplitterSizeChangeDetails } from '@zag-js/splitter';
+export type { ExpandCollapseDetails as SplitterExpandCollapseDetails, PanelData as SplitterPanelData, ResizeDetails as SplitterResizeDetails, ResizeEndDetails as SplitterResizeEndDetails, } from '@zag-js/splitter';
 export { SplitterContext, type SplitterContextProps } from './splitter-context';
 export { SplitterPanel, type SplitterPanelBaseProps, type SplitterPanelProps } from './splitter-panel';
 export { SplitterResizeTrigger, type SplitterResizeTriggerBaseProps, type SplitterResizeTriggerProps, } from './splitter-resize-trigger';

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

@@ -1,4 +1,4 @@
-export type { SizeChangeDetails as SplitterSizeChangeDetails } from '@zag-js/splitter';
+export type { ExpandCollapseDetails as SplitterExpandCollapseDetails, PanelData as SplitterPanelData, ResizeDetails as SplitterResizeDetails, ResizeEndDetails as SplitterResizeEndDetails, } from '@zag-js/splitter';
 export { SplitterContext, type SplitterContextProps } from './splitter-context';
 export { SplitterPanel, type SplitterPanelBaseProps, type SplitterPanelProps } from './splitter-panel';
 export { SplitterResizeTrigger, type SplitterResizeTriggerBaseProps, type SplitterResizeTriggerProps, } from './splitter-resize-trigger';

package/dist/components/splitter/splitter-panel.cjs

@@ -11,7 +11,7 @@ const factory = require('../factory.cjs');
 const useSplitterContext = require('./use-splitter-context.cjs');
 
 const SplitterPanel = react.forwardRef((props, ref) => {
-  const [splitterPanelProps, localProps] = createSplitProps.createSplitProps()(props, ["id", "snapSize"]);
+  const [splitterPanelProps, localProps] = createSplitProps.createSplitProps()(props, ["id"]);
   const splitter = useSplitterContext.useSplitterContext();
   const mergedProps = react$1.mergeProps(splitter.getPanelProps(splitterPanelProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });

package/dist/components/splitter/splitter-panel.js

@@ -7,7 +7,7 @@ import { ark } from '../factory.js';
 import { useSplitterContext } from './use-splitter-context.js';
 
 const SplitterPanel = forwardRef((props, ref) => {
-  const [splitterPanelProps, localProps] = createSplitProps()(props, ["id", "snapSize"]);
+  const [splitterPanelProps, localProps] = createSplitProps()(props, ["id"]);
   const splitter = useSplitterContext();
   const mergedProps = mergeProps(splitter.getPanelProps(splitterPanelProps), localProps);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });

package/dist/components/splitter/splitter-resize-trigger.cjs

@@ -11,7 +11,7 @@ const factory = require('../factory.cjs');
 const useSplitterContext = require('./use-splitter-context.cjs');
 
 const SplitterResizeTrigger = react.forwardRef((props, ref) => {
-  const [triggerProps, localProps] = createSplitProps.createSplitProps()(props, ["disabled", "id", "step"]);
+  const [triggerProps, localProps] = createSplitProps.createSplitProps()(props, ["disabled", "id"]);
   const splitter = useSplitterContext.useSplitterContext();
   const mergedProps = react$1.mergeProps(splitter.getResizeTriggerProps(triggerProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ref, ...mergedProps });

package/dist/components/splitter/splitter-resize-trigger.js

@@ -7,7 +7,7 @@ import { ark } from '../factory.js';
 import { useSplitterContext } from './use-splitter-context.js';
 
 const SplitterResizeTrigger = forwardRef((props, ref) => {
-  const [triggerProps, localProps] = createSplitProps()(props, ["disabled", "id", "step"]);
+  const [triggerProps, localProps] = createSplitProps()(props, ["disabled", "id"]);
   const splitter = useSplitterContext();
   const mergedProps = mergeProps(splitter.getResizeTriggerProps(triggerProps), localProps);
   return /* @__PURE__ */ jsx(ark.button, { ref, ...mergedProps });

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

@@ -16,9 +16,15 @@ const SplitterRoot = react.forwardRef((props, ref) => {
     "defaultSize",
     "id",
     "ids",
-    "onSizeChange",
-    "onSizeChangeEnd",
+    "keyboardResizeBy",
+    "nonce",
+    "onCollapse",
+    "onExpand",
+    "onResize",
+    "onResizeEnd",
+    "onResizeStart",
     "orientation",
+    "panels",
     "size"
   ]);
   const splitter = useSplitter.useSplitter(useSplitterProps);

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

@@ -1,8 +1,9 @@
+import { Assign } from '../../types';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { UseSplitterProps } from './use-splitter';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface SplitterRootBaseProps extends UseSplitterProps, PolymorphicProps {
 }
-export interface SplitterRootProps extends HTMLProps<'div'>, SplitterRootBaseProps {
+export interface SplitterRootProps extends Assign<HTMLProps<'div'>, SplitterRootBaseProps> {
 }
 export declare const SplitterRoot: ForwardRefExoticComponent<SplitterRootProps & RefAttributes<HTMLDivElement>>;

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

@@ -1,8 +1,9 @@
+import { Assign } from '../../types';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { UseSplitterProps } from './use-splitter';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface SplitterRootBaseProps extends UseSplitterProps, PolymorphicProps {
 }
-export interface SplitterRootProps extends HTMLProps<'div'>, SplitterRootBaseProps {
+export interface SplitterRootProps extends Assign<HTMLProps<'div'>, SplitterRootBaseProps> {
 }
 export declare const SplitterRoot: ForwardRefExoticComponent<SplitterRootProps & RefAttributes<HTMLDivElement>>;

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

@@ -12,9 +12,15 @@ const SplitterRoot = forwardRef((props, ref) => {
     "defaultSize",
     "id",
     "ids",
-    "onSizeChange",
-    "onSizeChangeEnd",
+    "keyboardResizeBy",
+    "nonce",
+    "onCollapse",
+    "onExpand",
+    "onResize",
+    "onResizeEnd",
+    "onResizeStart",
     "orientation",
+    "panels",
     "size"
   ]);
   const splitter = useSplitter(useSplitterProps);

package/dist/components/splitter/splitter.d.cts

@@ -1,4 +1,4 @@
-export type { SizeChangeDetails } from '@zag-js/splitter';
+export type { ExpandCollapseDetails, PanelData, ResizeDetails, ResizeEndDetails } from '@zag-js/splitter';
 export { SplitterContext as Context, type SplitterContextProps as ContextProps } from './splitter-context';
 export { SplitterPanel as Panel, type SplitterPanelBaseProps as PanelBaseProps, type SplitterPanelProps as PanelProps, } from './splitter-panel';
 export { SplitterResizeTrigger as ResizeTrigger, type SplitterResizeTriggerBaseProps as ResizeTriggerBaseProps, type SplitterResizeTriggerProps as ResizeTriggerProps, } from './splitter-resize-trigger';

package/dist/components/splitter/splitter.d.ts

@@ -1,4 +1,4 @@
-export type { SizeChangeDetails } from '@zag-js/splitter';
+export type { ExpandCollapseDetails, PanelData, ResizeDetails, ResizeEndDetails } from '@zag-js/splitter';
 export { SplitterContext as Context, type SplitterContextProps as ContextProps } from './splitter-context';
 export { SplitterPanel as Panel, type SplitterPanelBaseProps as PanelBaseProps, type SplitterPanelProps as PanelProps, } from './splitter-panel';
 export { SplitterResizeTrigger as ResizeTrigger, type SplitterResizeTriggerBaseProps as ResizeTriggerBaseProps, type SplitterResizeTriggerProps as ResizeTriggerProps, } from './splitter-resize-trigger';

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

@@ -5,4 +5,4 @@ export interface UseSplitterProps extends Optional<Omit<splitter.Props, 'dir' |
 }
 export interface UseSplitterReturn extends splitter.Api<PropTypes> {
 }
-export declare const useSplitter: (props?: UseSplitterProps) => UseSplitterReturn;
+export declare const useSplitter: (props: UseSplitterProps) => UseSplitterReturn;

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

@@ -5,4 +5,4 @@ export interface UseSplitterProps extends Optional<Omit<splitter.Props, 'dir' |
 }
 export interface UseSplitterReturn extends splitter.Api<PropTypes> {
 }
-export declare const useSplitter: (props?: UseSplitterProps) => UseSplitterReturn;
+export declare const useSplitter: (props: UseSplitterProps) => UseSplitterReturn;

package/dist/components/toast/toaster.cjs

@@ -39,7 +39,7 @@ const Toaster = react.forwardRef((props, ref) => {
     store: toaster,
     id: react.useId(),
     dir: locale?.dir,
-    getRootNode: () => env?.getDocument()
+    getRootNode: env?.getRootNode
   });
   const api = toast__namespace.group.connect(service, react$1.normalizeProps);
   const mergedProps = react$1.mergeProps(api.getGroupProps(), localProps);

package/dist/components/toast/toaster.js

@@ -16,7 +16,7 @@ const Toaster = forwardRef((props, ref) => {
     store: toaster,
     id: useId(),
     dir: locale?.dir,
-    getRootNode: () => env?.getDocument()
+    getRootNode: env?.getRootNode
   });
   const api = toast.group.connect(service, normalizeProps);
   const mergedProps = mergeProps(api.getGroupProps(), localProps);

package/dist/index.cjs

@@ -65,6 +65,7 @@ const useClipboardContext = require('./components/clipboard/use-clipboard-contex
 const clipboard$1 = require('./components/clipboard/clipboard.cjs');
 const collapsibleContent = require('./components/collapsible/collapsible-content.cjs');
 const collapsibleContext = require('./components/collapsible/collapsible-context.cjs');
+const collapsibleIndicator = require('./components/collapsible/collapsible-indicator.cjs');
 const collapsibleRoot = require('./components/collapsible/collapsible-root.cjs');
 const collapsibleRootProvider = require('./components/collapsible/collapsible-root-provider.cjs');
 const collapsibleTrigger = require('./components/collapsible/collapsible-trigger.cjs');
@@ -171,6 +172,7 @@ const dialogTrigger = require('./components/dialog/dialog-trigger.cjs');
 const useDialog = require('./components/dialog/use-dialog.cjs');
 const useDialogContext = require('./components/dialog/use-dialog-context.cjs');
 const dialog$1 = require('./components/dialog/dialog.cjs');
+const downloadTrigger = require('./components/download-trigger/download-trigger.cjs');
 const editableArea = require('./components/editable/editable-area.cjs');
 const editableCancelTrigger = require('./components/editable/editable-cancel-trigger.cjs');
 const editableContext = require('./components/editable/editable-context.cjs');
@@ -708,6 +710,7 @@ exports.useClipboardContext = useClipboardContext.useClipboardContext;
 exports.Clipboard = clipboard$1;
 exports.CollapsibleContent = collapsibleContent.CollapsibleContent;
 exports.CollapsibleContext = collapsibleContext.CollapsibleContext;
+exports.CollapsibleIndicator = collapsibleIndicator.CollapsibleIndicator;
 exports.CollapsibleRoot = collapsibleRoot.CollapsibleRoot;
 exports.CollapsibleRootProvider = collapsibleRootProvider.CollapsibleRootProvider;
 exports.CollapsibleTrigger = collapsibleTrigger.CollapsibleTrigger;
@@ -822,6 +825,7 @@ exports.DialogTrigger = dialogTrigger.DialogTrigger;
 exports.useDialog = useDialog.useDialog;
 exports.useDialogContext = useDialogContext.useDialogContext;
 exports.Dialog = dialog$1;
+exports.DownloadTrigger = downloadTrigger.DownloadTrigger;
 exports.EditableArea = editableArea.EditableArea;
 exports.EditableCancelTrigger = editableCancelTrigger.EditableCancelTrigger;
 exports.EditableContext = editableContext.EditableContext;

package/dist/index.js

@@ -66,6 +66,7 @@ import * as clipboard from './components/clipboard/clipboard.js';
 export { clipboard as Clipboard };
 export { CollapsibleContent } from './components/collapsible/collapsible-content.js';
 export { CollapsibleContext } from './components/collapsible/collapsible-context.js';
+export { CollapsibleIndicator } from './components/collapsible/collapsible-indicator.js';
 export { CollapsibleRoot } from './components/collapsible/collapsible-root.js';
 export { CollapsibleRootProvider } from './components/collapsible/collapsible-root-provider.js';
 export { CollapsibleTrigger } from './components/collapsible/collapsible-trigger.js';
@@ -177,6 +178,7 @@ export { useDialog } from './components/dialog/use-dialog.js';
 export { useDialogContext } from './components/dialog/use-dialog-context.js';
 import * as dialog from './components/dialog/dialog.js';
 export { dialog as Dialog };
+export { DownloadTrigger } from './components/download-trigger/download-trigger.js';
 export { EditableArea } from './components/editable/editable-area.js';
 export { EditableCancelTrigger } from './components/editable/editable-cancel-trigger.js';
 export { EditableContext } from './components/editable/editable-context.js';

package/dist/node_modules/@zag-js/utils/dist/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+// src/array.ts
+var isFunction = (v) => typeof v === "function";
+var fnToString = Function.prototype.toString;
+fnToString.call(Object);
+
+exports.isFunction = isFunction;

package/dist/node_modules/@zag-js/utils/dist/index.js

@@ -0,0 +1,6 @@
+// src/array.ts
+var isFunction = (v) => typeof v === "function";
+var fnToString = Function.prototype.toString;
+fnToString.call(Object);
+
+export { isFunction };

package/dist/types.d.cts

@@ -1,2 +1,3 @@
 export type Assign<T, U> = Omit<T, keyof U> & U;
 export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+export type MaybePromise<T> = T | Promise<T>;

package/dist/types.d.ts

@@ -1,2 +1,3 @@
 export type Assign<T, U> = Omit<T, keyof U> & U;
 export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+export type MaybePromise<T> = T | Promise<T>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ark-ui/react",
   "type": "module",
-  "version": "5.1.0",
+  "version": "5.3.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -134,6 +134,7 @@
     "dev": "bun run storybook",
     "lint": "biome lint ./src",
     "test": "vitest",
+    "test:coverage": "vitest run --coverage",
     "test:ci": "vitest --run",
     "typecheck": "tsc",
     "storybook": "storybook dev -p 6006",
@@ -147,58 +148,58 @@
   "sideEffects": false,
   "dependencies": {
     "@internationalized/date": "3.7.0",
-    "@zag-js/accordion": "1.4.1",
-    "@zag-js/anatomy": "1.4.1",
-    "@zag-js/auto-resize": "1.4.1",
-    "@zag-js/avatar": "1.4.1",
-    "@zag-js/carousel": "1.4.1",
-    "@zag-js/checkbox": "1.4.1",
-    "@zag-js/clipboard": "1.4.1",
-    "@zag-js/collapsible": "1.4.1",
-    "@zag-js/collection": "1.4.1",
-    "@zag-js/color-picker": "1.4.1",
-    "@zag-js/color-utils": "1.4.1",
-    "@zag-js/combobox": "1.4.1",
-    "@zag-js/core": "1.4.1",
-    "@zag-js/date-picker": "1.4.1",
-    "@zag-js/date-utils": "1.4.1",
-    "@zag-js/dialog": "1.4.1",
-    "@zag-js/dom-query": "1.4.1",
-    "@zag-js/editable": "1.4.1",
-    "@zag-js/file-upload": "1.4.1",
-    "@zag-js/file-utils": "1.4.1",
-    "@zag-js/focus-trap": "1.4.1",
-    "@zag-js/highlight-word": "1.4.1",
-    "@zag-js/hover-card": "1.4.1",
-    "@zag-js/i18n-utils": "1.4.1",
-    "@zag-js/menu": "1.4.1",
-    "@zag-js/number-input": "1.4.1",
-    "@zag-js/pagination": "1.4.1",
-    "@zag-js/pin-input": "1.4.1",
-    "@zag-js/popover": "1.4.1",
-    "@zag-js/presence": "1.4.1",
-    "@zag-js/progress": "1.4.1",
-    "@zag-js/qr-code": "1.4.1",
-    "@zag-js/radio-group": "1.4.1",
-    "@zag-js/rating-group": "1.4.1",
-    "@zag-js/react": "1.4.1",
-    "@zag-js/select": "1.4.1",
-    "@zag-js/signature-pad": "1.4.1",
-    "@zag-js/slider": "1.4.1",
-    "@zag-js/splitter": "1.4.1",
-    "@zag-js/steps": "1.4.1",
-    "@zag-js/switch": "1.4.1",
-    "@zag-js/tabs": "1.4.1",
-    "@zag-js/tags-input": "1.4.1",
-    "@zag-js/time-picker": "1.4.1",
-    "@zag-js/timer": "1.4.1",
-    "@zag-js/toast": "1.4.1",
-    "@zag-js/toggle": "1.4.1",
-    "@zag-js/toggle-group": "1.4.1",
-    "@zag-js/tooltip": "1.4.1",
-    "@zag-js/tour": "1.4.1",
-    "@zag-js/tree-view": "1.4.1",
-    "@zag-js/types": "1.4.1"
+    "@zag-js/accordion": "1.6.0",
+    "@zag-js/anatomy": "1.6.0",
+    "@zag-js/auto-resize": "1.6.0",
+    "@zag-js/avatar": "1.6.0",
+    "@zag-js/carousel": "1.6.0",
+    "@zag-js/checkbox": "1.6.0",
+    "@zag-js/clipboard": "1.6.0",
+    "@zag-js/collapsible": "1.6.0",
+    "@zag-js/collection": "1.6.0",
+    "@zag-js/color-picker": "1.6.0",
+    "@zag-js/color-utils": "1.6.0",
+    "@zag-js/combobox": "1.6.0",
+    "@zag-js/core": "1.6.0",
+    "@zag-js/date-picker": "1.6.0",
+    "@zag-js/date-utils": "1.6.0",
+    "@zag-js/dialog": "1.6.0",
+    "@zag-js/dom-query": "1.6.0",
+    "@zag-js/editable": "1.6.0",
+    "@zag-js/file-upload": "1.6.0",
+    "@zag-js/file-utils": "1.6.0",
+    "@zag-js/focus-trap": "1.6.0",
+    "@zag-js/highlight-word": "1.6.0",
+    "@zag-js/hover-card": "1.6.0",
+    "@zag-js/i18n-utils": "1.6.0",
+    "@zag-js/menu": "1.6.0",
+    "@zag-js/number-input": "1.6.0",
+    "@zag-js/pagination": "1.6.0",
+    "@zag-js/pin-input": "1.6.0",
+    "@zag-js/popover": "1.6.0",
+    "@zag-js/presence": "1.6.0",
+    "@zag-js/progress": "1.6.0",
+    "@zag-js/qr-code": "1.6.0",
+    "@zag-js/radio-group": "1.6.0",
+    "@zag-js/rating-group": "1.6.0",
+    "@zag-js/react": "1.6.0",
+    "@zag-js/select": "1.6.0",
+    "@zag-js/signature-pad": "1.6.0",
+    "@zag-js/slider": "1.6.0",
+    "@zag-js/splitter": "1.6.0",
+    "@zag-js/steps": "1.6.0",
+    "@zag-js/switch": "1.6.0",
+    "@zag-js/tabs": "1.6.0",
+    "@zag-js/tags-input": "1.6.0",
+    "@zag-js/time-picker": "1.6.0",
+    "@zag-js/timer": "1.6.0",
+    "@zag-js/toast": "1.6.0",
+    "@zag-js/toggle": "1.6.0",
+    "@zag-js/toggle-group": "1.6.0",
+    "@zag-js/tooltip": "1.6.0",
+    "@zag-js/tour": "1.6.0",
+    "@zag-js/tree-view": "1.6.0",
+    "@zag-js/types": "1.6.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
@@ -215,7 +216,7 @@
     "@types/react": "19.0.10",
     "@types/react-dom": "19.0.4",
     "@vitejs/plugin-react": "4.3.4",
-    "@zag-js/stringify-state": "1.4.1",
+    "@zag-js/stringify-state": "1.6.0",
     "clean-package": "2.2.0",
     "globby": "14.1.0",
     "happy-dom": "17.4.4",
@@ -231,6 +232,7 @@
     "vite": "6.2.2",
     "vite-plugin-dts": "4.5.3",
     "vitest": "3.0.9",
+    "@vitest/coverage-v8": "3.0.9",
     "vitest-axe": "1.0.0-pre.5"
   },
   "peerDependencies": {