@ark-ui/react 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -21,6 +21,7 @@
     "pin input",
     "popover",
     "presence",
+    "progress",
     "radio group",
     "rating group",
     "segment group",
@@ -60,78 +61,79 @@
     "release-it": "release-it --config ../../../release-it.json"
   },
   "dependencies": {
-    "@ark-ui/anatomy": "1.2.0",
-    "@zag-js/accordion": "0.31.1",
-    "@zag-js/avatar": "0.31.1",
-    "@zag-js/carousel": "0.31.1",
-    "@zag-js/checkbox": "0.31.1",
-    "@zag-js/color-picker": "0.31.1",
-    "@zag-js/color-utils": "0.31.1",
-    "@zag-js/combobox": "0.31.1",
-    "@zag-js/core": "0.31.1",
-    "@zag-js/date-picker": "0.31.1",
-    "@zag-js/date-utils": "0.31.1",
-    "@zag-js/dialog": "0.31.1",
-    "@zag-js/editable": "0.31.1",
-    "@zag-js/file-upload": "0.31.1",
-    "@zag-js/hover-card": "0.31.1",
-    "@zag-js/menu": "0.31.1",
-    "@zag-js/number-input": "0.31.1",
-    "@zag-js/pagination": "0.31.1",
-    "@zag-js/pin-input": "0.31.1",
-    "@zag-js/popover": "0.31.1",
-    "@zag-js/presence": "0.31.1",
-    "@zag-js/radio-group": "0.31.1",
-    "@zag-js/rating-group": "0.31.1",
-    "@zag-js/react": "0.31.1",
-    "@zag-js/select": "0.31.1",
-    "@zag-js/slider": "0.31.1",
-    "@zag-js/splitter": "0.31.1",
-    "@zag-js/switch": "0.31.1",
-    "@zag-js/tabs": "0.31.1",
-    "@zag-js/tags-input": "0.31.1",
-    "@zag-js/toast": "0.31.1",
-    "@zag-js/toggle-group": "0.31.1",
-    "@zag-js/tooltip": "0.31.1",
-    "@zag-js/types": "0.31.1"
+    "@ark-ui/anatomy": "1.3.0",
+    "@zag-js/accordion": "0.32.1",
+    "@zag-js/avatar": "0.32.1",
+    "@zag-js/carousel": "0.32.1",
+    "@zag-js/checkbox": "0.32.1",
+    "@zag-js/color-picker": "0.32.1",
+    "@zag-js/color-utils": "0.32.1",
+    "@zag-js/combobox": "0.32.1",
+    "@zag-js/core": "0.32.1",
+    "@zag-js/date-picker": "0.32.1",
+    "@zag-js/date-utils": "0.32.1",
+    "@zag-js/dialog": "0.32.1",
+    "@zag-js/editable": "0.32.1",
+    "@zag-js/file-upload": "0.32.1",
+    "@zag-js/hover-card": "0.32.1",
+    "@zag-js/menu": "0.32.1",
+    "@zag-js/number-input": "0.32.1",
+    "@zag-js/pagination": "0.32.1",
+    "@zag-js/pin-input": "0.32.1",
+    "@zag-js/popover": "0.32.1",
+    "@zag-js/presence": "0.32.1",
+    "@zag-js/progress": "0.32.1",
+    "@zag-js/radio-group": "0.32.1",
+    "@zag-js/rating-group": "0.32.1",
+    "@zag-js/react": "0.32.1",
+    "@zag-js/select": "0.32.1",
+    "@zag-js/slider": "0.32.1",
+    "@zag-js/splitter": "0.32.1",
+    "@zag-js/switch": "0.32.1",
+    "@zag-js/tabs": "0.32.1",
+    "@zag-js/tags-input": "0.32.1",
+    "@zag-js/toast": "0.32.1",
+    "@zag-js/toggle-group": "0.32.1",
+    "@zag-js/tooltip": "0.32.1",
+    "@zag-js/types": "0.32.1"
   },
   "devDependencies": {
     "@release-it/keep-a-changelog": "5.0.0",
-    "@storybook/addon-a11y": "7.6.4",
-    "@storybook/addon-essentials": "7.6.4",
-    "@storybook/addons": "7.6.4",
-    "@storybook/react": "7.6.4",
-    "@storybook/react-vite": "7.6.4",
-    "@testing-library/dom": "9.3.3",
-    "@testing-library/jest-dom": "6.1.5",
+    "@storybook/addon-a11y": "7.6.8",
+    "@storybook/addon-essentials": "7.6.8",
+    "@storybook/addons": "7.6.8",
+    "@storybook/react": "7.6.8",
+    "@storybook/react-vite": "7.6.8",
+    "@testing-library/dom": "9.3.4",
+    "@testing-library/jest-dom": "6.2.0",
     "@testing-library/react": "14.1.2",
-    "@testing-library/user-event": "14.5.1",
+    "@testing-library/user-event": "14.5.2",
     "@types/jsdom": "21.1.6",
-    "@types/react": "18.2.42",
-    "@types/react-dom": "18.2.17",
+    "@types/react": "18.2.47",
+    "@types/react-dom": "18.2.18",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "6.14.0",
-    "@typescript-eslint/parser": "6.14.0",
+    "@typescript-eslint/eslint-plugin": "6.18.1",
+    "@typescript-eslint/parser": "6.18.1",
     "@vitejs/plugin-react": "4.2.1",
     "@vitest/coverage-v8": "0.34.6",
-    "eslint": "8.55.0",
+    "eslint": "8.56.0",
     "eslint-plugin-jest-dom": "5.1.0",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-testing-library": "6.2.0",
     "globby": "14.0.0",
     "jsdom": "23.0.1",
-    "lucide-react": "0.294.0",
+    "lucide-react": "0.309.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-frame-component": "5.2.6",
-    "react-hook-form": "7.49.2",
+    "react-hook-form": "7.49.3",
     "release-it": "17.0.1",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "7.6.4",
+    "storybook": "7.6.8",
     "typescript": "5.3.3",
-    "vite": "5.0.8",
-    "vite-plugin-dts": "3.6.4",
+    "vite": "5.0.11",
+    "vite-plugin-dts": "3.7.0",
     "vitest": "0.34.6"
   },
   "peerDependencies": {
@@ -240,6 +242,11 @@
       "import": "./presence/index.mjs",
       "require": "./presence/index.cjs"
     },
