@ark-ui/react 5.30.0 → 5.31.0

package/dist/components/slider/index.cjs

@@ -17,8 +17,8 @@ const sliderTrack = require('./slider-track.cjs');
 const sliderValueText = require('./slider-value-text.cjs');
 const useSlider = require('./use-slider.cjs');
 const useSliderContext = require('./use-slider-context.cjs');
-const slider$1 = require('./slider.cjs');
-const slider = require('@zag-js/slider');
+const slider = require('./slider.cjs');
+const slider$1 = require('@zag-js/slider');
 
 
 
@@ -37,8 +37,8 @@ exports.SliderTrack = sliderTrack.SliderTrack;
 exports.SliderValueText = sliderValueText.SliderValueText;
 exports.useSlider = useSlider.useSlider;
 exports.useSliderContext = useSliderContext.useSliderContext;
-exports.Slider = slider$1;
+exports.Slider = slider;
 Object.defineProperty(exports, "sliderAnatomy", {
   enumerable: true,
-  get: () => slider.anatomy
+  get: () => slider$1.anatomy
 });

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

@@ -35,7 +35,7 @@ const SliderRoot = react.forwardRef((props, ref) => {
     "readOnly",
     "step",
     "thumbAlignment",
-    "thumbAlignment",
+    "thumbCollisionBehavior",
     "thumbSize",
     "value"
   ]);

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

@@ -31,7 +31,7 @@ const SliderRoot = forwardRef((props, ref) => {
     "readOnly",
     "step",
     "thumbAlignment",
-    "thumbAlignment",
+    "thumbCollisionBehavior",
     "thumbSize",
     "value"
   ]);

package/dist/components/splitter/index.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const splitter = require('@zag-js/splitter');
+const splitter$1 = require('@zag-js/splitter');
 const splitterContext = require('./splitter-context.cjs');
 const splitterPanel = require('./splitter-panel.cjs');
 const splitterResizeTrigger = require('./splitter-resize-trigger.cjs');
@@ -11,17 +11,17 @@ const splitterRoot = require('./splitter-root.cjs');
 const splitterRootProvider = require('./splitter-root-provider.cjs');
 const useSplitter = require('./use-splitter.cjs');
 const useSplitterContext = require('./use-splitter-context.cjs');
-const splitter$1 = require('./splitter.cjs');
+const splitter = require('./splitter.cjs');
 
 
 
 Object.defineProperty(exports, "getSplitterLayout", {
   enumerable: true,
-  get: () => splitter.layout
+  get: () => splitter$1.layout
 });
 Object.defineProperty(exports, "splitterAnatomy", {
   enumerable: true,
-  get: () => splitter.anatomy
+  get: () => splitter$1.anatomy
 });
 exports.SplitterContext = splitterContext.SplitterContext;
 exports.SplitterPanel = splitterPanel.SplitterPanel;
@@ -31,4 +31,4 @@ exports.SplitterRoot = splitterRoot.SplitterRoot;
 exports.SplitterRootProvider = splitterRootProvider.SplitterRootProvider;
 exports.useSplitter = useSplitter.useSplitter;
 exports.useSplitterContext = useSplitterContext.useSplitterContext;
-exports.Splitter = splitter$1;
+exports.Splitter = splitter;

package/dist/components/steps/index.cjs

@@ -19,8 +19,8 @@ const stepsTrigger = require('./steps-trigger.cjs');
 const useSteps = require('./use-steps.cjs');
 const useStepsContext = require('./use-steps-context.cjs');
 const useStepsItemContext = require('./use-steps-item-context.cjs');
-const steps$1 = require('./steps.cjs');
-const steps = require('@zag-js/steps');
+const steps = require('./steps.cjs');
+const steps$1 = require('@zag-js/steps');
 
 
 
@@ -41,8 +41,8 @@ exports.StepsTrigger = stepsTrigger.StepsTrigger;
 exports.useSteps = useSteps.useSteps;
 exports.useStepsContext = useStepsContext.useStepsContext;
 exports.useStepsItemContext = useStepsItemContext.useStepsItemContext;
