@ark-ui/react 1.3.0 → 2.0.0

package/pin-input/use-pin-input.cjs

@@ -6,9 +6,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const pinInput = require('@zag-js/pin-input');
 const react$1 = require('@zag-js/react');
 const react = require('react');
-require('../environment/index.cjs');
-const useEvent = require('../use-event.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
+const useEvent = require('../use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });

package/pin-input/use-pin-input.mjs

@@ -2,9 +2,8 @@
 import * as pinInput from '@zag-js/pin-input';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
-import '../environment/index.mjs';
-import { useEvent } from '../use-event.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
+import { useEvent } from '../use-event.mjs';
 
 const usePinInput = (props = {}) => {
   const initialContext = {

package/popover/index.cjs

@@ -3,7 +3,6 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const popover = require('./popover.cjs');
 const popoverAnchor = require('./popover-anchor.cjs');
 const popoverArrow = require('./popover-arrow.cjs');
 const popoverArrowTip = require('./popover-arrow-tip.cjs');
@@ -13,11 +12,12 @@ const popoverContext = require('./popover-context.cjs');
 const popoverDescription = require('./popover-description.cjs');
 const popoverIndicator = require('./popover-indicator.cjs');
 const popoverPositioner = require('./popover-positioner.cjs');
+const popoverRoot = require('./popover-root.cjs');
 const popoverTitle = require('./popover-title.cjs');
 const popoverTrigger = require('./popover-trigger.cjs');
 
-const Popover = Object.assign(popover.Popover, {
-  Root: popover.Popover,
+const Popover = {
+  Root: popoverRoot.PopoverRoot,
   Anchor: popoverAnchor.PopoverAnchor,
   Arrow: popoverArrow.PopoverArrow,
   ArrowTip: popoverArrowTip.PopoverArrowTip,
@@ -28,7 +28,7 @@ const Popover = Object.assign(popover.Popover, {
   Positioner: popoverPositioner.PopoverPositioner,
   Title: popoverTitle.PopoverTitle,
   Trigger: popoverTrigger.PopoverTrigger
-});
+};
 
 exports.PopoverAnchor = popoverAnchor.PopoverAnchor;
 exports.PopoverArrow = popoverArrow.PopoverArrow;
@@ -39,6 +39,7 @@ exports.usePopoverContext = popoverContext.usePopoverContext;
 exports.PopoverDescription = popoverDescription.PopoverDescription;
 exports.PopoverIndicator = popoverIndicator.PopoverIndicator;
 exports.PopoverPositioner = popoverPositioner.PopoverPositioner;
+exports.PopoverRoot = popoverRoot.PopoverRoot;
 exports.PopoverTitle = popoverTitle.PopoverTitle;
 exports.PopoverTrigger = popoverTrigger.PopoverTrigger;
 exports.Popover = Popover;

package/popover/index.d.ts

@@ -2,7 +2,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { JSX } from 'react/jsx-runtime';
 /// <reference types="react" />
 import type { OpenChangeDetails as PopoverOpenChangeDetails } from '@zag-js/popover';
-import { type PopoverProps } from './popover';
 import { PopoverAnchor, type PopoverAnchorProps } from './popover-anchor';
 import { PopoverArrow, type PopoverArrowProps } from './popover-arrow';
 import { PopoverArrowTip, type PopoverArrowTipProps } from './popover-arrow-tip';
@@ -12,10 +11,11 @@ import { usePopoverContext, type PopoverContext } from './popover-context';
 import { PopoverDescription, type PopoverDescriptionProps } from './popover-description';
 import { PopoverIndicator, type PopoverIndicatorProps } from './popover-indicator';
 import { PopoverPositioner, type PopoverPositionerProps } from './popover-positioner';
+import { PopoverRoot, type PopoverRootProps } from './popover-root';
 import { PopoverTitle, type PopoverTitleProps } from './popover-title';
 import { PopoverTrigger, type PopoverTriggerProps } from './popover-trigger';
-declare const Popover: ((props: PopoverProps) => JSX.Element) & {
-    Root: (props: PopoverProps) => JSX.Element;
+export declare const Popover: {
+    Root: (props: PopoverRootProps) => JSX.Element;
     Anchor: ForwardRefExoticComponent<PopoverAnchorProps & RefAttributes<HTMLDivElement>>;
     Arrow: ForwardRefExoticComponent<PopoverArrowProps & RefAttributes<HTMLDivElement>>;
     ArrowTip: ForwardRefExoticComponent<PopoverArrowTipProps & RefAttributes<HTMLDivElement>>;
@@ -27,5 +27,5 @@ declare const Popover: ((props: PopoverProps) => JSX.Element) & {
     Title: ForwardRefExoticComponent<PopoverTitleProps & RefAttributes<HTMLDivElement>>;
     Trigger: ForwardRefExoticComponent<PopoverTriggerProps & RefAttributes<HTMLButtonElement>>;
 };
-export { Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverTitle, PopoverTrigger, usePopoverContext, };
-export type { PopoverAnchorProps, PopoverArrowProps, PopoverArrowTipProps, PopoverCloseTriggerProps, PopoverContentProps, PopoverContext, PopoverDescriptionProps, PopoverIndicatorProps, PopoverOpenChangeDetails, PopoverPositionerProps, PopoverProps, PopoverTitleProps, PopoverTriggerProps, };
+export { PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverRoot, PopoverTitle, PopoverTrigger, usePopoverContext, };
+export type { PopoverAnchorProps, PopoverArrowProps, PopoverArrowTipProps, PopoverCloseTriggerProps, PopoverContentProps, PopoverContext, PopoverDescriptionProps, PopoverIndicatorProps, PopoverOpenChangeDetails, PopoverPositionerProps, PopoverRootProps, PopoverTitleProps, PopoverTriggerProps, };

package/popover/index.mjs

@@ -1,5 +1,4 @@
 'use client';
-import { Popover as Popover$1 } from './popover.mjs';
 import { PopoverAnchor } from './popover-anchor.mjs';
 import { PopoverArrow } from './popover-arrow.mjs';
 import { PopoverArrowTip } from './popover-arrow-tip.mjs';
@@ -9,11 +8,12 @@ export { usePopoverContext } from './popover-context.mjs';
 import { PopoverDescription } from './popover-description.mjs';
 import { PopoverIndicator } from './popover-indicator.mjs';
 import { PopoverPositioner } from './popover-positioner.mjs';
+import { PopoverRoot } from './popover-root.mjs';
 import { PopoverTitle } from './popover-title.mjs';
 import { PopoverTrigger } from './popover-trigger.mjs';
 
-const Popover = Object.assign(Popover$1, {
-  Root: Popover$1,
+const Popover = {
+  Root: PopoverRoot,
   Anchor: PopoverAnchor,
   Arrow: PopoverArrow,
   ArrowTip: PopoverArrowTip,
@@ -24,6 +24,6 @@ const Popover = Object.assign(Popover$1, {
   Positioner: PopoverPositioner,
   Title: PopoverTitle,
   Trigger: PopoverTrigger
-});
+};
 
-export { Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverTitle, PopoverTrigger };
+export { Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverRoot, PopoverTitle, PopoverTrigger };

package/popover/popover-content.cjs

@@ -7,9 +7,8 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-require('../presence/index.cjs');
-const popoverContext = require('./popover-context.cjs');
 const presenceContext = require('../presence/presence-context.cjs');
+const popoverContext = require('./popover-context.cjs');
 
 const PopoverContent = react.forwardRef((props, ref) => {
   const api = popoverContext.usePopoverContext();

package/popover/popover-content.mjs

@@ -3,9 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
-import { usePopoverContext } from './popover-context.mjs';
 import { usePresenceContext } from '../presence/presence-context.mjs';
+import { usePopoverContext } from './popover-context.mjs';
 
 const PopoverContent = forwardRef((props, ref) => {
   const api = usePopoverContext();

package/popover/popover-positioner.cjs

@@ -7,9 +7,8 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-require('../presence/index.cjs');
-const popoverContext = require('./popover-context.cjs');
 const presenceContext = require('../presence/presence-context.cjs');
+const popoverContext = require('./popover-context.cjs');
 
 const PopoverPositioner = react.forwardRef(
   (props, ref) => {

package/popover/popover-positioner.mjs

@@ -3,9 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
-import { usePopoverContext } from './popover-context.mjs';
 import { usePresenceContext } from '../presence/presence-context.mjs';
+import { usePopoverContext } from './popover-context.mjs';
 
 const PopoverPositioner = forwardRef(
   (props, ref) => {

package/popover/{popover.cjs → popover-root.cjs}

@@ -6,15 +6,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('@zag-js/react');
 require('react');
-require('../presence/index.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const usePresence = require('../presence/use-presence.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const popoverContext = require('./popover-context.cjs');
 const usePopover = require('./use-popover.cjs');
-const usePresence = require('../presence/use-presence.cjs');
-const presenceContext = require('../presence/presence-context.cjs');
 
-const Popover = (props) => {
+const PopoverRoot = (props) => {
   const [presenceProps, { children, ...localProps }] = splitPresenceProps.splitPresenceProps(props);
   const api = usePopover.usePopover(localProps);
   const presenceApi = usePresence.usePresence(react.mergeProps({ present: api.isOpen }, presenceProps));
@@ -22,4 +21,4 @@ const Popover = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(popoverContext.PopoverProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: view }) });
 };
 
-exports.Popover = Popover;
+exports.PopoverRoot = PopoverRoot;

package/popover/{popover.d.ts → popover-root.d.ts}

@@ -2,7 +2,7 @@ import { JSX } from 'react/jsx-runtime';
 import { type ReactNode } from 'react';
 import type { UsePresenceProps } from '../presence';
 import { type UsePopoverProps, type UsePopoverReturn } from './use-popover';
-export interface PopoverProps extends UsePopoverProps, UsePresenceProps {
+export interface PopoverRootProps extends UsePopoverProps, UsePresenceProps {
     children?: ReactNode | ((api: UsePopoverReturn) => ReactNode);
 }
-export declare const Popover: (props: PopoverProps) => JSX.Element;
+export declare const PopoverRoot: (props: PopoverRootProps) => JSX.Element;

package/popover/{popover.mjs → popover-root.mjs}

@@ -2,15 +2,14 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import 'react';
-import '../presence/index.mjs';
+import { PresenceProvider } from '../presence/presence-context.mjs';
 import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { usePresence } from '../presence/use-presence.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { PopoverProvider } from './popover-context.mjs';
 import { usePopover } from './use-popover.mjs';
-import { usePresence } from '../presence/use-presence.mjs';
-import { PresenceProvider } from '../presence/presence-context.mjs';
 
-const Popover = (props) => {
+const PopoverRoot = (props) => {
   const [presenceProps, { children, ...localProps }] = splitPresenceProps(props);
   const api = usePopover(localProps);
   const presenceApi = usePresence(mergeProps({ present: api.isOpen }, presenceProps));
@@ -18,4 +17,4 @@ const Popover = (props) => {
   return /* @__PURE__ */ jsx(PopoverProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: view }) });
 };
 
-export { Popover };
+export { PopoverRoot };

package/popover/popover-trigger.cjs

@@ -7,9 +7,8 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-require('../presence/index.cjs');
-const popoverContext = require('./popover-context.cjs');
 const presenceContext = require('../presence/presence-context.cjs');
+const popoverContext = require('./popover-context.cjs');
 
 const PopoverTrigger = react.forwardRef((props, ref) => {
   const api = popoverContext.usePopoverContext();

package/popover/popover-trigger.mjs

@@ -3,9 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
-import { usePopoverContext } from './popover-context.mjs';
 import { usePresenceContext } from '../presence/presence-context.mjs';
+import { usePopoverContext } from './popover-context.mjs';
 
 const PopoverTrigger = forwardRef((props, ref) => {
   const api = usePopoverContext();

package/popover/stories/popover.stories.d.ts

@@ -1,8 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-import { Popover } from '../';
-type PopoverType = typeof Popover;
-declare const meta: Meta<PopoverType>;
+declare const meta: Meta;
 export default meta;
 export declare const Basic: () => JSX.Element;
 export declare const Portalled: () => JSX.Element;

package/popover/tests/basic.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react/jsx-runtime';
+import { type PopoverRootProps } from '../';
+export declare const ComponentUnderTest: (props: PopoverRootProps) => JSX.Element;

package/popover/tests/controlled.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react/jsx-runtime';
+import { type PopoverRootProps } from '../';
+export declare const ControlledComponentUnderTest: (props: PopoverRootProps) => JSX.Element;

package/popover/use-popover.cjs

@@ -6,9 +6,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const popover = require('@zag-js/popover');
 const react$1 = require('@zag-js/react');
 const react = require('react');
-require('../environment/index.cjs');
-const useEvent = require('../use-event.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
+const useEvent = require('../use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });

package/popover/use-popover.mjs

@@ -2,9 +2,8 @@
 import * as popover from '@zag-js/popover';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
-import '../environment/index.mjs';
-import { useEvent } from '../use-event.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
+import { useEvent } from '../use-event.mjs';
 
 const usePopover = (props = {}) => {
   const initialContext = {

package/portal.cjs

@@ -5,9 +5,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const react = require('react');
 const reactDom = require('react-dom');
-require('./environment/index.cjs');
-const useIsServer = require('./use-is-server.cjs');
 const environmentContext = require('./environment/environment-context.cjs');
+const useIsServer = require('./use-is-server.cjs');
 
 const Portal = (props) => {
   const { children, container, disabled } = props;

package/portal.mjs

@@ -1,9 +1,8 @@
 'use client';
 import { Children } from 'react';
 import { createPortal } from 'react-dom';
-import './environment/index.mjs';
-import { useIsServer } from './use-is-server.mjs';
 import { useEnvironmentContext } from './environment/environment-context.mjs';
+import { useIsServer } from './use-is-server.mjs';
 
 const Portal = (props) => {
   const { children, container, disabled } = props;

package/presence/index.cjs

@@ -9,14 +9,12 @@ const presencePropsContext = require('./presence-props-context.cjs');
 const splitPresenceProps = require('./split-presence-props.cjs');
 const usePresence = require('./use-presence.cjs');
 
-const Presence = Object.assign(presence.Presence, {
-  Root: presence.Presence
-});
 
+
+exports.Presence = presence.Presence;
 exports.PresenceProvider = presenceContext.PresenceProvider;
 exports.usePresenceContext = presenceContext.usePresenceContext;
 exports.PresencePropsProvider = presencePropsContext.PresencePropsProvider;
 exports.usePresencePropsContext = presencePropsContext.usePresencePropsContext;
 exports.splitPresenceProps = splitPresenceProps.splitPresenceProps;
 exports.usePresence = usePresence.usePresence;
-exports.Presence = Presence;

package/presence/index.d.ts

@@ -1,12 +1,7 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="react" />
-import { type PresenceProps } from './presence';
+import { Presence, type PresenceProps } from './presence';
 import { PresenceProvider, usePresenceContext, type PresenceContext } from './presence-context';
 import { PresencePropsProvider, usePresencePropsContext, type PresencePropsContext } from './presence-props-context';
 import { splitPresenceProps } from './split-presence-props';
 import { usePresence, type UsePresenceProps, type UsePresenceReturn } from './use-presence';
-declare const Presence: ForwardRefExoticComponent<PresenceProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<PresenceProps & RefAttributes<HTMLDivElement>>;
-};
 export { Presence, PresencePropsProvider, PresenceProvider, splitPresenceProps, usePresence, usePresenceContext, usePresencePropsContext, };
 export type { PresenceContext, PresenceProps, PresencePropsContext, UsePresenceProps, UsePresenceReturn, };

package/presence/index.mjs

@@ -1,12 +1,6 @@
 'use client';
-import { Presence as Presence$1 } from './presence.mjs';
+export { Presence } from './presence.mjs';
 export { PresenceProvider, usePresenceContext } from './presence-context.mjs';
 export { PresencePropsProvider, usePresencePropsContext } from './presence-props-context.mjs';
 export { splitPresenceProps } from './split-presence-props.mjs';
 export { usePresence } from './use-presence.mjs';
-
-const Presence = Object.assign(Presence$1, {
-  Root: Presence$1
-});
-
-export { Presence };

package/presence/stories/presence.stories.d.ts

@@ -1,8 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-import { Presence } from '../';
-type PresenceType = typeof Presence;
-declare const meta: Meta<PresenceType>;
+declare const meta: Meta;
 export default meta;
 export declare const Basic: () => JSX.Element;
 export declare const LazyMount: () => JSX.Element;

package/progress/index.cjs

@@ -3,36 +3,37 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const progress = require('./progress.cjs');
 const progressCircle = require('./progress-circle.cjs');
 const progressCircleRange = require('./progress-circle-range.cjs');
 const progressCircleTrack = require('./progress-circle-track.cjs');
 const progressContext = require('./progress-context.cjs');
-const progressIndicator = require('./progress-indicator.cjs');
 const progressLabel = require('./progress-label.cjs');
 const progressRange = require('./progress-range.cjs');
+const progressRoot = require('./progress-root.cjs');
 const progressTrack = require('./progress-track.cjs');
 const progressValueText = require('./progress-value-text.cjs');
+const progressView = require('./progress-view.cjs');
 
-const Progress = Object.assign(progress.Progress, {
-  Root: progress.Progress,
+const Progress = {
+  Root: progressRoot.ProgressRoot,
   Label: progressLabel.ProgressLabel,
   Track: progressTrack.ProgressTrack,
   Range: progressRange.ProgressRange,
   ValueText: progressValueText.ProgressValueText,
-  Indicator: progressIndicator.ProgressIndicator,
+  View: progressView.ProgressView,
   Circle: progressCircle.ProgressCircle,
   CircleTrack: progressCircleTrack.ProgressCircleTrack,
   CircleRange: progressCircleRange.ProgressCircleRange
-});
+};
 
 exports.ProgressCircle = progressCircle.ProgressCircle;
 exports.ProgressCircleRange = progressCircleRange.ProgressCircleRange;
 exports.ProgressCircleTrack = progressCircleTrack.ProgressCircleTrack;
 exports.useProgressContext = progressContext.useProgressContext;
-exports.ProgressIndicator = progressIndicator.ProgressIndicator;
 exports.ProgressLabel = progressLabel.ProgressLabel;
 exports.ProgressRange = progressRange.ProgressRange;
+exports.ProgressRoot = progressRoot.ProgressRoot;
 exports.ProgressTrack = progressTrack.ProgressTrack;
 exports.ProgressValueText = progressValueText.ProgressValueText;
+exports.ProgressView = progressView.ProgressView;
 exports.Progress = Progress;

package/progress/index.d.ts

@@ -1,23 +1,23 @@
 import { JSX } from 'react/jsx-runtime';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
-import { type ProgressProps } from './progress';
 import { ProgressCircle, type ProgressCircleProps } from './progress-circle';
 import { ProgressCircleRange, type ProgressCircleRangeProps } from './progress-circle-range';
 import { ProgressCircleTrack, type ProgressCircleTrackProps } from './progress-circle-track';
 import { useProgressContext, type ProgressContext } from './progress-context';
-import { ProgressIndicator, type ProgressIndicatorProps } from './progress-indicator';
 import { ProgressLabel, type ProgressLabelProps } from './progress-label';
 import { ProgressRange, type ProgressRangeProps } from './progress-range';
+import { ProgressRoot, type ProgressRootProps } from './progress-root';
 import { ProgressTrack, type ProgressTrackProps } from './progress-track';
 import { ProgressValueText, type ProgressValueTextProps } from './progress-value-text';
-declare const Progress: ForwardRefExoticComponent<ProgressProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<ProgressProps & RefAttributes<HTMLDivElement>>;
+import { ProgressView, type ProgressViewProps } from './progress-view';
+export declare const Progress: {
+    Root: ForwardRefExoticComponent<ProgressRootProps & RefAttributes<HTMLDivElement>>;
     Label: ForwardRefExoticComponent<ProgressLabelProps & RefAttributes<HTMLLabelElement>>;
     Track: ForwardRefExoticComponent<ProgressTrackProps & RefAttributes<HTMLDivElement>>;
     Range: ForwardRefExoticComponent<ProgressRangeProps & RefAttributes<HTMLDivElement>>;
     ValueText: ForwardRefExoticComponent<ProgressValueTextProps & RefAttributes<HTMLSpanElement>>;
-    Indicator: ForwardRefExoticComponent<ProgressIndicatorProps & RefAttributes<HTMLSpanElement>>;
+    View: ForwardRefExoticComponent<ProgressViewProps & RefAttributes<HTMLSpanElement>>;
     Circle: {
         (props: ProgressCircleProps): JSX.Element;
         displayName: string;
@@ -31,5 +31,5 @@ declare const Progress: ForwardRefExoticComponent<ProgressProps & RefAttributes<
         displayName: string;
     };
 };
-export { Progress, ProgressCircle, ProgressCircleRange, ProgressCircleTrack, ProgressIndicator, ProgressLabel, ProgressRange, ProgressTrack, ProgressValueText, useProgressContext, };
-export type { ProgressCircleProps, ProgressCircleRangeProps, ProgressCircleTrackProps, ProgressContext, ProgressIndicatorProps, ProgressLabelProps, ProgressProps, ProgressRangeProps, ProgressTrackProps, ProgressValueTextProps, };
+export { ProgressCircle, ProgressCircleRange, ProgressCircleTrack, ProgressLabel, ProgressRange, ProgressRoot, ProgressTrack, ProgressValueText, ProgressView, useProgressContext, };
+export type { ProgressCircleProps, ProgressCircleRangeProps, ProgressCircleTrackProps, ProgressContext, ProgressLabelProps, ProgressRangeProps, ProgressRootProps, ProgressTrackProps, ProgressValueTextProps, ProgressViewProps, };

package/progress/index.mjs

@@ -1,25 +1,25 @@
 'use client';
-import { Progress as Progress$1 } from './progress.mjs';
 import { ProgressCircle } from './progress-circle.mjs';
 import { ProgressCircleRange } from './progress-circle-range.mjs';
 import { ProgressCircleTrack } from './progress-circle-track.mjs';
 export { useProgressContext } from './progress-context.mjs';
-import { ProgressIndicator } from './progress-indicator.mjs';
 import { ProgressLabel } from './progress-label.mjs';
 import { ProgressRange } from './progress-range.mjs';
+import { ProgressRoot } from './progress-root.mjs';
 import { ProgressTrack } from './progress-track.mjs';
 import { ProgressValueText } from './progress-value-text.mjs';
+import { ProgressView } from './progress-view.mjs';
 
-const Progress = Object.assign(Progress$1, {
-  Root: Progress$1,
+const Progress = {
+  Root: ProgressRoot,
   Label: ProgressLabel,
   Track: ProgressTrack,
   Range: ProgressRange,
   ValueText: ProgressValueText,
-  Indicator: ProgressIndicator,
+  View: ProgressView,
   Circle: ProgressCircle,
   CircleTrack: ProgressCircleTrack,
   CircleRange: ProgressCircleRange
-});
+};
 
-export { Progress, ProgressCircle, ProgressCircleRange, ProgressCircleTrack, ProgressIndicator, ProgressLabel, ProgressRange, ProgressTrack, ProgressValueText };
+export { Progress, ProgressCircle, ProgressCircleRange, ProgressCircleTrack, ProgressLabel, ProgressRange, ProgressRoot, ProgressTrack, ProgressValueText, ProgressView };

package/progress/{progress.cjs → progress-root.cjs}

@@ -12,7 +12,7 @@ const runIfFn = require('../run-if-fn.cjs');
 const progressContext = require('./progress-context.cjs');
 const useProgress = require('./use-progress.cjs');
 
-const Progress = react.forwardRef((props, ref) => {
+const ProgressRoot = react.forwardRef((props, ref) => {
   const [progressProps, { children, ...localProps }] = createSplitProps.createSplitProps()(props, [
     "defaultValue",
     "dir",
@@ -27,8 +27,8 @@ const Progress = react.forwardRef((props, ref) => {
   const api = useProgress.useProgress(progressProps);
   const mergedProps = react$1.mergeProps(api.rootProps, localProps);
   const view = runIfFn.runIfFn(children, api);
-  return /* @__PURE__ */ jsxRuntime.jsx(progressContext.ProgressProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.nav, { ...mergedProps, ref, children: view }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(progressContext.ProgressProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
 });
-Progress.displayName = "Progress";
+ProgressRoot.displayName = "ProgressRoot";
 
-exports.Progress = Progress;
+exports.ProgressRoot = ProgressRoot;

package/progress/{progress.d.ts → progress-root.d.ts}

@@ -2,8 +2,8 @@ import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react'
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 import { type UseProgressProps, type UseProgressReturn } from './use-progress';
-export interface ProgressProps extends Assign<Assign<HTMLArkProps<'div'>, {
+export interface ProgressRootProps extends Assign<Assign<HTMLArkProps<'div'>, {
     children?: ReactNode | ((api: UseProgressReturn) => ReactNode);
 }>, UseProgressProps> {
 }
-export declare const Progress: ForwardRefExoticComponent<ProgressProps & RefAttributes<HTMLDivElement>>;
+export declare const ProgressRoot: ForwardRefExoticComponent<ProgressRootProps & RefAttributes<HTMLDivElement>>;

package/progress/{progress.mjs → progress-root.mjs}

@@ -8,7 +8,7 @@ import { runIfFn } from '../run-if-fn.mjs';
 import { ProgressProvider } from './progress-context.mjs';
 import { useProgress } from './use-progress.mjs';
 
-const Progress = forwardRef((props, ref) => {
+const ProgressRoot = forwardRef((props, ref) => {
   const [progressProps, { children, ...localProps }] = createSplitProps()(props, [
     "defaultValue",
     "dir",
@@ -23,8 +23,8 @@ const Progress = forwardRef((props, ref) => {
   const api = useProgress(progressProps);
   const mergedProps = mergeProps(api.rootProps, localProps);
   const view = runIfFn(children, api);
-  return /* @__PURE__ */ jsx(ProgressProvider, { value: api, children: /* @__PURE__ */ jsx(ark.nav, { ...mergedProps, ref, children: view }) });
+  return /* @__PURE__ */ jsx(ProgressProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
 });
-Progress.displayName = "Progress";
+ProgressRoot.displayName = "ProgressRoot";
 
-export { Progress };
+export { ProgressRoot };

package/progress/progress-view.cjs

@@ -0,0 +1,20 @@
+'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 progressContext = require('./progress-context.cjs');
+
+const ProgressView = react.forwardRef((props, ref) => {
+  const { state, ...rest } = props;
+  const api = progressContext.useProgressContext();
+  const mergedProps = react$1.mergeProps(api.getViewProps({ state }), rest);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
+});
+ProgressView.displayName = "ProgressView";
+
+exports.ProgressView = ProgressView;

package/progress/progress-view.d.ts

@@ -0,0 +1,8 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import type { ViewProps } from '@zag-js/progress';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export interface ProgressViewProps extends Assign<HTMLArkProps<'span'>, ViewProps> {
+}
+export declare const ProgressView: ForwardRefExoticComponent<ProgressViewProps & RefAttributes<HTMLSpanElement>>;

package/progress/progress-view.mjs

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useProgressContext } from './progress-context.mjs';
+
+const ProgressView = forwardRef((props, ref) => {
+  const { state, ...rest } = props;
+  const api = useProgressContext();
+  const mergedProps = mergeProps(api.getViewProps({ state }), rest);
+  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
+});
+ProgressView.displayName = "ProgressView";
+
+export { ProgressView };

package/progress/stories/circular-progress.stories.d.ts

@@ -1,8 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-import { Progress } from '../';
-type ProgressType = typeof Progress;
-declare const meta: Meta<ProgressType>;
+declare const meta: Meta;
 export default meta;
 export declare const Basic: () => JSX.Element;
 export declare const InitialValue: () => JSX.Element;