@ark-ui/react 3.7.0 → 3.9.0

package/README.md

@@ -54,6 +54,7 @@ Ark UI is available for the following JavaScript frameworks:
 - [Tabs](https://ark-ui.com/react/docs/components/tabs)
 - [Tags Input](https://ark-ui.com/react/docs/components/tags-input)
 - [Time Picker](https://ark-ui.com/react/docs/components/time-picker)
+- [Timer](https://ark-ui.com/react/docs/components/timer)
 - [Toast](https://ark-ui.com/react/docs/components/toast)
 - [Toggle Group](https://ark-ui.com/react/docs/components/toggle-group)
 - [Tooltip](https://ark-ui.com/react/docs/components/tooltip)

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

@@ -15,8 +15,10 @@ const EditableRoot = react.forwardRef((props, ref) => {
   const [useEditableProps, localProps] = createSplitProps.createSplitProps()(props, [
     "activationMode",
     "autoResize",
+    "defaultEdit",
     "defaultValue",
     "disabled",
+    "edit",
     "finalFocusEl",
     "form",
     "id",
@@ -24,7 +26,7 @@ const EditableRoot = react.forwardRef((props, ref) => {
     "invalid",
     "maxLength",
     "name",
-    "onEdit",
+    "onEditChange",
     "onFocusOutside",
     "onInteractOutside",
     "onPointerDownOutside",
@@ -35,7 +37,6 @@ const EditableRoot = react.forwardRef((props, ref) => {
     "readOnly",
     "required",
     "selectOnFocus",
-    "startWithEditView",
     "submitMode",
     "translations",
     "value"

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

@@ -11,8 +11,10 @@ const EditableRoot = forwardRef((props, ref) => {
   const [useEditableProps, localProps] = createSplitProps()(props, [
     "activationMode",
     "autoResize",
+    "defaultEdit",
     "defaultValue",
     "disabled",
+    "edit",
     "finalFocusEl",
     "form",
     "id",
@@ -20,7 +22,7 @@ const EditableRoot = forwardRef((props, ref) => {
     "invalid",
     "maxLength",
     "name",
-    "onEdit",
+    "onEditChange",
     "onFocusOutside",
     "onInteractOutside",
     "onPointerDownOutside",
@@ -31,7 +33,6 @@ const EditableRoot = forwardRef((props, ref) => {
     "readOnly",
     "required",
     "selectOnFocus",
-    "startWithEditView",
     "submitMode",
     "translations",
     "value"

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

@@ -1,4 +1,7 @@
 export type { ValueChangeDetails as EditableValueChangeDetails } from '@zag-js/editable';
+export interface EditableEditChangeDetails {
+    edit: boolean;
+}
 export { EditableArea, type EditableAreaProps, type EditableAreaBaseProps, } from './editable-area';
 export { EditableCancelTrigger, type EditableCancelTriggerProps, type EditableCancelTriggerBaseProps, } from './editable-cancel-trigger';
 export { EditableContext, type EditableContextProps, } from './editable-context';

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

@@ -1,4 +1,7 @@
 export type { ValueChangeDetails as EditableValueChangeDetails } from '@zag-js/editable';
+export interface EditableEditChangeDetails {
+    edit: boolean;
+}
 export { EditableArea, type EditableAreaProps, type EditableAreaBaseProps, } from './editable-area';
 export { EditableCancelTrigger, type EditableCancelTriggerProps, type EditableCancelTriggerBaseProps, } from './editable-cancel-trigger';
 export { EditableContext, type EditableContextProps, } from './editable-context';

package/dist/components/editable/use-editable.cjs

@@ -46,14 +46,16 @@ const useEditable = (props = {}) => {
     readOnly: field?.readOnly,
     required: field?.required,
     getRootNode,
+    edit: props.defaultEdit,
     value: props.defaultValue,
+    "edit.controlled": props.edit !== void 0,
     ...props
   };
   const context = {
     ...initialContext,
     value: props.value,
     onValueChange: useEvent.useEvent(props.onValueChange, { sync: true }),
-    onEdit: useEvent.useEvent(props.onEdit),
+    onEditChange: useEvent.useEvent(props.onEditChange),
     onValueCommit: useEvent.useEvent(props.onValueCommit),
     onValueRevert: useEvent.useEvent(props.onValueRevert)
   };

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

@@ -1,7 +1,12 @@
 import { PropTypes } from '@zag-js/types';
 import { Optional } from '../../types';
 import * as editable from '@zag-js/editable';
-export interface UseEditableProps extends Optional<Omit<editable.Context, 'dir' | 'getRootNode'>, 'id'> {
+export interface UseEditableProps extends Optional<Omit<editable.Context, 'dir' | 'getRootNode' | 'edit.controlled'>, 'id'> {
+    /**
+     * The initial edit state of the editable when it is first rendered.
+     * Use when you do not need to control its edit state.
+     */
+    defaultEdit?: editable.Context['edit'];
     /**
      * The initial value of the editable when it is first rendered.
      * Use when you do not need to control the state of the editable.

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

@@ -1,7 +1,12 @@
 import { PropTypes } from '@zag-js/types';
 import { Optional } from '../../types';
 import * as editable from '@zag-js/editable';
-export interface UseEditableProps extends Optional<Omit<editable.Context, 'dir' | 'getRootNode'>, 'id'> {
+export interface UseEditableProps extends Optional<Omit<editable.Context, 'dir' | 'getRootNode' | 'edit.controlled'>, 'id'> {
+    /**
+     * The initial edit state of the editable when it is first rendered.
+     * Use when you do not need to control its edit state.
+     */
+    defaultEdit?: editable.Context['edit'];
     /**
      * The initial value of the editable when it is first rendered.
      * Use when you do not need to control the state of the editable.

package/dist/components/editable/use-editable.js

@@ -23,14 +23,16 @@ const useEditable = (props = {}) => {
     readOnly: field?.readOnly,
     required: field?.required,
     getRootNode,
+    edit: props.defaultEdit,
     value: props.defaultValue,
+    "edit.controlled": props.edit !== void 0,
     ...props
   };
   const context = {
     ...initialContext,
     value: props.value,
     onValueChange: useEvent(props.onValueChange, { sync: true }),
-    onEdit: useEvent(props.onEdit),
+    onEditChange: useEvent(props.onEditChange),
     onValueCommit: useEvent(props.onValueCommit),
     onValueRevert: useEvent(props.onValueRevert)
   };

package/dist/components/index.cjs

@@ -437,6 +437,23 @@ const splitterRootProvider = require('./splitter/splitter-root-provider.cjs');
 const useSplitter = require('./splitter/use-splitter.cjs');
 const useSplitterContext = require('./splitter/use-splitter-context.cjs');
 const splitter$1 = require('./splitter/splitter.cjs');
+const stepsCompletedContent = require('./steps/steps-completed-content.cjs');
+const stepsContent = require('./steps/steps-content.cjs');
+const stepsIndicator = require('./steps/steps-indicator.cjs');
+const stepsItem = require('./steps/steps-item.cjs');
+const stepsItemContext = require('./steps/steps-item-context.cjs');
+const stepsList = require('./steps/steps-list.cjs');
+const stepsNextTrigger = require('./steps/steps-next-trigger.cjs');
+const stepsPrevTrigger = require('./steps/steps-prev-trigger.cjs');
+const stepsProgress = require('./steps/steps-progress.cjs');
+const stepsRoot = require('./steps/steps-root.cjs');
+const stepsRootProvider = require('./steps/steps-root-provider.cjs');
+const stepsSeparator = require('./steps/steps-separator.cjs');
+const stepsTrigger = require('./steps/steps-trigger.cjs');
+const useSteps = require('./steps/use-steps.cjs');
+const useStepsContext = require('./steps/use-steps-context.cjs');
+const useStepsItemContext = require('./steps/use-steps-item-context.cjs');
+const steps = require('./steps/steps.cjs');
 const switchContext = require('./switch/switch-context.cjs');
 const switchControl = require('./switch/switch-control.cjs');
 const switchHiddenInput = require('./switch/switch-hidden-input.cjs');
@@ -491,6 +508,15 @@ const timePickerTrigger = require('./time-picker/time-picker-trigger.cjs');
 const useTimePicker = require('./time-picker/use-time-picker.cjs');
 const useTimePickerContext = require('./time-picker/use-time-picker-context.cjs');
 const timePicker = require('./time-picker/time-picker.cjs');
+const timerContext = require('./timer/timer-context.cjs');
+const timerActionTrigger = require('./timer/timer-action-trigger.cjs');
+const timerItem = require('./timer/timer-item.cjs');
+const timerSeparator = require('./timer/timer-separator.cjs');
+const timerRoot = require('./timer/timer-root.cjs');
+const timerRootProvider = require('./timer/timer-root-provider.cjs');
+const useTimer = require('./timer/use-timer.cjs');
+const useTimerContext = require('./timer/use-timer-context.cjs');
+const timer = require('./timer/timer.cjs');
 const createToaster = require('./toast/create-toaster.cjs');
 const toastActionTrigger = require('./toast/toast-action-trigger.cjs');
 const toastCloseTrigger = require('./toast/toast-close-trigger.cjs');
@@ -1007,6 +1033,23 @@ exports.SplitterRootProvider = splitterRootProvider.SplitterRootProvider;
 exports.useSplitter = useSplitter.useSplitter;
 exports.useSplitterContext = useSplitterContext.useSplitterContext;
 exports.Splitter = splitter$1;
+exports.StepsCompletedContent = stepsCompletedContent.StepsCompletedContent;
+exports.StepsContent = stepsContent.StepsContent;
+exports.StepsIndicator = stepsIndicator.StepsIndicator;
+exports.StepsItem = stepsItem.StepsItem;
+exports.StepsItemContext = stepsItemContext.StepsItemContext;
+exports.StepsList = stepsList.StepsList;
+exports.StepsNextTrigger = stepsNextTrigger.StepsNextTrigger;
+exports.StepsPrevTrigger = stepsPrevTrigger.StepsPrevTrigger;
+exports.StepsProgress = stepsProgress.StepsProgress;
+exports.StepsRoot = stepsRoot.StepsRoot;
+exports.StepsRootProvider = stepsRootProvider.StepsRootProvider;
+exports.StepsSeparator = stepsSeparator.StepsSeparator;
+exports.StepsTrigger = stepsTrigger.StepsTrigger;
+exports.useSteps = useSteps.useSteps;
+exports.useStepsContext = useStepsContext.useStepsContext;
+exports.useStepsItemContext = useStepsItemContext.useStepsItemContext;
+exports.Steps = steps;
 exports.SwitchContext = switchContext.SwitchContext;
 exports.SwitchControl = switchControl.SwitchControl;
 exports.SwitchHiddenInput = switchHiddenInput.SwitchHiddenInput;
@@ -1061,6 +1104,15 @@ exports.TimePickerTrigger = timePickerTrigger.TimePickerTrigger;
 exports.useTimePicker = useTimePicker.useTimePicker;
 exports.useTimePickerContext = useTimePickerContext.useTimePickerContext;
 exports.TimePicker = timePicker;
+exports.TimerContext = timerContext.TimerContext;
+exports.TimerActionTrigger = timerActionTrigger.TimerActionTrigger;
+exports.TimerItem = timerItem.TimerItem;
+exports.TimerSeparator = timerSeparator.TimerSeparator;
+exports.TimerRoot = timerRoot.TimerRoot;
+exports.TimerRootProvider = timerRootProvider.TimerRootProvider;
+exports.useTimer = useTimer.useTimer;
+exports.useTimerContext = useTimerContext.useTimerContext;
+exports.Timer = timer;
 exports.createToaster = createToaster.createToaster;
 exports.ToastActionTrigger = toastActionTrigger.ToastActionTrigger;
 exports.ToastCloseTrigger = toastCloseTrigger.ToastCloseTrigger;

package/dist/components/index.d.cts

@@ -32,10 +32,12 @@ export * from './select';
 export * from './signature-pad';
 export * from './slider';
 export * from './splitter';
+export * from './steps';
 export * from './switch';
 export * from './tabs';
 export * from './tags-input';
 export * from './time-picker';
+export * from './timer';
 export * from './toast';
 export * from './toggle-group';
 export * from './tooltip';

package/dist/components/index.d.ts

@@ -32,10 +32,12 @@ export * from './select';
 export * from './signature-pad';
 export * from './slider';
 export * from './splitter';
+export * from './steps';
 export * from './switch';
 export * from './tabs';
 export * from './tags-input';
 export * from './time-picker';
+export * from './timer';
 export * from './toast';
 export * from './toggle-group';
 export * from './tooltip';

package/dist/components/index.js

@@ -463,6 +463,24 @@ export { useSplitter } from './splitter/use-splitter.js';
 export { useSplitterContext } from './splitter/use-splitter-context.js';
 import * as splitter from './splitter/splitter.js';
 export { splitter as Splitter };
+export { StepsCompletedContent } from './steps/steps-completed-content.js';
+export { StepsContent } from './steps/steps-content.js';
+export { StepsIndicator } from './steps/steps-indicator.js';
+export { StepsItem } from './steps/steps-item.js';
+export { StepsItemContext } from './steps/steps-item-context.js';
+export { StepsList } from './steps/steps-list.js';
+export { StepsNextTrigger } from './steps/steps-next-trigger.js';
+export { StepsPrevTrigger } from './steps/steps-prev-trigger.js';
+export { StepsProgress } from './steps/steps-progress.js';
+export { StepsRoot } from './steps/steps-root.js';
+export { StepsRootProvider } from './steps/steps-root-provider.js';
+export { StepsSeparator } from './steps/steps-separator.js';
+export { StepsTrigger } from './steps/steps-trigger.js';
+export { useSteps } from './steps/use-steps.js';
+export { useStepsContext } from './steps/use-steps-context.js';
+export { useStepsItemContext } from './steps/use-steps-item-context.js';
+import * as steps from './steps/steps.js';
+export { steps as Steps };
 export { SwitchContext } from './switch/switch-context.js';
 export { SwitchControl } from './switch/switch-control.js';
 export { SwitchHiddenInput } from './switch/switch-hidden-input.js';
@@ -521,6 +539,16 @@ export { useTimePicker } from './time-picker/use-time-picker.js';
 export { useTimePickerContext } from './time-picker/use-time-picker-context.js';
 import * as timePicker from './time-picker/time-picker.js';
 export { timePicker as TimePicker };
+export { TimerContext } from './timer/timer-context.js';
+export { TimerActionTrigger } from './timer/timer-action-trigger.js';
+export { TimerItem } from './timer/timer-item.js';
+export { TimerSeparator } from './timer/timer-separator.js';
+export { TimerRoot } from './timer/timer-root.js';
+export { TimerRootProvider } from './timer/timer-root-provider.js';
+export { useTimer } from './timer/use-timer.js';
+export { useTimerContext } from './timer/use-timer-context.js';
+import * as timer from './timer/timer.js';
+export { timer as Timer };
 export { createToaster } from './toast/create-toaster.js';
 export { ToastActionTrigger } from './toast/toast-action-trigger.js';
 export { ToastCloseTrigger } from './toast/toast-close-trigger.js';

package/dist/components/steps/index.cjs

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const stepsContent = require('./steps-content.cjs');
 const stepsCompletedContent = require('./steps-completed-content.cjs');
+const stepsContent = require('./steps-content.cjs');
 const stepsIndicator = require('./steps-indicator.cjs');
 const stepsItem = require('./steps-item.cjs');
+const stepsItemContext = require('./steps-item-context.cjs');
 const stepsList = require('./steps-list.cjs');
 const stepsNextTrigger = require('./steps-next-trigger.cjs');
 const stepsPrevTrigger = require('./steps-prev-trigger.cjs');
@@ -16,14 +17,16 @@ const stepsSeparator = require('./steps-separator.cjs');
 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 = require('./steps.cjs');
 
 
 
-exports.StepsContent = stepsContent.StepsContent;
 exports.StepsCompletedContent = stepsCompletedContent.StepsCompletedContent;
+exports.StepsContent = stepsContent.StepsContent;
 exports.StepsIndicator = stepsIndicator.StepsIndicator;
 exports.StepsItem = stepsItem.StepsItem;
+exports.StepsItemContext = stepsItemContext.StepsItemContext;
 exports.StepsList = stepsList.StepsList;
 exports.StepsNextTrigger = stepsNextTrigger.StepsNextTrigger;
 exports.StepsPrevTrigger = stepsPrevTrigger.StepsPrevTrigger;
@@ -34,4 +37,5 @@ exports.StepsSeparator = stepsSeparator.StepsSeparator;
 exports.StepsTrigger = stepsTrigger.StepsTrigger;
 exports.useSteps = useSteps.useSteps;
 exports.useStepsContext = useStepsContext.useStepsContext;
+exports.useStepsItemContext = useStepsItemContext.useStepsItemContext;
 exports.Steps = steps;

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

@@ -1,8 +1,9 @@
 export type { StepChangeDetails } from '@zag-js/steps';
-export { StepsContent, type StepsContentBaseProps, type StepsContentProps } from './steps-content';
 export { StepsCompletedContent, type StepsCompletedContentBaseProps, type StepsCompletedContentProps, } from './steps-completed-content';
+export { StepsContent, type StepsContentBaseProps, type StepsContentProps } from './steps-content';
 export { StepsIndicator, type StepsIndicatorBaseProps, type StepsIndicatorProps, } from './steps-indicator';
 export { StepsItem, type StepsItemBaseProps, type StepsItemProps } from './steps-item';
+export { StepsItemContext, type StepsItemContextProps } from './steps-item-context';
 export { StepsList, type StepsListBaseProps, type StepsListProps } from './steps-list';
 export { StepsNextTrigger, type StepsNextTriggerBaseProps, type StepsNextTriggerProps, } from './steps-next-trigger';
 export { StepsPrevTrigger, type StepsPrevTriggerBaseProps, type StepsPrevTriggerProps, } from './steps-prev-trigger';
@@ -13,4 +14,5 @@ export { StepsSeparator, type StepsSeparatorBaseProps, type StepsSeparatorProps,
 export { StepsTrigger, type StepsTriggerBaseProps, type StepsTriggerProps } from './steps-trigger';
 export { useSteps, type UseStepsProps, type UseStepsReturn } from './use-steps';
 export { useStepsContext, type UseStepsContext } from './use-steps-context';
+export { useStepsItemContext, type UseStepsItemContext } from './use-steps-item-context';
 export * as Steps from './steps';

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

@@ -1,8 +1,9 @@
 export type { StepChangeDetails } from '@zag-js/steps';
-export { StepsContent, type StepsContentBaseProps, type StepsContentProps } from './steps-content';
 export { StepsCompletedContent, type StepsCompletedContentBaseProps, type StepsCompletedContentProps, } from './steps-completed-content';
+export { StepsContent, type StepsContentBaseProps, type StepsContentProps } from './steps-content';
 export { StepsIndicator, type StepsIndicatorBaseProps, type StepsIndicatorProps, } from './steps-indicator';
 export { StepsItem, type StepsItemBaseProps, type StepsItemProps } from './steps-item';
+export { StepsItemContext, type StepsItemContextProps } from './steps-item-context';
 export { StepsList, type StepsListBaseProps, type StepsListProps } from './steps-list';
 export { StepsNextTrigger, type StepsNextTriggerBaseProps, type StepsNextTriggerProps, } from './steps-next-trigger';
 export { StepsPrevTrigger, type StepsPrevTriggerBaseProps, type StepsPrevTriggerProps, } from './steps-prev-trigger';
@@ -13,4 +14,5 @@ export { StepsSeparator, type StepsSeparatorBaseProps, type StepsSeparatorProps,
 export { StepsTrigger, type StepsTriggerBaseProps, type StepsTriggerProps } from './steps-trigger';
 export { useSteps, type UseStepsProps, type UseStepsReturn } from './use-steps';
 export { useStepsContext, type UseStepsContext } from './use-steps-context';
+export { useStepsItemContext, type UseStepsItemContext } from './use-steps-item-context';
 export * as Steps from './steps';

package/dist/components/steps/index.js

@@ -1,7 +1,8 @@
-export { StepsContent } from './steps-content.js';
 export { StepsCompletedContent } from './steps-completed-content.js';
+export { StepsContent } from './steps-content.js';
 export { StepsIndicator } from './steps-indicator.js';
 export { StepsItem } from './steps-item.js';
+export { StepsItemContext } from './steps-item-context.js';
 export { StepsList } from './steps-list.js';
 export { StepsNextTrigger } from './steps-next-trigger.js';
 export { StepsPrevTrigger } from './steps-prev-trigger.js';
@@ -12,5 +13,6 @@ export { StepsSeparator } from './steps-separator.js';
 export { StepsTrigger } from './steps-trigger.js';
 export { useSteps } from './use-steps.js';
 export { useStepsContext } from './use-steps-context.js';
+export { useStepsItemContext } from './use-steps-item-context.js';
 import * as steps from './steps.js';
 export { steps as Steps };

package/dist/components/steps/steps-item-context.cjs

@@ -0,0 +1,13 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const useStepsItemContext = require('./use-steps-item-context.cjs');
+
+const StepsItemContext = (props) => {
+  return props.children(useStepsItemContext.useStepsItemContext());
+};
+StepsItemContext.displayName = "StepsItemContext";
+
+exports.StepsItemContext = StepsItemContext;

package/dist/components/steps/steps-item-context.d.cts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { UseStepsItemContext } from './use-steps-item-context';
+
+export interface StepsItemContextProps {
+    children: (context: UseStepsItemContext) => ReactNode;
+}
+export declare const StepsItemContext: {
+    (props: StepsItemContextProps): ReactNode;
+    displayName: string;
+};

package/dist/components/steps/steps-item-context.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { UseStepsItemContext } from './use-steps-item-context';
+
+export interface StepsItemContextProps {
+    children: (context: UseStepsItemContext) => ReactNode;
+}
+export declare const StepsItemContext: {
+    (props: StepsItemContextProps): ReactNode;
+    displayName: string;
+};

package/dist/components/steps/steps-item-context.js

@@ -0,0 +1,9 @@
+'use client';
+import { useStepsItemContext } from './use-steps-item-context.js';
+
+const StepsItemContext = (props) => {
+  return props.children(useStepsItemContext());
+};
+StepsItemContext.displayName = "StepsItemContext";
+
+export { StepsItemContext };

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

@@ -9,13 +9,15 @@ const react = require('react');
 const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useStepsContext = require('./use-steps-context.cjs');
+const useStepsItemContext = require('./use-steps-item-context.cjs');
 const useStepsItemPropsContext = require('./use-steps-item-props-context.cjs');
 
 const StepsItem = react.forwardRef((props, ref) => {
   const [itemProps, localProps] = createSplitProps.createSplitProps()(props, ["index"]);
   const steps = useStepsContext.useStepsContext();
   const mergedProps = react$1.mergeProps(steps.getItemProps(itemProps), localProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(useStepsItemPropsContext.StepsItemPropsProvider, { value: itemProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.li, { ...mergedProps, ref }) });
+  const itemState = steps.getItemState(itemProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useStepsItemPropsContext.StepsItemPropsProvider, { value: itemProps, children: /* @__PURE__ */ jsxRuntime.jsx(useStepsItemContext.StepsItemProvider, { value: itemState, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.li, { ...mergedProps, ref }) }) });
 });
 StepsItem.displayName = "StepsItem";
 

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

@@ -5,13 +5,15 @@ import { forwardRef } from 'react';
 import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { useStepsContext } from './use-steps-context.js';
+import { StepsItemProvider } from './use-steps-item-context.js';
 import { StepsItemPropsProvider } from './use-steps-item-props-context.js';
 
 const StepsItem = forwardRef((props, ref) => {
   const [itemProps, localProps] = createSplitProps()(props, ["index"]);
   const steps = useStepsContext();
   const mergedProps = mergeProps(steps.getItemProps(itemProps), localProps);
-  return /* @__PURE__ */ jsx(StepsItemPropsProvider, { value: itemProps, children: /* @__PURE__ */ jsx(ark.li, { ...mergedProps, ref }) });
+  const itemState = steps.getItemState(itemProps);
+  return /* @__PURE__ */ jsx(StepsItemPropsProvider, { value: itemProps, children: /* @__PURE__ */ jsx(StepsItemProvider, { value: itemState, children: /* @__PURE__ */ jsx(ark.li, { ...mergedProps, ref }) }) });
 });
 StepsItem.displayName = "StepsItem";
 

package/dist/components/steps/use-steps-item-context.cjs

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../../utils/create-context.cjs');
+
+const [StepsItemProvider, useStepsItemContext] = createContext.createContext({
+  name: "StepsItemContext",
+  hookName: "useStepsItemContext",
+  providerName: "<StepsItem />"
+});
+
+exports.StepsItemProvider = StepsItemProvider;
+exports.useStepsItemContext = useStepsItemContext;

package/dist/components/steps/use-steps-item-context.d.cts

@@ -1,7 +1,6 @@
-import { ItemProps } from '@zag-js/steps';
+import { ItemState } from '@zag-js/steps';
 import { Provider } from 'react';
 
-interface StepsItemContext extends ItemProps {
+export interface UseStepsItemContext extends ItemState {
 }
-export declare const StepsItemProvider: Provider<StepsItemContext>, useStepsItemContext: () => StepsItemContext;
-export {};
+export declare const StepsItemProvider: Provider<UseStepsItemContext>, useStepsItemContext: () => UseStepsItemContext;

package/dist/components/steps/use-steps-item-context.d.ts

@@ -1,7 +1,6 @@
-import { ItemProps } from '@zag-js/steps';
+import { ItemState } from '@zag-js/steps';
 import { Provider } from 'react';
 
-interface StepsItemContext extends ItemProps {
+export interface UseStepsItemContext extends ItemState {
 }
-export declare const StepsItemProvider: Provider<StepsItemContext>, useStepsItemContext: () => StepsItemContext;
-export {};
+export declare const StepsItemProvider: Provider<UseStepsItemContext>, useStepsItemContext: () => UseStepsItemContext;

package/dist/components/steps/use-steps-item-context.js

@@ -0,0 +1,10 @@
+'use client';
+import { createContext } from '../../utils/create-context.js';
+
+const [StepsItemProvider, useStepsItemContext] = createContext({
+  name: "StepsItemContext",
+  hookName: "useStepsItemContext",
+  providerName: "<StepsItem />"
+});
+
+export { StepsItemProvider, useStepsItemContext };

package/dist/components/timer/index.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const timerContext = require('./timer-context.cjs');
+const timerActionTrigger = require('./timer-action-trigger.cjs');
+const timerItem = require('./timer-item.cjs');
+const timerSeparator = require('./timer-separator.cjs');
+const timerRoot = require('./timer-root.cjs');
+const timerRootProvider = require('./timer-root-provider.cjs');
+const useTimer = require('./use-timer.cjs');
+const useTimerContext = require('./use-timer-context.cjs');
+const timer = require('./timer.cjs');
+
+
+
+exports.TimerContext = timerContext.TimerContext;
+exports.TimerActionTrigger = timerActionTrigger.TimerActionTrigger;
+exports.TimerItem = timerItem.TimerItem;
+exports.TimerSeparator = timerSeparator.TimerSeparator;
+exports.TimerRoot = timerRoot.TimerRoot;
+exports.TimerRootProvider = timerRootProvider.TimerRootProvider;
+exports.useTimer = useTimer.useTimer;
+exports.useTimerContext = useTimerContext.useTimerContext;
+exports.Timer = timer;

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

@@ -0,0 +1,9 @@
+export { TimerContext, type TimerContextProps, } from './timer-context';
+export { TimerActionTrigger, type TimerActionTriggerBaseProps, type TimerActionTriggerProps, } from './timer-action-trigger';
+export { TimerItem, type TimerItemProps, type TimerItemBaseProps, } from './timer-item';
+export { TimerSeparator, type TimerSeparatorProps, type TimerSeparatorBaseProps, } from './timer-separator';
+export { TimerRoot, type TimerRootProps, type TimerRootBaseProps, } from './timer-root';
+export { TimerRootProvider, type TimerRootProviderProps, type TimerRootProviderBaseProps, } from './timer-root-provider';
+export { useTimer, type UseTimerProps, type UseTimerReturn } from './use-timer';
+export { useTimerContext, type UseTimerContext } from './use-timer-context';
+export * as Timer from './timer';

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

@@ -0,0 +1,9 @@
+export { TimerContext, type TimerContextProps, } from './timer-context';
+export { TimerActionTrigger, type TimerActionTriggerBaseProps, type TimerActionTriggerProps, } from './timer-action-trigger';
+export { TimerItem, type TimerItemProps, type TimerItemBaseProps, } from './timer-item';
+export { TimerSeparator, type TimerSeparatorProps, type TimerSeparatorBaseProps, } from './timer-separator';
+export { TimerRoot, type TimerRootProps, type TimerRootBaseProps, } from './timer-root';
+export { TimerRootProvider, type TimerRootProviderProps, type TimerRootProviderBaseProps, } from './timer-root-provider';
+export { useTimer, type UseTimerProps, type UseTimerReturn } from './use-timer';
+export { useTimerContext, type UseTimerContext } from './use-timer-context';
+export * as Timer from './timer';

package/dist/components/timer/index.js

@@ -0,0 +1,10 @@
+export { TimerContext } from './timer-context.js';
+export { TimerActionTrigger } from './timer-action-trigger.js';
+export { TimerItem } from './timer-item.js';
+export { TimerSeparator } from './timer-separator.js';
+export { TimerRoot } from './timer-root.js';
+export { TimerRootProvider } from './timer-root-provider.js';
+export { useTimer } from './use-timer.js';
+export { useTimerContext } from './use-timer-context.js';
+import * as timer from './timer.js';
+export { timer as Timer };

package/dist/components/timer/timer-action-trigger.cjs

@@ -0,0 +1,21 @@
+'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 useTimerContext = require('./use-timer-context.cjs');
+
+const TimerActionTrigger = react.forwardRef(
+  (props, ref) => {
+    const timer = useTimerContext.useTimerContext();
+    const mergedProps = react$1.mergeProps(timer.getActionTriggerProps(props), props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+  }
+);
+TimerActionTrigger.displayName = "TimerActionTrigger";
+
+exports.TimerActionTrigger = TimerActionTrigger;

package/dist/components/timer/timer-action-trigger.d.cts

@@ -0,0 +1,9 @@
+import { ActionTriggerProps } from '@zag-js/timer';
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface TimerActionTriggerBaseProps extends ActionTriggerProps, PolymorphicProps {
+}
+export interface TimerActionTriggerProps extends HTMLProps<'button'>, TimerActionTriggerBaseProps {
+}
+export declare const TimerActionTrigger: ForwardRefExoticComponent<TimerActionTriggerProps & RefAttributes<HTMLButtonElement>>;