+    "./progress": {
+      "types": "./progress/index.d.ts",
+      "import": "./progress/index.mjs",
+      "require": "./progress/index.cjs"
+    },
     "./radio-group": {
       "types": "./radio-group/index.d.ts",
       "import": "./radio-group/index.mjs",
@@ -301,10 +308,15 @@
       "require": "./tooltip/index.cjs"
     },
     "./factory": {
-      "types": "./factory/factory.d.ts",
+      "types": "./factory.d.ts",
       "import": "./factory.mjs",
       "require": "./factory.cjs"
     },
+    "./portal": {
+      "types": "./portal.d.ts",
+      "import": "./portal.mjs",
+      "require": "./portal.cjs"
+    },
     "./package.json": "./package.json"
   }
 }

package/pagination/index.d.ts

@@ -1,5 +1,6 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
+import type { ItemLabelDetails as PaginationItemLabelDetails, PageChangeDetails as PaginationPageChangeDetails } from '@zag-js/pagination';
 import { type PaginationProps } from './pagination';
 import { usePaginationContext, type PaginationContext } from './pagination-context';
 import { PaginationEllipsis, type PaginationEllipsisProps } from './pagination-ellipsis';
@@ -14,4 +15,4 @@ declare const Pagination: ForwardRefExoticComponent<PaginationProps & RefAttribu
     PrevTrigger: ForwardRefExoticComponent<PaginationPrevTriggerProps & RefAttributes<HTMLButtonElement>>;
 };
 export { Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, usePaginationContext, };
