@ark-ui/react 3.6.2 → 3.8.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/field/field-root.cjs

@@ -15,6 +15,7 @@ const useFieldContext = require('./use-field-context.cjs');
 const FieldRoot = react.forwardRef((props, ref) => {
   const [useFieldProps, localProps] = createSplitProps.createSplitProps()(props, [
     "id",
+    "ids",
     "disabled",
     "invalid",
     "readOnly",

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

@@ -11,6 +11,7 @@ import { FieldProvider } from './use-field-context.js';
 const FieldRoot = forwardRef((props, ref) => {
   const [useFieldProps, localProps] = createSplitProps()(props, [
     "id",
+    "ids",
     "disabled",
     "invalid",
     "readOnly",

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

@@ -5,12 +5,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const domQuery = require('@zag-js/dom-query');
 const react = require('react');
+const useSafeLayoutEffect = require('../../utils/use-safe-layout-effect.cjs');
 const useFieldsetContext = require('../fieldset/use-fieldset-context.cjs');
 const field_anatomy = require('./field.anatomy.cjs');
 
 const useField = (props) => {
   const fieldset = useFieldsetContext.useFieldsetContext();
   const {
+    ids,
     disabled = Boolean(fieldset?.disabled),
     invalid = false,
     readOnly = false,
@@ -20,10 +22,11 @@ const useField = (props) => {
   const hasHelperText = react.useRef(false);
   const id = props.id ?? react.useId();
   const rootRef = react.useRef(null);
-  const errorTextId = `field::${id}::error-text`;
-  const helperTextId = `field::${id}::helper-text`;
-  const labelId = `field::${id}::label`;
-  react.useLayoutEffect(() => {
+  const rootId = ids?.control ?? `field::${id}`;
+  const errorTextId = ids?.errorText ?? `field::${id}::error-text`;
+  const helperTextId = ids?.helperText ?? `field::${id}::helper-text`;
+  const labelId = ids?.label ?? `field::${id}::label`;
+  useSafeLayoutEffect.useSafeLayoutEffect(() => {
     const rootNode = rootRef.current;
     if (!rootNode) return;
     const win = domQuery.getWindow(rootNode);
@@ -38,29 +41,30 @@ const useField = (props) => {
     return () => observer.disconnect();
   }, [errorTextId, helperTextId]);
   const labelIds = react.useMemo(() => {
-    const ids = [];
-    if (hasErrorText.current && invalid) ids.push(errorTextId);
-    if (hasHelperText.current) ids.push(helperTextId);
-    return ids.join(" ") || void 0;
+    const ids2 = [];
+    if (hasErrorText.current && invalid) ids2.push(errorTextId);
+    if (hasHelperText.current) ids2.push(helperTextId);
+    return ids2.join(" ") || void 0;
   }, [invalid, errorTextId, helperTextId]);
   const getRootProps = react.useMemo(
     () => () => ({
       ...field_anatomy.parts.root.attrs,
+      id: rootId,
       ref: rootRef,
       role: "group",
-      "data-disabled": dataAttr(disabled),
-      "data-invalid": dataAttr(invalid),
-      "data-readonly": dataAttr(readOnly)
+      "data-disabled": domQuery.dataAttr(disabled),
+      "data-invalid": domQuery.dataAttr(invalid),
+      "data-readonly": domQuery.dataAttr(readOnly)
     }),
-    [disabled, invalid, readOnly]
+    [disabled, invalid, readOnly, rootId]
   );
   const getLabelProps = react.useMemo(
     () => () => ({
       ...field_anatomy.parts.label.attrs,
       id: labelId,
-      "data-disabled": dataAttr(disabled),
-      "data-invalid": dataAttr(invalid),
-      "data-readonly": dataAttr(readOnly),
+      "data-disabled": domQuery.dataAttr(disabled),
+      "data-invalid": domQuery.dataAttr(invalid),
+      "data-readonly": domQuery.dataAttr(readOnly),
       htmlFor: id
     }),
     [disabled, invalid, readOnly, id, labelId]
@@ -68,9 +72,10 @@ const useField = (props) => {
   const getControlProps = react.useMemo(
     () => () => ({
       "aria-describedby": labelIds,
-      "aria-invalid": ariaAttr(invalid),
-      "aria-required": ariaAttr(required),
-      "aria-readonly": ariaAttr(readOnly),
+      "aria-invalid": domQuery.ariaAttr(invalid),
+      "data-invalid": domQuery.dataAttr(invalid),
+      "data-required": domQuery.dataAttr(required),
+      "data-readonly": domQuery.dataAttr(readOnly),
       id,
       required,
       disabled,
@@ -117,6 +122,7 @@ const useField = (props) => {
   return {
     ariaDescribedby: labelIds,
     ids: {
+      root: rootId,
       control: id,
       label: labelId,
       errorText: errorTextId,
@@ -138,7 +144,5 @@ const useField = (props) => {
     getErrorTextProps
   };
 };
-const dataAttr = (condition) => condition ? "true" : void 0;
-const ariaAttr = (condition) => condition ? true : void 0;
 
 exports.useField = useField;

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

@@ -1,8 +1,22 @@
 import { HTMLProps } from '../factory';
 import { RefObject } from 'react';
 
+export interface ElementIds {
+    root?: string;
+    control?: string;
+    label?: string;
+    errorText?: string;
+    helperText?: string;
+}
 export interface UseFieldProps {
+    /**
+     * The id of the field.
+     */
     id?: string;
+    /**
+     * The ids of the field parts.
+     */
+    ids?: ElementIds;
     /**
      * Indicates whether the field is required.
      */
@@ -24,6 +38,7 @@ export type UseFieldReturn = ReturnType<typeof useField>;
 export declare const useField: (props: UseFieldProps) => {
     ariaDescribedby: string | undefined;
     ids: {
+        root: string;
         control: string;
         label: string;
         errorText: string;

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

@@ -1,8 +1,22 @@
 import { HTMLProps } from '../factory';
 import { RefObject } from 'react';
 
+export interface ElementIds {
+    root?: string;
+    control?: string;
+    label?: string;
+    errorText?: string;
+    helperText?: string;
+}
 export interface UseFieldProps {
+    /**
+     * The id of the field.
+     */
     id?: string;
+    /**
+     * The ids of the field parts.
+     */
+    ids?: ElementIds;
     /**
      * Indicates whether the field is required.
      */
@@ -24,6 +38,7 @@ export type UseFieldReturn = ReturnType<typeof useField>;
 export declare const useField: (props: UseFieldProps) => {
     ariaDescribedby: string | undefined;
     ids: {
+        root: string;
         control: string;
         label: string;
         errorText: string;

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

@@ -1,12 +1,14 @@
 'use client';
-import { getWindow } from '@zag-js/dom-query';
-import { useRef, useId, useLayoutEffect, useMemo } from 'react';
+import { getWindow, dataAttr, ariaAttr } from '@zag-js/dom-query';
+import { useRef, useId, useMemo } from 'react';
+import { useSafeLayoutEffect } from '../../utils/use-safe-layout-effect.js';
 import { useFieldsetContext } from '../fieldset/use-fieldset-context.js';
 import { parts } from './field.anatomy.js';
 
 const useField = (props) => {
   const fieldset = useFieldsetContext();
   const {
+    ids,
     disabled = Boolean(fieldset?.disabled),
     invalid = false,
     readOnly = false,
@@ -16,10 +18,11 @@ const useField = (props) => {
   const hasHelperText = useRef(false);
   const id = props.id ?? useId();
   const rootRef = useRef(null);
-  const errorTextId = `field::${id}::error-text`;
-  const helperTextId = `field::${id}::helper-text`;
-  const labelId = `field::${id}::label`;
-  useLayoutEffect(() => {
+  const rootId = ids?.control ?? `field::${id}`;
+  const errorTextId = ids?.errorText ?? `field::${id}::error-text`;
+  const helperTextId = ids?.helperText ?? `field::${id}::helper-text`;
+  const labelId = ids?.label ?? `field::${id}::label`;
+  useSafeLayoutEffect(() => {
     const rootNode = rootRef.current;
     if (!rootNode) return;
     const win = getWindow(rootNode);
@@ -34,21 +37,22 @@ const useField = (props) => {
     return () => observer.disconnect();
   }, [errorTextId, helperTextId]);
   const labelIds = useMemo(() => {
-    const ids = [];
-    if (hasErrorText.current && invalid) ids.push(errorTextId);
-    if (hasHelperText.current) ids.push(helperTextId);
-    return ids.join(" ") || void 0;
+    const ids2 = [];
+    if (hasErrorText.current && invalid) ids2.push(errorTextId);
+    if (hasHelperText.current) ids2.push(helperTextId);
+    return ids2.join(" ") || void 0;
   }, [invalid, errorTextId, helperTextId]);
   const getRootProps = useMemo(
     () => () => ({
       ...parts.root.attrs,
+      id: rootId,
       ref: rootRef,
       role: "group",
       "data-disabled": dataAttr(disabled),
       "data-invalid": dataAttr(invalid),
       "data-readonly": dataAttr(readOnly)
     }),
-    [disabled, invalid, readOnly]
+    [disabled, invalid, readOnly, rootId]
   );
   const getLabelProps = useMemo(
     () => () => ({
@@ -65,8 +69,9 @@ const useField = (props) => {
     () => () => ({
       "aria-describedby": labelIds,
       "aria-invalid": ariaAttr(invalid),
-      "aria-required": ariaAttr(required),
-      "aria-readonly": ariaAttr(readOnly),
+      "data-invalid": dataAttr(invalid),
+      "data-required": dataAttr(required),
+      "data-readonly": dataAttr(readOnly),
       id,
       required,
       disabled,
@@ -113,6 +118,7 @@ const useField = (props) => {
   return {
     ariaDescribedby: labelIds,
     ids: {
+      root: rootId,
       control: id,
       label: labelId,
       errorText: errorTextId,
@@ -134,7 +140,5 @@ const useField = (props) => {
     getErrorTextProps
   };
 };
-const dataAttr = (condition) => condition ? "true" : void 0;
-const ariaAttr = (condition) => condition ? true : void 0;
 
 export { useField };

package/dist/components/index.cjs

@@ -491,6 +491,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');
@@ -1061,6 +1070,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

@@ -36,6 +36,7 @@ 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

@@ -36,6 +36,7 @@ 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

@@ -521,6 +521,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/progress/progress-value-text.cjs

@@ -14,7 +14,7 @@ const ProgressValueText = react.forwardRef(
     const { children, ...rest } = props;
     const progress = useProgressContext.useProgressContext();
     const mergedProps = react$1.mergeProps(progress.getValueTextProps(), rest);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: children || progress.valueAsString });
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: children || progress.percentAsString });
   }
 );
 ProgressValueText.displayName = "ProgressValueText";

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

@@ -10,7 +10,7 @@ const ProgressValueText = forwardRef(
     const { children, ...rest } = props;
     const progress = useProgressContext();
     const mergedProps = mergeProps(progress.getValueTextProps(), rest);
-    return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: children || progress.valueAsString });
+    return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: children || progress.percentAsString });
   }
 );
 ProgressValueText.displayName = "ProgressValueText";

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

@@ -42,8 +42,8 @@ const useSelect = (props) => {
     () => select__namespace.collection(collectionOptions),
     Object.values(collectionOptions)
   );
-  const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
-  const { dir } = useLocaleContext.useLocaleContext();
+  const locale = useLocaleContext.useLocaleContext();
+  const environment = useEnvironmentContext.useEnvironmentContext();
   const field = useFieldContext.useFieldContext();
   const initialContext = {
     id: react.useId(),
@@ -55,26 +55,32 @@ const useSelect = (props) => {
     readOnly: field?.readOnly,
     invalid: field?.invalid,
     required: field?.required,
-    dir,
-    getRootNode,
+    dir: locale.dir,
+    getRootNode: environment.getRootNode,
     collection,
     open: props.defaultOpen,
     value: props.defaultValue,
     "open.controlled": props.open !== void 0,
     ...selectProps
   };
-  const context = {
-    ...initialContext,
-    collection,
-    value: props.value,
-    onValueChange: useEvent.useEvent(props.onValueChange, { sync: true }),
-    onHighlightChange: useEvent.useEvent(props.onHighlightChange),
-    onOpenChange: useEvent.useEvent(props.onOpenChange)
-  };
+  const context = (() => {
+    const { collection: _, ...restProps } = initialContext;
+    return {
+      ...restProps,
+      value: props.value,
+      onValueChange: useEvent.useEvent(props.onValueChange, { sync: true }),
+      onHighlightChange: useEvent.useEvent(props.onHighlightChange),
+      onOpenChange: useEvent.useEvent(props.onOpenChange)
+    };
+  })();
   const [state, send] = react$1.useMachine(select__namespace.machine(initialContext), {
     context
   });
-  return select__namespace.connect(state, send, react$1.normalizeProps);
+  const api = select__namespace.connect(state, send, react$1.normalizeProps);
+  react.useEffect(() => {
+    api.setCollection(collection);
+  }, [collection]);
+  return api;
 };
 
 exports.useSelect = useSelect;

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

@@ -1,7 +1,7 @@
 'use client';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import * as select from '@zag-js/select';
-import { useMemo, useId } from 'react';
+import { useMemo, useId, useEffect } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
 import { createSplitProps } from '../../utils/create-split-props.js';
@@ -19,8 +19,8 @@ const useSelect = (props) => {
     () => select.collection(collectionOptions),
     Object.values(collectionOptions)
   );
-  const { getRootNode } = useEnvironmentContext();
-  const { dir } = useLocaleContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const field = useFieldContext();
   const initialContext = {
     id: useId(),
@@ -32,26 +32,32 @@ const useSelect = (props) => {
     readOnly: field?.readOnly,
     invalid: field?.invalid,
     required: field?.required,
-    dir,
-    getRootNode,
+    dir: locale.dir,
+    getRootNode: environment.getRootNode,
     collection,
     open: props.defaultOpen,
     value: props.defaultValue,
     "open.controlled": props.open !== void 0,
     ...selectProps
   };
-  const context = {
-    ...initialContext,
-    collection,
-    value: props.value,
-    onValueChange: useEvent(props.onValueChange, { sync: true }),
-    onHighlightChange: useEvent(props.onHighlightChange),
-    onOpenChange: useEvent(props.onOpenChange)
-  };
+  const context = (() => {
+    const { collection: _, ...restProps } = initialContext;
+    return {
+      ...restProps,
+      value: props.value,
+      onValueChange: useEvent(props.onValueChange, { sync: true }),
+      onHighlightChange: useEvent(props.onHighlightChange),
+      onOpenChange: useEvent(props.onOpenChange)
+    };
+  })();
   const [state, send] = useMachine(select.machine(initialContext), {
     context
   });
-  return select.connect(state, send, normalizeProps);
+  const api = select.connect(state, send, normalizeProps);
+  useEffect(() => {
+    api.setCollection(collection);
+  }, [collection]);
+  return api;
 };
 
 export { useSelect };

package/dist/components/steps/index.cjs

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+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');
+const stepsProgress = require('./steps-progress.cjs');
+const stepsRoot = require('./steps-root.cjs');
+const stepsRootProvider = require('./steps-root-provider.cjs');
+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.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;

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

@@ -0,0 +1,18 @@
+export type { StepChangeDetails } from '@zag-js/steps';
+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';
+export { StepsProgress, type StepsProgressBaseProps, type StepsProgressProps, } from './steps-progress';
+export { StepsRoot, type StepsRootBaseProps, type StepsRootProps } from './steps-root';
+export { StepsRootProvider, type StepsRootProviderBaseProps, type StepsRootProviderProps, } from './steps-root-provider';
+export { StepsSeparator, type StepsSeparatorBaseProps, type StepsSeparatorProps, } from './steps-separator';
+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

@@ -0,0 +1,18 @@
+export type { StepChangeDetails } from '@zag-js/steps';
+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';
+export { StepsProgress, type StepsProgressBaseProps, type StepsProgressProps, } from './steps-progress';
+export { StepsRoot, type StepsRootBaseProps, type StepsRootProps } from './steps-root';
+export { StepsRootProvider, type StepsRootProviderBaseProps, type StepsRootProviderProps, } from './steps-root-provider';
+export { StepsSeparator, type StepsSeparatorBaseProps, type StepsSeparatorProps, } from './steps-separator';
+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

@@ -0,0 +1,18 @@
+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';
+export { StepsProgress } from './steps-progress.js';
+export { StepsRoot } from './steps-root.js';
+export { StepsRootProvider } from './steps-root-provider.js';
+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-completed-content.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 useStepsContext = require('./use-steps-context.cjs');
+
+const StepsCompletedContent = react.forwardRef(
+  (props, ref) => {
+    const steps = useStepsContext.useStepsContext();
+    const mergedProps = react$1.mergeProps(steps.getContentProps({ index: steps.count }), props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  }
+);
+StepsCompletedContent.displayName = "StepsCompletedContent";
+
+exports.StepsCompletedContent = StepsCompletedContent;

package/dist/components/steps/steps-completed-content.d.cts

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface StepsCompletedContentBaseProps extends PolymorphicProps {
+}
+export interface StepsCompletedContentProps extends HTMLProps<'div'>, StepsCompletedContentBaseProps {
+}
+export declare const StepsCompletedContent: ForwardRefExoticComponent<StepsCompletedContentProps & RefAttributes<HTMLDivElement>>;

package/dist/components/steps/steps-completed-content.d.ts

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface StepsCompletedContentBaseProps extends PolymorphicProps {
+}
+export interface StepsCompletedContentProps extends HTMLProps<'div'>, StepsCompletedContentBaseProps {
+}
+export declare const StepsCompletedContent: ForwardRefExoticComponent<StepsCompletedContentProps & RefAttributes<HTMLDivElement>>;

package/dist/components/steps/steps-completed-content.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { useStepsContext } from './use-steps-context.js';
+
+const StepsCompletedContent = forwardRef(
+  (props, ref) => {
+    const steps = useStepsContext();
+    const mergedProps = mergeProps(steps.getContentProps({ index: steps.count }), props);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  }
+);
+StepsCompletedContent.displayName = "StepsCompletedContent";
+
+export { StepsCompletedContent };