@ark-ui/react 3.6.2 → 3.7.0

package/dist/components/steps/steps.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const stepsContent = require('./steps-content.cjs');
+const stepsCompletedContent = require('./steps-completed-content.cjs');
+const stepsIndicator = require('./steps-indicator.cjs');
+const stepsItem = require('./steps-item.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');
+
+
+
+exports.Content = stepsContent.StepsContent;
+exports.CompletedContent = stepsCompletedContent.StepsCompletedContent;
+exports.Indicator = stepsIndicator.StepsIndicator;
+exports.Item = stepsItem.StepsItem;
+exports.List = stepsList.StepsList;
+exports.NextTrigger = stepsNextTrigger.StepsNextTrigger;
+exports.PrevTrigger = stepsPrevTrigger.StepsPrevTrigger;
+exports.Progress = stepsProgress.StepsProgress;
+exports.Root = stepsRoot.StepsRoot;
+exports.RootProvider = stepsRootProvider.StepsRootProvider;
+exports.Separator = stepsSeparator.StepsSeparator;
+exports.Trigger = stepsTrigger.StepsTrigger;

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

@@ -0,0 +1,13 @@
+export type { StepChangeDetails as ChangeDetails } from '@zag-js/steps';
+export { StepsContent as Content, type StepsContentBaseProps as ContentBaseProps, type StepsContentProps as ContentProps, } from './steps-content';
+export { StepsCompletedContent as CompletedContent, type StepsCompletedContentBaseProps as CompletedContentBaseProps, type StepsCompletedContentProps as CompletedContentProps, } from './steps-completed-content';
+export { StepsIndicator as Indicator, type StepsIndicatorBaseProps as IndicatorBaseProps, type StepsIndicatorProps as IndicatorProps, } from './steps-indicator';
+export { StepsItem as Item, type StepsItemBaseProps as ItemBaseProps, type StepsItemProps as ItemProps, } from './steps-item';
+export { StepsList as List, type StepsListBaseProps as ListBaseProps, type StepsListProps as ListProps, } from './steps-list';
+export { StepsNextTrigger as NextTrigger, type StepsNextTriggerBaseProps as NextTriggerBaseProps, type StepsNextTriggerProps as NextTriggerProps, } from './steps-next-trigger';
+export { StepsPrevTrigger as PrevTrigger, type StepsPrevTriggerBaseProps as PrevTriggerBaseProps, type StepsPrevTriggerProps as PrevTriggerProps, } from './steps-prev-trigger';
+export { StepsProgress as Progress, type StepsProgressBaseProps as ProgressBaseProps, type StepsProgressProps as ProgressProps, } from './steps-progress';
+export { StepsRoot as Root, type StepsRootBaseProps as RootBaseProps, type StepsRootProps as RootProps, } from './steps-root';
+export { StepsRootProvider as RootProvider, type StepsRootProviderBaseProps as RootProviderBaseProps, type StepsRootProviderProps as RootProviderProps, } from './steps-root-provider';
+export { StepsSeparator as Separator, type StepsSeparatorBaseProps as SeparatorBaseProps, type StepsSeparatorProps as SeparatorProps, } from './steps-separator';
+export { StepsTrigger as Trigger, type StepsTriggerBaseProps as TriggerBaseProps, type StepsTriggerProps as TriggerProps, } from './steps-trigger';

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

@@ -0,0 +1,13 @@
+export type { StepChangeDetails as ChangeDetails } from '@zag-js/steps';
+export { StepsContent as Content, type StepsContentBaseProps as ContentBaseProps, type StepsContentProps as ContentProps, } from './steps-content';
+export { StepsCompletedContent as CompletedContent, type StepsCompletedContentBaseProps as CompletedContentBaseProps, type StepsCompletedContentProps as CompletedContentProps, } from './steps-completed-content';
+export { StepsIndicator as Indicator, type StepsIndicatorBaseProps as IndicatorBaseProps, type StepsIndicatorProps as IndicatorProps, } from './steps-indicator';
+export { StepsItem as Item, type StepsItemBaseProps as ItemBaseProps, type StepsItemProps as ItemProps, } from './steps-item';
+export { StepsList as List, type StepsListBaseProps as ListBaseProps, type StepsListProps as ListProps, } from './steps-list';
+export { StepsNextTrigger as NextTrigger, type StepsNextTriggerBaseProps as NextTriggerBaseProps, type StepsNextTriggerProps as NextTriggerProps, } from './steps-next-trigger';
+export { StepsPrevTrigger as PrevTrigger, type StepsPrevTriggerBaseProps as PrevTriggerBaseProps, type StepsPrevTriggerProps as PrevTriggerProps, } from './steps-prev-trigger';
+export { StepsProgress as Progress, type StepsProgressBaseProps as ProgressBaseProps, type StepsProgressProps as ProgressProps, } from './steps-progress';
+export { StepsRoot as Root, type StepsRootBaseProps as RootBaseProps, type StepsRootProps as RootProps, } from './steps-root';
+export { StepsRootProvider as RootProvider, type StepsRootProviderBaseProps as RootProviderBaseProps, type StepsRootProviderProps as RootProviderProps, } from './steps-root-provider';
+export { StepsSeparator as Separator, type StepsSeparatorBaseProps as SeparatorBaseProps, type StepsSeparatorProps as SeparatorProps, } from './steps-separator';
+export { StepsTrigger as Trigger, type StepsTriggerBaseProps as TriggerBaseProps, type StepsTriggerProps as TriggerProps, } from './steps-trigger';