-export type { PaginationContext, PaginationEllipsisProps, PaginationItemProps, PaginationNextTriggerProps, PaginationPrevTriggerProps, PaginationProps, };
+export type { PaginationContext, PaginationEllipsisProps, PaginationItemLabelDetails, PaginationItemProps, PaginationNextTriggerProps, PaginationPageChangeDetails, PaginationPrevTriggerProps, PaginationProps, };

package/pagination/{pagination.stories.d.ts → stories/pagination.stories.d.ts}

@@ -1,6 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-import { Pagination } from './';
+import { Pagination } from '../';
 type PaginationType = typeof Pagination;
 declare const meta: Meta<PaginationType>;
 export default meta;

package/pin-input/index.d.ts

@@ -1,5 +1,6 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
+import type { ValueChangeDetails as PinInputValueChangeDetails, ValueInvalidDetails as PinInputValueInvalidDetails } from '@zag-js/pin-input';
 import { type PinInputProps } from './pin-input';
 import { usePinInputContext, type PinInputContext } from './pin-input-context';
 import { PinInputControl, type PinInputControlProps } from './pin-input-control';
@@ -12,4 +13,4 @@ declare const PinInput: ForwardRefExoticComponent<PinInputProps & RefAttributes<
     Label: ForwardRefExoticComponent<PinInputLabelProps & RefAttributes<HTMLLabelElement>>;
 };
 export { PinInput, PinInputControl, PinInputInput, PinInputLabel, usePinInputContext };
-export type { PinInputContext, PinInputControlProps, PinInputInputProps, PinInputLabelProps, PinInputProps, };
+export type { PinInputContext, PinInputControlProps, PinInputInputProps, PinInputLabelProps, PinInputProps, PinInputValueChangeDetails, PinInputValueInvalidDetails, };

package/pin-input/{pin-input.stories.d.ts → stories/pin-input.stories.d.ts}

@@ -1,6 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-import { PinInput } from './';
+import { PinInput } from '../';
 type PinInputType = typeof PinInput;
 declare const meta: Meta<PinInputType>;
 export default meta;

package/popover/index.d.ts

@@ -1,6 +1,7 @@
 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';
@@ -27,4 +28,4 @@ declare const Popover: ((props: PopoverProps) => JSX.Element) & {
     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, PopoverPositionerProps, PopoverProps, PopoverTitleProps, PopoverTriggerProps, };
+export type { PopoverAnchorProps, PopoverArrowProps, PopoverArrowTipProps, PopoverCloseTriggerProps, PopoverContentProps, PopoverContext, PopoverDescriptionProps, PopoverIndicatorProps, PopoverOpenChangeDetails, PopoverPositionerProps, PopoverProps, PopoverTitleProps, PopoverTriggerProps, };

package/popover/popover-description.d.ts

