@ark-ui/react 3.8.0 → 3.9.0

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');
@@ -1016,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;

package/dist/components/index.d.cts

@@ -32,6 +32,7 @@ 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';

package/dist/components/index.d.ts

@@ -32,6 +32,7 @@ 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';

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';

package/dist/index.cjs

@@ -437,6 +437,23 @@ const splitterRootProvider = require('./components/splitter/splitter-root-provid
 const useSplitter = require('./components/splitter/use-splitter.cjs');
 const useSplitterContext = require('./components/splitter/use-splitter-context.cjs');
 const splitter$1 = require('./components/splitter/splitter.cjs');
+const stepsCompletedContent = require('./components/steps/steps-completed-content.cjs');
+const stepsContent = require('./components/steps/steps-content.cjs');
+const stepsIndicator = require('./components/steps/steps-indicator.cjs');
+const stepsItem = require('./components/steps/steps-item.cjs');
+const stepsItemContext = require('./components/steps/steps-item-context.cjs');
+const stepsList = require('./components/steps/steps-list.cjs');
+const stepsNextTrigger = require('./components/steps/steps-next-trigger.cjs');
+const stepsPrevTrigger = require('./components/steps/steps-prev-trigger.cjs');
+const stepsProgress = require('./components/steps/steps-progress.cjs');
+const stepsRoot = require('./components/steps/steps-root.cjs');
+const stepsRootProvider = require('./components/steps/steps-root-provider.cjs');
+const stepsSeparator = require('./components/steps/steps-separator.cjs');
+const stepsTrigger = require('./components/steps/steps-trigger.cjs');
+const useSteps = require('./components/steps/use-steps.cjs');
+const useStepsContext = require('./components/steps/use-steps-context.cjs');
+const useStepsItemContext = require('./components/steps/use-steps-item-context.cjs');
+const steps = require('./components/steps/steps.cjs');
 const switchContext = require('./components/switch/switch-context.cjs');
 const switchControl = require('./components/switch/switch-control.cjs');
 const switchHiddenInput = require('./components/switch/switch-hidden-input.cjs');
@@ -1020,6 +1037,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;

package/dist/index.js

@@ -463,6 +463,24 @@ export { useSplitter } from './components/splitter/use-splitter.js';
 export { useSplitterContext } from './components/splitter/use-splitter-context.js';
 import * as splitter from './components/splitter/splitter.js';
 export { splitter as Splitter };
+export { StepsCompletedContent } from './components/steps/steps-completed-content.js';
+export { StepsContent } from './components/steps/steps-content.js';
+export { StepsIndicator } from './components/steps/steps-indicator.js';
+export { StepsItem } from './components/steps/steps-item.js';
+export { StepsItemContext } from './components/steps/steps-item-context.js';
+export { StepsList } from './components/steps/steps-list.js';
+export { StepsNextTrigger } from './components/steps/steps-next-trigger.js';
+export { StepsPrevTrigger } from './components/steps/steps-prev-trigger.js';
+export { StepsProgress } from './components/steps/steps-progress.js';
+export { StepsRoot } from './components/steps/steps-root.js';
+export { StepsRootProvider } from './components/steps/steps-root-provider.js';
+export { StepsSeparator } from './components/steps/steps-separator.js';
+export { StepsTrigger } from './components/steps/steps-trigger.js';
+export { useSteps } from './components/steps/use-steps.js';
+export { useStepsContext } from './components/steps/use-steps-context.js';
+export { useStepsItemContext } from './components/steps/use-steps-item-context.js';
+import * as steps from './components/steps/steps.js';
+export { steps as Steps };
 export { SwitchContext } from './components/switch/switch-context.js';
 export { SwitchControl } from './components/switch/switch-control.js';
 export { SwitchHiddenInput } from './components/switch/switch-hidden-input.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -593,52 +593,52 @@
   "sideEffects": false,
   "dependencies": {
     "@internationalized/date": "3.5.5",
-    "@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/timer": "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"
+    "@zag-js/accordion": "0.65.1",
+    "@zag-js/anatomy": "0.65.1",
+    "@zag-js/avatar": "0.65.1",
+    "@zag-js/carousel": "0.65.1",
+    "@zag-js/checkbox": "0.65.1",
+    "@zag-js/clipboard": "0.65.1",
+    "@zag-js/collapsible": "0.65.1",
+    "@zag-js/color-picker": "0.65.1",
+    "@zag-js/color-utils": "0.65.1",
+    "@zag-js/combobox": "0.65.1",
+    "@zag-js/core": "0.65.1",
+    "@zag-js/date-picker": "0.65.1",
+    "@zag-js/date-utils": "0.65.1",
+    "@zag-js/dialog": "0.65.1",
+    "@zag-js/dom-query": "0.65.1",
+    "@zag-js/editable": "0.65.1",
+    "@zag-js/file-upload": "0.65.1",
+    "@zag-js/file-utils": "0.65.1",
+    "@zag-js/hover-card": "0.65.1",
+    "@zag-js/i18n-utils": "0.65.1",
+    "@zag-js/menu": "0.65.1",
+    "@zag-js/number-input": "0.65.1",
+    "@zag-js/pagination": "0.65.1",
+    "@zag-js/pin-input": "0.65.1",
+    "@zag-js/popover": "0.65.1",
+    "@zag-js/presence": "0.65.1",
+    "@zag-js/progress": "0.65.1",
+    "@zag-js/qr-code": "0.65.1",
+    "@zag-js/radio-group": "0.65.1",
+    "@zag-js/rating-group": "0.65.1",
+    "@zag-js/react": "0.65.1",
+    "@zag-js/select": "0.65.1",
+    "@zag-js/signature-pad": "0.65.1",
+    "@zag-js/slider": "0.65.1",
+    "@zag-js/splitter": "0.65.1",
+    "@zag-js/steps": "0.65.1",
+    "@zag-js/switch": "0.65.1",
+    "@zag-js/tabs": "0.65.1",
+    "@zag-js/tags-input": "0.65.1",
+    "@zag-js/time-picker": "0.65.1",
+    "@zag-js/timer": "0.65.1",
+    "@zag-js/toast": "0.65.1",
+    "@zag-js/toggle-group": "0.65.1",
+    "@zag-js/tooltip": "0.65.1",
+    "@zag-js/tree-view": "0.65.1",
+    "@zag-js/types": "0.65.1"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",
@@ -666,7 +666,7 @@
     "resize-observer-polyfill": "1.5.1",
     "storybook": "8.2.9",
     "typescript": "5.5.4",
-    "vite": "5.4.0",
+    "vite": "5.4.2",
     "vite-plugin-dts": "3.9.1",
     "vitest": "2.0.5",
     "vitest-axe": "1.0.0-pre.3"