package/dist/components/steps/steps.js

@@ -0,0 +1,12 @@
+export { StepsContent as Content } from './steps-content.js';
+export { StepsCompletedContent as CompletedContent } from './steps-completed-content.js';
+export { StepsIndicator as Indicator } from './steps-indicator.js';
+export { StepsItem as Item } from './steps-item.js';
+export { StepsList as List } from './steps-list.js';
+export { StepsNextTrigger as NextTrigger } from './steps-next-trigger.js';
+export { StepsPrevTrigger as PrevTrigger } from './steps-prev-trigger.js';
+export { StepsProgress as Progress } from './steps-progress.js';
+export { StepsRoot as Root } from './steps-root.js';
+export { StepsRootProvider as RootProvider } from './steps-root-provider.js';
+export { StepsSeparator as Separator } from './steps-separator.js';
+export { StepsTrigger as Trigger } from './steps-trigger.js';

package/dist/components/steps/use-steps-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 [StepsProvider, useStepsContext] = createContext.createContext({
+  name: "StepsContext",
+  hookName: "useStepsContext",
+  providerName: "<StepsProvider />"
+});
+
+exports.StepsProvider = StepsProvider;
+exports.useStepsContext = useStepsContext;

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

@@ -0,0 +1,6 @@
+import { UseStepsReturn } from './use-steps';
+import { Provider } from 'react';
+
+export interface UseStepsContext extends UseStepsReturn {
+}
+export declare const StepsProvider: Provider<UseStepsContext>, useStepsContext: () => UseStepsContext;

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

@@ -0,0 +1,6 @@
+import { UseStepsReturn } from './use-steps';
+import { Provider } from 'react';
+
+export interface UseStepsContext extends UseStepsReturn {
+}
+export declare const StepsProvider: Provider<UseStepsContext>, useStepsContext: () => UseStepsContext;

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

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

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

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

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

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

package/dist/components/steps/use-steps-item-props-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 [StepsItemPropsProvider, useStepsItemPropsContext] = createContext.createContext({
+  name: "StepsItemPropsContext",
+  hookName: "useStepsItemPropsContext",
+  providerName: "<StepsItemPropsProvider />"
+});
+
+exports.StepsItemPropsProvider = StepsItemPropsProvider;
+exports.useStepsItemPropsContext = useStepsItemPropsContext;

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

@@ -0,0 +1,6 @@
+import { ItemProps } from '@zag-js/steps';
+import { Provider } from 'react';
+
+export interface UseStepsItemPropsContext extends ItemProps {
+}
+export declare const StepsItemPropsProvider: Provider<UseStepsItemPropsContext>, useStepsItemPropsContext: () => UseStepsItemPropsContext;

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

@@ -0,0 +1,6 @@
+import { ItemProps } from '@zag-js/steps';
+import { Provider } from 'react';
+
+export interface UseStepsItemPropsContext extends ItemProps {
+}
+export declare const StepsItemPropsProvider: Provider<UseStepsItemPropsContext>, useStepsItemPropsContext: () => UseStepsItemPropsContext;

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

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

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