-exports.Steps = steps$1;
+exports.Steps = steps;
 Object.defineProperty(exports, "stepsAnatomy", {
   enumerable: true,
-  get: () => steps.anatomy
+  get: () => steps$1.anatomy
 });

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

@@ -14,13 +14,16 @@ const useStepsContext = require('./use-steps-context.cjs');
 const splitRootProps = createSplitProps.createSplitProps();
 const StepsRoot = react.forwardRef((props, ref) => {
   const [useStepsProps, localProps] = splitRootProps(props, [
+    "count",
     "defaultStep",
     "id",
     "ids",
-    "count",
+    "isStepSkippable",
+    "isStepValid",
     "linear",
     "onStepChange",
     "onStepComplete",
+    "onStepInvalid",
     "orientation",
     "step"
   ]);

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

@@ -10,13 +10,16 @@ import { StepsProvider } from './use-steps-context.js';
 const splitRootProps = createSplitProps();
 const StepsRoot = forwardRef((props, ref) => {
   const [useStepsProps, localProps] = splitRootProps(props, [
+    "count",
     "defaultStep",
     "id",
     "ids",
-    "count",
+    "isStepSkippable",
+    "isStepValid",
     "linear",
     "onStepChange",
     "onStepComplete",
+    "onStepInvalid",
     "orientation",
     "step"
   ]);

package/dist/components/tabs/index.cjs

@@ -11,8 +11,8 @@ const tabsRoot = require('./tabs-root.cjs');
 const tabsRootProvider = require('./tabs-root-provider.cjs');
 const useTabs = require('./use-tabs.cjs');
 const useTabsContext = require('./use-tabs-context.cjs');
-const tabs$1 = require('./tabs.cjs');
-const tabs = require('@zag-js/tabs');
+const tabs = require('./tabs.cjs');
+const tabs$1 = require('@zag-js/tabs');
 
 
 
@@ -25,8 +25,8 @@ exports.TabsRoot = tabsRoot.TabsRoot;
 exports.TabsRootProvider = tabsRootProvider.TabsRootProvider;
 exports.useTabs = useTabs.useTabs;
 exports.useTabsContext = useTabsContext.useTabsContext;
-exports.Tabs = tabs$1;
+exports.Tabs = tabs;
 Object.defineProperty(exports, "tabsAnatomy", {
   enumerable: true,
-  get: () => tabs.anatomy
+  get: () => tabs$1.anatomy
 });

package/dist/components/tags-input/index.cjs

@@ -19,8 +19,8 @@ const tagsInputRootProvider = require('./tags-input-root-provider.cjs');
 const useTagsInput = require('./use-tags-input.cjs');
 const useTagsInputContext = require('./use-tags-input-context.cjs');
 const useTagsInputItemContext = require('./use-tags-input-item-context.cjs');
-const tagsInput$1 = require('./tags-input.cjs');
-const tagsInput = require('@zag-js/tags-input');
+const tagsInput = require('./tags-input.cjs');
+const tagsInput$1 = require('@zag-js/tags-input');
 
 
 
@@ -41,8 +41,8 @@ exports.TagsInputRootProvider = tagsInputRootProvider.TagsInputRootProvider;
 exports.useTagsInput = useTagsInput.useTagsInput;
 exports.useTagsInputContext = useTagsInputContext.useTagsInputContext;
 exports.useTagsInputItemContext = useTagsInputItemContext.useTagsInputItemContext;
-exports.TagsInput = tagsInput$1;
+exports.TagsInput = tagsInput;
 Object.defineProperty(exports, "tagsInputAnatomy", {
   enumerable: true,
-  get: () => tagsInput.anatomy
+  get: () => tagsInput$1.anatomy
 });

package/dist/components/tags-input/tags-input-root.cjs

@@ -38,6 +38,7 @@ const TagsInputRoot = react.forwardRef((props, ref) => {
     "onPointerDownOutside",
     "onValueChange",
     "onValueInvalid",
+    "placeholder",
     "readOnly",
     "required",
     "translations",

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

@@ -34,6 +34,7 @@ const TagsInputRoot = forwardRef((props, ref) => {
     "onPointerDownOutside",
     "onValueChange",
     "onValueInvalid",
+    "placeholder",
     "readOnly",
     "required",
     "translations",

package/dist/components/timer/index.cjs

@@ -12,8 +12,8 @@ const timerRootProvider = require('./timer-root-provider.cjs');
 const timerSeparator = require('./timer-separator.cjs');
 const useTimer = require('./use-timer.cjs');
 const useTimerContext = require('./use-timer-context.cjs');
-const timer$1 = require('./timer.cjs');
-const timer = require('@zag-js/timer');
+const timer = require('./timer.cjs');
+const timer$1 = require('@zag-js/timer');
 
 
 
@@ -27,8 +27,8 @@ exports.TimerRootProvider = timerRootProvider.TimerRootProvider;
 exports.TimerSeparator = timerSeparator.TimerSeparator;
 exports.useTimer = useTimer.useTimer;
 exports.useTimerContext = useTimerContext.useTimerContext;
-exports.Timer = timer$1;
+exports.Timer = timer;
 Object.defineProperty(exports, "timerAnatomy", {
   enumerable: true,
-  get: () => timer.anatomy
+  get: () => timer$1.anatomy
 });

package/dist/components/toast/index.cjs

@@ -11,8 +11,8 @@ const toastRoot = require('./toast-root.cjs');
 const toastTitle = require('./toast-title.cjs');
 const toaster = require('./toaster.cjs');
 const useToastContext = require('./use-toast-context.cjs');
-const toast$1 = require('./toast.cjs');
-const toast = require('@zag-js/toast');
+const toast = require('./toast.cjs');
+const toast$1 = require('@zag-js/toast');
 
 
 
@@ -25,8 +25,8 @@ exports.ToastRoot = toastRoot.ToastRoot;
 exports.ToastTitle = toastTitle.ToastTitle;
 exports.Toaster = toaster.Toaster;
 exports.useToastContext = useToastContext.useToastContext;
-exports.Toast = toast$1;
+exports.Toast = toast;
 Object.defineProperty(exports, "toastAnatomy", {
   enumerable: true,
-  get: () => toast.anatomy
+  get: () => toast$1.anatomy
 });

package/dist/components/toggle-group/index.cjs

@@ -8,8 +8,8 @@ const toggleGroupRoot = require('./toggle-group-root.cjs');
 const toggleGroupRootProvider = require('./toggle-group-root-provider.cjs');
 const useToggleGroup = require('./use-toggle-group.cjs');
 const useToggleGroupContext = require('./use-toggle-group-context.cjs');
-const toggleGroup$1 = require('./toggle-group.cjs');
-const toggleGroup = require('@zag-js/toggle-group');
+const toggleGroup = require('./toggle-group.cjs');
+const toggleGroup$1 = require('@zag-js/toggle-group');
 
 
 
@@ -19,8 +19,8 @@ exports.ToggleGroupRoot = toggleGroupRoot.ToggleGroupRoot;
 exports.ToggleGroupRootProvider = toggleGroupRootProvider.ToggleGroupRootProvider;
 exports.useToggleGroup = useToggleGroup.useToggleGroup;
 exports.useToggleGroupContext = useToggleGroupContext.useToggleGroupContext;
-exports.ToggleGroup = toggleGroup$1;
+exports.ToggleGroup = toggleGroup;
 Object.defineProperty(exports, "toggleGroupAnatomy", {
   enumerable: true,
-  get: () => toggleGroup.anatomy
+  get: () => toggleGroup$1.anatomy
 });

package/dist/components/tooltip/index.cjs

@@ -12,8 +12,8 @@ const tooltipRootProvider = require('./tooltip-root-provider.cjs');
 const tooltipTrigger = require('./tooltip-trigger.cjs');
 const useTooltip = require('./use-tooltip.cjs');
 const useTooltipContext = require('./use-tooltip-context.cjs');
-const tooltip$1 = require('./tooltip.cjs');
-const tooltip = require('@zag-js/tooltip');
+const tooltip = require('./tooltip.cjs');
+const tooltip$1 = require('@zag-js/tooltip');
 
 
 
@@ -27,8 +27,8 @@ exports.TooltipRootProvider = tooltipRootProvider.TooltipRootProvider;
 exports.TooltipTrigger = tooltipTrigger.TooltipTrigger;
 exports.useTooltip = useTooltip.useTooltip;
 exports.useTooltipContext = useTooltipContext.useTooltipContext;
-exports.Tooltip = tooltip$1;
+exports.Tooltip = tooltip;
 Object.defineProperty(exports, "tooltipAnatomy", {
   enumerable: true,
-  get: () => tooltip.anatomy
+  get: () => tooltip$1.anatomy
 });

package/dist/components/tour/index.cjs

@@ -2,6 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const tour$1 = require('@zag-js/tour');
+const waitForEvent = require('./wait-for-event.cjs');
 const tourActionTrigger = require('./tour-action-trigger.cjs');
 const tourActions = require('./tour-actions.cjs');
 const tourArrow = require('./tour-arrow.cjs');
@@ -24,6 +26,19 @@ const tour = require('./tour.cjs');
 
 
 
+Object.defineProperty(exports, "waitForElement", {
+  enumerable: true,
+  get: () => tour$1.waitForElement
+});
+Object.defineProperty(exports, "waitForElementValue", {
+  enumerable: true,
+  get: () => tour$1.waitForElementValue
+});
+Object.defineProperty(exports, "waitForPromise", {
+  enumerable: true,
+  get: () => tour$1.waitForPromise
+});
+exports.waitForEvent = waitForEvent.waitForEvent;
 exports.TourActionTrigger = tourActionTrigger.TourActionTrigger;
 exports.TourActions = tourActions.TourActions;
 exports.TourArrow = tourArrow.TourArrow;

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

@@ -1,4 +1,6 @@
-export type { FocusOutsideEvent as TourFocusOutsideEvent, InteractOutsideEvent as TourInteractOutsideEvent, PointerDownOutsideEvent as TourPointerDownOutsideEvent, StepDetails as TourStepDetails, } from '@zag-js/tour';
+export { waitForElement, waitForElementValue, waitForPromise, type WaitOptions } from '@zag-js/tour';
+export { waitForEvent, type WaitForEventOptions } from './wait-for-event';
+export type { FocusOutsideEvent as TourFocusOutsideEvent, InteractOutsideEvent as TourInteractOutsideEvent, PointerDownOutsideEvent as TourPointerDownOutsideEvent, StepDetails as TourStepDetails, StepEffectArgs as TourStepEffectArgs, } from '@zag-js/tour';
 export { TourActionTrigger, type TourActionTriggerBaseProps, type TourActionTriggerProps } from './tour-action-trigger';
 export { TourActions, type TourActionsProps } from './tour-actions';
 export { TourArrow, type TourArrowBaseProps, type TourArrowProps } from './tour-arrow';

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

@@ -1,4 +1,6 @@
-export type { FocusOutsideEvent as TourFocusOutsideEvent, InteractOutsideEvent as TourInteractOutsideEvent, PointerDownOutsideEvent as TourPointerDownOutsideEvent, StepDetails as TourStepDetails, } from '@zag-js/tour';
+export { waitForElement, waitForElementValue, waitForPromise, type WaitOptions } from '@zag-js/tour';
+export { waitForEvent, type WaitForEventOptions } from './wait-for-event';
+export type { FocusOutsideEvent as TourFocusOutsideEvent, InteractOutsideEvent as TourInteractOutsideEvent, PointerDownOutsideEvent as TourPointerDownOutsideEvent, StepDetails as TourStepDetails, StepEffectArgs as TourStepEffectArgs, } from '@zag-js/tour';
 export { TourActionTrigger, type TourActionTriggerBaseProps, type TourActionTriggerProps } from './tour-action-trigger';
 export { TourActions, type TourActionsProps } from './tour-actions';
 export { TourArrow, type TourArrowBaseProps, type TourArrowProps } from './tour-arrow';

package/dist/components/tour/index.js

@@ -1,3 +1,5 @@
+export { waitForElement, waitForElementValue, waitForPromise } from '@zag-js/tour';
+export { waitForEvent } from './wait-for-event.js';
 export { TourActionTrigger } from './tour-action-trigger.js';
 export { TourActions } from './tour-actions.js';
 export { TourArrow } from './tour-arrow.js';

package/dist/components/tour/wait-for-event.cjs

@@ -0,0 +1,26 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+function waitForEvent(target, event, options) {
+  let cleanup;
+  const { predicate, ...listenerOptions } = options ?? {};
+  const promise = new Promise((resolve) => {
+    const element = target?.();
+    if (!element) {
+      return;
+    }
+    const handler = (e) => {
+      if (!predicate || predicate(element)) {
+        resolve(e);
+        cleanup?.();
+      }
+    };
+    element.addEventListener(event, handler, listenerOptions);
+    cleanup = () => element.removeEventListener(event, handler, listenerOptions);
+  });
+  return [promise, () => cleanup?.()];
+}
+
+exports.waitForEvent = waitForEvent;

package/dist/components/tour/wait-for-event.d.cts

@@ -0,0 +1,6 @@
+type WaitForEventReturn<K extends keyof HTMLElementEventMap> = [Promise<HTMLElementEventMap[K]>, VoidFunction];
+export interface WaitForEventOptions<T extends HTMLElement = HTMLElement> extends AddEventListenerOptions {
+    predicate?: (element: T) => boolean;
+}
+export declare function waitForEvent<T extends HTMLElement = HTMLElement, K extends keyof HTMLElementEventMap = keyof HTMLElementEventMap>(target: (() => HTMLElement | null) | undefined, event: K, options?: WaitForEventOptions<T>): WaitForEventReturn<K>;
+export {};

package/dist/components/tour/wait-for-event.d.ts

@@ -0,0 +1,6 @@
+type WaitForEventReturn<K extends keyof HTMLElementEventMap> = [Promise<HTMLElementEventMap[K]>, VoidFunction];
+export interface WaitForEventOptions<T extends HTMLElement = HTMLElement> extends AddEventListenerOptions {
+    predicate?: (element: T) => boolean;
+}
+export declare function waitForEvent<T extends HTMLElement = HTMLElement, K extends keyof HTMLElementEventMap = keyof HTMLElementEventMap>(target: (() => HTMLElement | null) | undefined, event: K, options?: WaitForEventOptions<T>): WaitForEventReturn<K>;
+export {};

package/dist/components/tour/wait-for-event.js

@@ -0,0 +1,22 @@
+'use client';
+function waitForEvent(target, event, options) {
+  let cleanup;
+  const { predicate, ...listenerOptions } = options ?? {};
+  const promise = new Promise((resolve) => {
+    const element = target?.();
+    if (!element) {
+      return;
+    }
+    const handler = (e) => {
+      if (!predicate || predicate(element)) {
+        resolve(e);
+        cleanup?.();
+      }
+    };
+    element.addEventListener(event, handler, listenerOptions);
+    cleanup = () => element.removeEventListener(event, handler, listenerOptions);
+  });
+  return [promise, () => cleanup?.()];
+}
+
+export { waitForEvent };

package/dist/components/tree-view/index.cjs

@@ -26,8 +26,8 @@ const treeViewNodeRenameInput = require('./tree-view-node-rename-input.cjs');
 const useTreeView = require('./use-tree-view.cjs');
 const useTreeViewContext = require('./use-tree-view-context.cjs');
 const useTreeViewNodeContext = require('./use-tree-view-node-context.cjs');
-const treeView$1 = require('./tree-view.cjs');
-const treeView = require('@zag-js/tree-view');
+const treeView = require('./tree-view.cjs');
+const treeView$1 = require('@zag-js/tree-view');
 
 
 
@@ -56,8 +56,8 @@ exports.TreeViewNodeRenameInput = treeViewNodeRenameInput.TreeViewNodeRenameInpu
 exports.useTreeView = useTreeView.useTreeView;
 exports.useTreeViewContext = useTreeViewContext.useTreeViewContext;
 exports.useTreeViewNodeContext = useTreeViewNodeContext.useTreeViewNodeContext;
-exports.TreeView = treeView$1;
+exports.TreeView = treeView;
 Object.defineProperty(exports, "treeViewAnatomy", {
   enumerable: true,
-  get: () => treeView.anatomy
+  get: () => treeView$1.anatomy
 });