@@ -1,6 +1,6 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export interface PopoverDescriptionProps extends HTMLArkProps<'div'> {
+export interface PopoverDescriptionProps extends HTMLArkProps<'p'> {
 }
 export declare const PopoverDescription: ForwardRefExoticComponent<PopoverDescriptionProps & RefAttributes<HTMLParagraphElement>>;

package/popover/{popover.stories.d.ts → stories/popover.stories.d.ts}

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

package/presence/{presence.stories.d.ts → stories/presence.stories.d.ts}

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

package/progress/index.cjs

@@ -0,0 +1,38 @@
+'use client';
+'use strict';
+
+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 progressTrack = require('./progress-track.cjs');
+const progressValueText = require('./progress-value-text.cjs');
+
+const Progress = Object.assign(progress.Progress, {
+  Root: progress.Progress,
+  Label: progressLabel.ProgressLabel,
+  Track: progressTrack.ProgressTrack,
+  Range: progressRange.ProgressRange,
+  ValueText: progressValueText.ProgressValueText,
+  Indicator: progressIndicator.ProgressIndicator,
+  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.ProgressTrack = progressTrack.ProgressTrack;
+exports.ProgressValueText = progressValueText.ProgressValueText;
+exports.Progress = Progress;

package/progress/index.d.ts

@@ -0,0 +1,35 @@
+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 { 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>>;
+    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>>;
+    Circle: {
+        (props: ProgressCircleProps): JSX.Element;
+        displayName: string;
+    };
+    CircleTrack: {
+        (props: ProgressCircleTrackProps): JSX.Element;
+        displayName: string;
+    };
+    CircleRange: {
+        (props: ProgressCircleRangeProps): JSX.Element;
+        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, };

package/progress/index.mjs

@@ -0,0 +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 { ProgressTrack } from './progress-track.mjs';
+import { ProgressValueText } from './progress-value-text.mjs';
+
+const Progress = Object.assign(Progress$1, {
+  Root: Progress$1,
+  Label: ProgressLabel,
+  Track: ProgressTrack,
+  Range: ProgressRange,
+  ValueText: ProgressValueText,
+  Indicator: ProgressIndicator,
+  Circle: ProgressCircle,
+  CircleTrack: ProgressCircleTrack,
+  CircleRange: ProgressCircleRange
+});
+
+export { Progress, ProgressCircle, ProgressCircleRange, ProgressCircleTrack, ProgressIndicator, ProgressLabel, ProgressRange, ProgressTrack, ProgressValueText };

package/progress/progress-circle-range.cjs

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('@zag-js/react');
+const factory = require('../factory.cjs');
+const progressContext = require('./progress-context.cjs');
+
+const ProgressCircleRange = (props) => {
+  const api = progressContext.useProgressContext();
+  const mergedProps = react.mergeProps(api.circleRangeProps, props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.circle, { ...mergedProps });
+};
+ProgressCircleRange.displayName = "ProgressCircleRange";
+
+exports.ProgressCircleRange = ProgressCircleRange;

package/progress/progress-circle-range.d.ts

@@ -0,0 +1,8 @@
+import { JSX } from 'react/jsx-runtime';
+import { type HTMLArkProps } from '../factory';
+export interface ProgressCircleRangeProps extends HTMLArkProps<'circle'> {
+}
+export declare const ProgressCircleRange: {
+    (props: ProgressCircleRangeProps): JSX.Element;
+    displayName: string;
+};

package/progress/progress-circle-range.mjs

@@ -0,0 +1,14 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { ark } from '../factory.mjs';
+import { useProgressContext } from './progress-context.mjs';
+
+const ProgressCircleRange = (props) => {
+  const api = useProgressContext();
+  const mergedProps = mergeProps(api.circleRangeProps, props);
+  return /* @__PURE__ */ jsx(ark.circle, { ...mergedProps });
+};
+ProgressCircleRange.displayName = "ProgressCircleRange";
+
+export { ProgressCircleRange };

package/progress/progress-circle-track.cjs

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('@zag-js/react');
+const factory = require('../factory.cjs');
+const progressContext = require('./progress-context.cjs');
+
+const ProgressCircleTrack = (props) => {
+  const api = progressContext.useProgressContext();
+  const mergedProps = react.mergeProps(api.circleTrackProps, props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.circle, { ...mergedProps });
+};
+ProgressCircleTrack.displayName = "ProgressCircleTrack";
+
+exports.ProgressCircleTrack = ProgressCircleTrack;

package/progress/progress-circle-track.d.ts

@@ -0,0 +1,8 @@
+import { JSX } from 'react/jsx-runtime';
+import { type HTMLArkProps } from '../factory';
+export interface ProgressCircleTrackProps extends HTMLArkProps<'circle'> {
+}
+export declare const ProgressCircleTrack: {
+    (props: ProgressCircleTrackProps): JSX.Element;
+    displayName: string;
+};

package/progress/progress-circle-track.mjs

@@ -0,0 +1,14 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { ark } from '../factory.mjs';
+import { useProgressContext } from './progress-context.mjs';
+
+const ProgressCircleTrack = (props) => {
+  const api = useProgressContext();
+  const mergedProps = mergeProps(api.circleTrackProps, props);
+  return /* @__PURE__ */ jsx(ark.circle, { ...mergedProps });
+};
+ProgressCircleTrack.displayName = "ProgressCircleTrack";
+
+export { ProgressCircleTrack };

package/progress/progress-circle.cjs

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('@zag-js/react');
+const factory = require('../factory.cjs');
+const progressContext = require('./progress-context.cjs');
+
+const ProgressCircle = (props) => {
+  const api = progressContext.useProgressContext();
+  const mergedProps = react.mergeProps(api.circleProps, props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.svg, { ...mergedProps });
+};
+ProgressCircle.displayName = "ProgressCircle";
+
+exports.ProgressCircle = ProgressCircle;

package/progress/progress-circle.d.ts

@@ -0,0 +1,8 @@
+import { JSX } from 'react/jsx-runtime';
+import { type HTMLArkProps } from '../factory';
+export interface ProgressCircleProps extends HTMLArkProps<'svg'> {
+}
+export declare const ProgressCircle: {
+    (props: ProgressCircleProps): JSX.Element;
+    displayName: string;
+};

package/progress/progress-circle.mjs

@@ -0,0 +1,14 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { ark } from '../factory.mjs';
+import { useProgressContext } from './progress-context.mjs';
+
+const ProgressCircle = (props) => {
+  const api = useProgressContext();
+  const mergedProps = mergeProps(api.circleProps, props);
+  return /* @__PURE__ */ jsx(ark.svg, { ...mergedProps });
+};
+ProgressCircle.displayName = "ProgressCircle";
+
+export { ProgressCircle };

package/progress/progress-context.cjs

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

package/progress/progress-context.d.ts

@@ -0,0 +1,6 @@
+import { Provider } from 'react';
+/// <reference types="react" />
+import { type UseProgressReturn } from './use-progress';
+export interface ProgressContext extends UseProgressReturn {
+}
+export declare const ProgressProvider: Provider<ProgressContext>, useProgressContext: () => ProgressContext;

package/progress/progress-context.mjs

@@ -0,0 +1,10 @@
+'use client';
+import { createContext } from '../create-context.mjs';
+
+const [ProgressProvider, useProgressContext] = createContext({
+  name: "ProgressContext",
+  hookName: "useProgressContext",
+  providerName: "<ProgressProvider />"
+});
+
+export { ProgressProvider, useProgressContext };

package/progress/progress-indicator.cjs

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

package/progress/progress-indicator.d.ts

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

package/progress/progress-indicator.mjs

@@ -0,0 +1,18 @@
+'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 ProgressIndicator = forwardRef(
+  (props, ref) => {
+    const { state, ...rest } = props;
+    const api = useProgressContext();
+    const mergedProps = mergeProps(api.getIndicatorProps({ state }), rest);
+    return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
+  }
+);
+ProgressIndicator.displayName = "ProgressIndicator";
+
+export { ProgressIndicator };

package/progress/progress-label.cjs

@@ -0,0 +1,19 @@
+'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 ProgressLabel = react.forwardRef((props, ref) => {
+  const api = progressContext.useProgressContext();
+  const mergedProps = react$1.mergeProps(api.labelProps, props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
+});
+ProgressLabel.displayName = "ProgressLabel";
+
+exports.ProgressLabel = ProgressLabel;

package/progress/progress-label.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface ProgressLabelProps extends HTMLArkProps<'label'> {
+}
+export declare const ProgressLabel: ForwardRefExoticComponent<ProgressLabelProps & RefAttributes<HTMLLabelElement>>;

package/progress/progress-label.mjs

@@ -0,0 +1,15 @@
+'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 ProgressLabel = forwardRef((props, ref) => {
+  const api = useProgressContext();
+  const mergedProps = mergeProps(api.labelProps, props);
+  return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
+});
+ProgressLabel.displayName = "ProgressLabel";
+
+export { ProgressLabel };