@@ -0,0 +1,54 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react$1 = require('@zag-js/react');
+const steps = require('@zag-js/steps');
+const react = require('react');
+const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
+const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
+const useEvent = require('../../utils/use-event.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const steps__namespace = /*#__PURE__*/_interopNamespaceDefault(steps);
+
+function useSteps(props = {}) {
+  const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
+  const { dir } = useLocaleContext.useLocaleContext();
+  const initialContext = {
+    id: react.useId(),
+    dir,
+    getRootNode,
+    step: props.defaultStep,
+    ...props
+  };
+  const context = {
+    ...initialContext,
+    step: props.step,
+    onStepChange: useEvent.useEvent(props.onStepChange),
+    onStepComplete: useEvent.useEvent(props.onStepComplete)
+  };
+  const [state, send] = react$1.useMachine(steps__namespace.machine(initialContext), {
+    context
+  });
+  return steps__namespace.connect(state, send, react$1.normalizeProps);
+}
+
+exports.useSteps = useSteps;

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

@@ -0,0 +1,13 @@
+import { PropTypes } from '@zag-js/react';
+import { Optional } from '../../types';
+
+import * as steps from '@zag-js/steps';
+export interface UseStepsProps extends Optional<Omit<steps.Context, 'dir' | 'getRootNode'>, 'id'> {
+    /**
+     * The initial value of the step
+     */
+    defaultStep?: number;
+}
+export interface UseStepsReturn extends steps.Api<PropTypes> {
+}
+export declare function useSteps(props?: UseStepsProps): UseStepsReturn;

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

@@ -0,0 +1,13 @@
+import { PropTypes } from '@zag-js/react';
+import { Optional } from '../../types';
+
+import * as steps from '@zag-js/steps';
+export interface UseStepsProps extends Optional<Omit<steps.Context, 'dir' | 'getRootNode'>, 'id'> {
+    /**
+     * The initial value of the step
+     */
+    defaultStep?: number;
+}
+export interface UseStepsReturn extends steps.Api<PropTypes> {
+}
+export declare function useSteps(props?: UseStepsProps): UseStepsReturn;

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

@@ -0,0 +1,31 @@
+'use client';
+import { useMachine, normalizeProps } from '@zag-js/react';
+import * as steps from '@zag-js/steps';
+import { useId } from 'react';
+import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
+import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
+import { useEvent } from '../../utils/use-event.js';
+
+function useSteps(props = {}) {
+  const { getRootNode } = useEnvironmentContext();
+  const { dir } = useLocaleContext();
+  const initialContext = {
+    id: useId(),
+    dir,
+    getRootNode,
+    step: props.defaultStep,
+    ...props
+  };
+  const context = {
+    ...initialContext,
+    step: props.step,
+    onStepChange: useEvent(props.onStepChange),
+    onStepComplete: useEvent(props.onStepComplete)
+  };
+  const [state, send] = useMachine(steps.machine(initialContext), {
+    context
+  });
+  return steps.connect(state, send, normalizeProps);
+}
+
+export { useSteps };

package/dist/utils/use-safe-layout-effect.cjs

@@ -0,0 +1,10 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+
+const useSafeLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
+
+exports.useSafeLayoutEffect = useSafeLayoutEffect;

package/dist/utils/use-safe-layout-effect.d.cts

@@ -0,0 +1,3 @@
+import { useLayoutEffect } from 'react';
+
+export declare const useSafeLayoutEffect: typeof useLayoutEffect;

package/dist/utils/use-safe-layout-effect.d.ts

@@ -0,0 +1,3 @@
+import { useLayoutEffect } from 'react';
+
+export declare const useSafeLayoutEffect: typeof useLayoutEffect;

package/dist/utils/use-safe-layout-effect.js

@@ -0,0 +1,6 @@
+'use client';
+import { useLayoutEffect, useEffect } from 'react';
+
+const useSafeLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+export { useSafeLayoutEffect };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "3.6.2",
+  "version": "3.7.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -444,6 +444,17 @@
         "default": "./dist/components/splitter/index.cjs"
       }
     },
+    "./steps": {
+      "source": "./src/components/steps/index.ts",
+      "import": {
+        "types": "./dist/components/steps/index.d.ts",
+        "default": "./dist/components/steps/index.js"
+      },
+      "require": {
+        "types": "./dist/components/steps/index.d.cts",
+        "default": "./dist/components/steps/index.cjs"
+      }
+    },
     "./switch": {
       "source": "./src/components/switch/index.ts",
       "import": {
@@ -570,58 +581,59 @@
   "sideEffects": false,
   "dependencies": {
     "@internationalized/date": "3.5.5",
-    "@zag-js/accordion": "0.63.0",
-    "@zag-js/anatomy": "0.63.0",
-    "@zag-js/avatar": "0.63.0",
-    "@zag-js/carousel": "0.63.0",
-    "@zag-js/checkbox": "0.63.0",
-    "@zag-js/clipboard": "0.63.0",
-    "@zag-js/collapsible": "0.63.0",
-    "@zag-js/color-picker": "0.63.0",
-    "@zag-js/color-utils": "0.63.0",
-    "@zag-js/combobox": "0.63.0",
-    "@zag-js/core": "0.63.0",
-    "@zag-js/date-picker": "0.63.0",
-    "@zag-js/date-utils": "0.63.0",
-    "@zag-js/dialog": "0.63.0",
-    "@zag-js/dom-query": "0.63.0",
-    "@zag-js/editable": "0.63.0",
-    "@zag-js/file-upload": "0.63.0",
-    "@zag-js/file-utils": "0.63.0",
-    "@zag-js/hover-card": "0.63.0",
-    "@zag-js/i18n-utils": "0.63.0",
-    "@zag-js/menu": "0.63.0",
-    "@zag-js/number-input": "0.63.0",
-    "@zag-js/pagination": "0.63.0",
-    "@zag-js/pin-input": "0.63.0",
-    "@zag-js/popover": "0.63.0",
-    "@zag-js/presence": "0.63.0",
-    "@zag-js/progress": "0.63.0",
-    "@zag-js/qr-code": "0.63.0",
-    "@zag-js/radio-group": "0.63.0",
-    "@zag-js/rating-group": "0.63.0",
-    "@zag-js/react": "0.63.0",
-    "@zag-js/select": "0.63.0",
-    "@zag-js/signature-pad": "0.63.0",
-    "@zag-js/slider": "0.63.0",
-    "@zag-js/splitter": "0.63.0",
-    "@zag-js/switch": "0.63.0",
-    "@zag-js/tabs": "0.63.0",
-    "@zag-js/tags-input": "0.63.0",
-    "@zag-js/time-picker": "0.63.0",
-    "@zag-js/toast": "0.63.0",
-    "@zag-js/toggle-group": "0.63.0",
-    "@zag-js/tooltip": "0.63.0",
-    "@zag-js/tree-view": "0.63.0",
-    "@zag-js/types": "0.63.0"
+    "@zag-js/accordion": "0.64.0",
+    "@zag-js/anatomy": "0.64.0",
+    "@zag-js/avatar": "0.64.0",
+    "@zag-js/carousel": "0.64.0",
+    "@zag-js/checkbox": "0.64.0",
+    "@zag-js/clipboard": "0.64.0",
+    "@zag-js/collapsible": "0.64.0",
+    "@zag-js/color-picker": "0.64.0",
+    "@zag-js/color-utils": "0.64.0",
+    "@zag-js/combobox": "0.64.0",
+    "@zag-js/core": "0.64.0",
+    "@zag-js/date-picker": "0.64.0",
+    "@zag-js/date-utils": "0.64.0",
+    "@zag-js/dialog": "0.64.0",
+    "@zag-js/dom-query": "0.64.0",
+    "@zag-js/editable": "0.64.0",
+    "@zag-js/file-upload": "0.64.0",
+    "@zag-js/file-utils": "0.64.0",
+    "@zag-js/hover-card": "0.64.0",
+    "@zag-js/i18n-utils": "0.64.0",
+    "@zag-js/menu": "0.64.0",
+    "@zag-js/number-input": "0.64.0",
+    "@zag-js/pagination": "0.64.0",
+    "@zag-js/pin-input": "0.64.0",
+    "@zag-js/popover": "0.64.0",
+    "@zag-js/presence": "0.64.0",
+    "@zag-js/progress": "0.64.0",
+    "@zag-js/qr-code": "0.64.0",
+    "@zag-js/radio-group": "0.64.0",
+    "@zag-js/rating-group": "0.64.0",
+    "@zag-js/react": "0.64.0",
+    "@zag-js/select": "0.64.0",
+    "@zag-js/signature-pad": "0.64.0",
+    "@zag-js/slider": "0.64.0",
+    "@zag-js/splitter": "0.64.0",
+    "@zag-js/steps": "0.64.0",
+    "@zag-js/switch": "0.64.0",
+    "@zag-js/tabs": "0.64.0",
+    "@zag-js/tags-input": "0.64.0",
+    "@zag-js/time-picker": "0.64.0",
+    "@zag-js/toast": "0.64.0",
+    "@zag-js/toggle-group": "0.64.0",
+    "@zag-js/tooltip": "0.64.0",
+    "@zag-js/tree-view": "0.64.0",
+    "@zag-js/types": "0.64.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",
     "@release-it/keep-a-changelog": "5.0.0",
-    "@storybook/addon-a11y": "8.2.6",
-    "@storybook/addon-essentials": "8.2.6",
-    "@storybook/react-vite": "8.2.6",
-    "@storybook/react": "8.2.6",
+    "@storybook/addon-a11y": "8.2.8",
+    "@storybook/addon-essentials": "8.2.8",
+    "@storybook/react-vite": "8.2.8",
+    "@storybook/react": "8.2.8",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.4.8",
     "@testing-library/react": "16.0.0",
@@ -632,16 +644,16 @@
     "@vitejs/plugin-react": "4.3.1",
     "globby": "14.0.2",
     "jsdom": "24.1.1",
-    "lucide-react": "0.417.0",
+    "lucide-react": "0.427.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-frame-component": "5.2.7",
-    "react-hook-form": "7.52.1",
+    "react-hook-form": "7.52.2",
     "release-it": "17.6.0",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "8.2.6",
+    "storybook": "8.2.8",
     "typescript": "5.5.4",
-    "vite": "5.3.5",
+    "vite": "5.4.0",
     "vite-plugin-dts": "3.9.1",
     "vitest": "2.0.4",
     "vitest-axe": "1.0.0-pre.3"