@ark-ui/solid 1.1.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/solid",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -21,6 +21,7 @@
     "pin input",
     "popover",
     "presence",
+    "progress",
     "radio group",
     "rating group",
     "segment group",
@@ -80,71 +81,74 @@
     "release-it": "release-it --config ../../../release-it.json"
   },
   "dependencies": {
-    "@ark-ui/anatomy": "1.1.0",
-    "@zag-js/accordion": "0.30.0",
-    "@zag-js/avatar": "0.30.0",
-    "@zag-js/carousel": "0.30.0",
-    "@zag-js/checkbox": "0.30.0",
-    "@zag-js/color-picker": "0.30.0",
-    "@zag-js/combobox": "0.30.0",
-    "@zag-js/date-picker": "0.30.0",
-    "@zag-js/dialog": "0.30.0",
-    "@zag-js/editable": "0.30.0",
-    "@zag-js/file-upload": "0.30.0",
-    "@zag-js/hover-card": "0.30.0",
-    "@zag-js/menu": "0.30.0",
-    "@zag-js/number-input": "0.30.0",
-    "@zag-js/pagination": "0.30.0",
-    "@zag-js/pin-input": "0.30.0",
-    "@zag-js/popover": "0.30.0",
-    "@zag-js/presence": "0.30.0",
-    "@zag-js/radio-group": "0.30.0",
-    "@zag-js/rating-group": "0.30.0",
-    "@zag-js/select": "0.30.0",
-    "@zag-js/slider": "0.30.0",
-    "@zag-js/solid": "0.30.0",
-    "@zag-js/splitter": "0.30.0",
-    "@zag-js/switch": "0.30.0",
-    "@zag-js/tabs": "0.30.0",
-    "@zag-js/tags-input": "0.30.0",
-    "@zag-js/toast": "0.30.0",
-    "@zag-js/toggle-group": "0.30.0",
-    "@zag-js/tooltip": "0.30.0",
-    "@zag-js/types": "0.30.0"
+    "@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/combobox": "0.32.1",
+    "@zag-js/date-picker": "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/select": "0.32.1",
+    "@zag-js/slider": "0.32.1",
+    "@zag-js/solid": "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",
-    "@solidjs/testing-library": "0.8.4",
-    "@storybook/addon-essentials": "7.5.3",
-    "@storybook/addon-interactions": "7.5.3",
-    "@storybook/addon-links": "7.5.3",
-    "@storybook/blocks": "7.5.3",
+    "@solidjs/testing-library": "0.8.5",
+    "@storybook/addon-essentials": "7.6.8",
+    "@storybook/addon-interactions": "7.6.8",
+    "@storybook/addon-links": "7.6.8",
+    "@storybook/blocks": "7.6.8",
     "@storybook/testing-library": "0.2.2",
-    "@testing-library/dom": "9.3.3",
-    "@testing-library/jest-dom": "6.1.4",
-    "@testing-library/user-event": "14.5.1",
+    "@testing-library/dom": "9.3.4",
+    "@testing-library/jest-dom": "6.2.0",
+    "@testing-library/user-event": "14.5.2",
     "@types/jsdom": "21.1.6",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "6.12.0",
-    "@typescript-eslint/parser": "6.12.0",
+    "@typescript-eslint/eslint-plugin": "6.18.1",
+    "@typescript-eslint/parser": "6.18.1",
     "@vitest/coverage-v8": "0.34.6",
-    "eslint": "8.54.0",
+    "eslint": "8.56.0",
+    "eslint-plugin-jest-dom": "5.1.0",
+    "eslint-plugin-testing-library": "6.2.0",
     "globby": "14.0.0",
-    "jsdom": "22.1.0",
-    "lucide-solid": "0.292.0",
+    "jsdom": "23.0.1",
+    "lucide-solid": "0.309.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "release-it": "17.0.0",
+    "release-it": "17.0.1",
     "resize-observer-polyfill": "1.5.1",
-    "rollup": "4.5.0",
+    "rollup": "4.9.5",
     "rollup-preset-solid": "2.0.1",
-    "solid-js": "1.8.5",
-    "storybook": "7.5.3",
+    "solid-js": "1.8.11",
+    "storybook": "7.6.8",
     "storybook-solidjs": "1.0.0-beta.2",
     "storybook-solidjs-vite": "1.0.0-beta.2",
-    "typescript": "5.3.2",
-    "vite": "4.5.0",
-    "vite-plugin-solid": "2.7.2",
+    "typescript": "5.3.3",
+    "vite": "5.0.11",
+    "vite-plugin-solid": "2.8.0",
     "vitest": "0.34.2"
   },
   "peerDependencies": {

package/source/combobox/use-combobox.js

@@ -10,10 +10,10 @@ export const useCombobox = (props) => {
         'itemToString',
         'items',
     ]);
-    const collection = combobox.collection(collectionOptions);
+    const collection = () => combobox.collection(collectionOptions);
     const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), getRootNode, collection }, rest);
-    const [state, send] = useMachine(combobox.machine(context), {
+    const context = () => mergeProps({ id: createUniqueId(), getRootNode, collection: collection() }, rest);
+    const [state, send] = useMachine(combobox.machine(context()), {
         context,
     });
     return createMemo(() => combobox.connect(state, send, normalizeProps));

package/source/date-picker/date-picker.jsx

@@ -21,7 +21,6 @@ export const DatePicker = (props) => {
         'isDateUnavailable',
         'locale',
         'max',
-        'messages',
         'min',
         'modal',
         'name',
@@ -37,6 +36,7 @@ export const DatePicker = (props) => {
         'selectionMode',
         'startOfWeek',
         'timeZone',
+        'translations',
         'value',
         'view',
     ]);

package/source/editable/editable-area.jsx

@@ -2,7 +2,7 @@ import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
 import { useEditableContext } from './editable-context';
 export const EditableArea = (props) => {
-    const editable = useEditableContext();
-    const mergedProps = mergeProps(() => editable().areaProps, props);
+    const api = useEditableContext();
+    const mergedProps = mergeProps(() => api().areaProps, props);
     return <ark.div {...mergedProps}/>;
 };

package/source/editable/editable-cancel-trigger.jsx

@@ -2,7 +2,7 @@ import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
 import { useEditableContext } from './editable-context';
 export const EditableCancelTrigger = (props) => {
-    const editable = useEditableContext();
-    const mergedProps = mergeProps(() => editable().cancelTriggerProps, props);
+    const api = useEditableContext();
+    const mergedProps = mergeProps(() => api().cancelTriggerProps, props);
     return <ark.button {...mergedProps}/>;
 };

package/source/editable/editable-control.jsx

@@ -2,7 +2,7 @@ import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
 import { useEditableContext } from './editable-context';
 export const EditableControl = (props) => {
-    const editable = useEditableContext();
-    const mergedProps = mergeProps(() => editable().controlProps, props);
+    const api = useEditableContext();
+    const mergedProps = mergeProps(() => api().controlProps, props);
     return <ark.div {...mergedProps}/>;
 };

package/source/editable/editable-edit-trigger.jsx

@@ -2,7 +2,7 @@ import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
 import { useEditableContext } from './editable-context';
 export const EditableEditTrigger = (props) => {
-    const editable = useEditableContext();
-    const mergedProps = mergeProps(() => editable().editTriggerProps, props);
+    const api = useEditableContext();
+    const mergedProps = mergeProps(() => api().editTriggerProps, props);
     return <ark.button {...mergedProps}/>;
 };

package/source/editable/editable-input.jsx

@@ -2,7 +2,7 @@ import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
 import { useEditableContext } from './editable-context';
 export const EditableInput = (props) => {
-    const editable = useEditableContext();
-    const mergedProps = mergeProps(() => editable().inputProps, props);
+    const api = useEditableContext();
+    const mergedProps = mergeProps(() => api().inputProps, props);
     return <ark.input {...mergedProps}/>;
 };

package/source/editable/editable-label.jsx

@@ -2,7 +2,7 @@ import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
 import { useEditableContext } from './editable-context';
 export const EditableLabel = (props) => {
-    const editable = useEditableContext();
-    const mergedProps = mergeProps(() => editable().labelProps, props);
+    const api = useEditableContext();
+    const mergedProps = mergeProps(() => api().labelProps, props);
     return <ark.label {...mergedProps}/>;
 };

package/source/editable/editable-preview.jsx

@@ -2,7 +2,7 @@ import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
 import { useEditableContext } from './editable-context';
 export const EditablePreview = (props) => {
-    const editable = useEditableContext();
-    const mergedProps = mergeProps(() => editable().previewProps, props);
+    const api = useEditableContext();
+    const mergedProps = mergeProps(() => api().previewProps, props);
     return <ark.span {...mergedProps}/>;
 };

package/source/editable/editable-submit-trigger.jsx

@@ -2,7 +2,7 @@ import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
 import { useEditableContext } from './editable-context';
 export const EditableSubmitTrigger = (props) => {
-    const dialog = useEditableContext();
-    const mergedProps = mergeProps(() => dialog().submitTriggerProps, props);
+    const api = useEditableContext();
+    const mergedProps = mergeProps(() => api().submitTriggerProps, props);
     return <ark.button {...mergedProps}/>;
 };

package/source/editable/editable.jsx

@@ -1,12 +1,11 @@
 import { mergeProps } from '@zag-js/solid';
-import { splitProps } from 'solid-js';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
 import { runIfFn } from '../run-if-fn';
 import { EditableProvider } from './editable-context';
 import { useEditable } from './use-editable';
 export const Editable = (props) => {
-    const [useEditableProps, restProps] = createSplitProps()(props, [
+    const [useEditableProps, localProps] = createSplitProps()(props, [
         'activationMode',
         'autoResize',
         'dir',
@@ -34,11 +33,10 @@ export const Editable = (props) => {
         'translations',
         'value',
     ]);
-    const editable = useEditable(useEditableProps);
-    const [childrenProps, localProps] = splitProps(restProps, ['children']);
-    const mergedProps = mergeProps(() => editable().rootProps, localProps);
-    const getChildren = () => runIfFn(childrenProps.children, editable);
-    return (<EditableProvider value={editable}>
+    const api = useEditable(useEditableProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const getChildren = () => runIfFn(localProps.children, api);
+    return (<EditableProvider value={api}>
       <ark.div {...mergedProps}>{getChildren()}</ark.div>
     </EditableProvider>);
 };

package/source/factory.jsx

@@ -13,7 +13,7 @@ function withAsChild(Component) {
         const getChildren = children(() => ssrSpread(localProps.children, restProps));
         createEffect(() => {
             const children = getChildren();
-            if (children instanceof HTMLElement) {
+            if (children instanceof HTMLElement || children instanceof SVGElement) {
                 spread(children, restProps);
             }
         });

package/source/file-upload/file-upload-item-preview-image.jsx

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSignal } from 'solid-js';
+import { ark } from '../factory';
+import { useFileUploadContext } from './file-upload-context';
+import { useFileUploadItemContext } from './file-upload-item-context';
+export const FileUploadItemPreviewImage = (props) => {
+    const api = useFileUploadContext();
+    const item = useFileUploadItemContext();
+    const [url, setUrl] = createSignal('');
+    api().createFileUrl(item.file, (url) => setUrl(url));
+    const mergedProps = mergeProps(api().getItemPreviewImageProps({ ...item, url: url() }), props);
+    return <ark.img {...mergedProps}/>;
+};

package/source/file-upload/file-upload-item-preview.jsx

@@ -1,19 +1,12 @@
 import { mergeProps } from '@zag-js/solid';
-import { createSignal } from 'solid-js';
 import { ark } from '../factory';
 import { useFileUploadContext } from './file-upload-context';
 import { useFileUploadItemContext } from './file-upload-item-context';
 export const FileUploadItemPreview = (props) => {
     const api = useFileUploadContext();
     const item = useFileUploadItemContext();
-    const [url, setUrl] = createSignal('');
-    api().createFileUrl(item.file, (url) => setUrl(url));
-    try {
-        const mergedProps = mergeProps(api().getItemPreviewProps({ ...item, url: url() }), props);
-        return <ark.img {...mergedProps}/>;
-    }
-    catch (e) {
-        // TODO We could render a fallback component
+    const mergedProps = mergeProps(() => api().getItemPreviewProps(item), props);
+    if (!item.file.type.match(props.type ?? '.*'))
         return null;
-    }
+    return <ark.div {...mergedProps}/>;
 };

package/source/file-upload/file-upload.jsx

@@ -13,13 +13,17 @@ export const FileUpload = (props) => {
         'files',
         'getRootNode',
         'id',
-        'isValidFile',
+        'ids',
         'locale',
         'maxFiles',
         'maxFileSize',
         'minFileSize',
         'name',
+        'onFileAccept',
+        'onFileReject',
         'onFilesChange',
+        'translations',
+        'validate',
     ]);
     const api = useFileUpload(fileUploadProps);
     const mergedProps = mergeProps(() => api().rootProps, localProps);

package/source/file-upload/index.js

@@ -6,19 +6,21 @@ import { FileUploadItemDeleteTrigger, } from './file-upload-item-delete-trigger'
 import { FileUploadItemGroup } from './file-upload-item-group';
 import { FileUploadItemName } from './file-upload-item-name';
 import { FileUploadItemPreview } from './file-upload-item-preview';
+import { FileUploadItemPreviewImage, } from './file-upload-item-preview-image';
 import { FileUploadItemSizeText, } from './file-upload-item-size-text';
 import { FileUploadLabel } from './file-upload-label';
 import { FileUploadTrigger } from './file-upload-trigger';
 const FileUpload = Object.assign(FileUploadRoot, {
     Root: FileUploadRoot,
     Dropzone: FileUploadDropzone,
-    Label: FileUploadLabel,
-    Trigger: FileUploadTrigger,
-    ItemGroup: FileUploadItemGroup,
     Item: FileUploadItem,
+    ItemDeleteTrigger: FileUploadItemDeleteTrigger,
+    ItemGroup: FileUploadItemGroup,
     ItemName: FileUploadItemName,
     ItemPreview: FileUploadItemPreview,
+    ItemPreviewImage: FileUploadItemPreviewImage,
     ItemSizeText: FileUploadItemSizeText,
-    ItemDeleteTrigger: FileUploadItemDeleteTrigger,
+    Label: FileUploadLabel,
+    Trigger: FileUploadTrigger,
 });
-export { FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreview, FileUploadItemSizeText, FileUploadLabel, FileUploadTrigger, useFileUploadContext, };
+export { FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadTrigger, useFileUploadContext, };

package/source/index.jsx

@@ -17,6 +17,7 @@ export * from './pagination';
 export * from './pin-input';
 export * from './popover';
 export * from './presence';
+export * from './progress';
 export * from './radio-group';
 export * from './rating-group';
 export * from './segment-group';

package/source/number-input/index.js

@@ -2,8 +2,8 @@ import { NumberInput as NumberInputRoot } from './number-input';
 import { useNumberInputContext } from './number-input-context';
 import { NumberInputControl } from './number-input-control';
 import { NumberInputDecrementTrigger, } from './number-input-decrement-trigger';
-import { NumberInputInput } from './number-input-field';
 import { NumberInputIncrementTrigger, } from './number-input-increment-trigger';
+import { NumberInputInput } from './number-input-input';
 import { NumberInputLabel } from './number-input-label';
 import { NumberInputScrubber } from './number-input-scrubber';
 const NumberInput = Object.assign(NumberInputRoot, {

package/source/pagination/pagination-ellipsis.jsx

@@ -3,8 +3,8 @@ import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
 import { usePaginationContext } from './pagination-context';
 export const PaginationEllipsis = (props) => {
-    const [ellipsisProps, restProps] = createSplitProps()(props, ['index']);
+    const [ellipsisProps, localProps] = createSplitProps()(props, ['index']);
     const api = usePaginationContext();
-    const mergedProps = mergeProps(() => api().getEllipsisProps(ellipsisProps), restProps);
+    const mergedProps = mergeProps(() => api().getEllipsisProps(ellipsisProps), localProps);
     return <ark.div {...mergedProps}/>;
 };

package/source/pagination/pagination.jsx

@@ -1,12 +1,11 @@
 import { mergeProps } from '@zag-js/solid';
-import { splitProps } from 'solid-js';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
 import { runIfFn } from '../run-if-fn';
 import { PaginationProvider } from './pagination-context';
 import { usePagination } from './use-pagination';
 export const Pagination = (props) => {
-    const [paginationParams, restProps] = createSplitProps()(props, [
+    const [paginationParams, localProps] = createSplitProps()(props, [
         'count',
         'dir',
         'getRootNode',
@@ -19,10 +18,9 @@ export const Pagination = (props) => {
         'translations',
         'type',
     ]);
-    const [childrenProps, localProps] = splitProps(restProps, ['children']);
     const api = usePagination(paginationParams);
-    const getChildren = () => runIfFn(childrenProps.children, api);
     const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const getChildren = () => runIfFn(localProps.children, api);
     return (<PaginationProvider value={api}>
       <ark.nav {...mergedProps}>{getChildren()}</ark.nav>
     </PaginationProvider>);

package/source/pin-input/index.js

@@ -1,7 +1,7 @@
 import { PinInput as PinInputRoot } from './pin-input';
 import { usePinInputContext } from './pin-input-context';
 import { PinInputControl } from './pin-input-control';
-import { PinInputInput } from './pin-input-field';
+import { PinInputInput } from './pin-input-input';
 import { PinInputLabel } from './pin-input-label';
 const PinInput = Object.assign(PinInputRoot, {
     Root: PinInputRoot,

package/source/pin-input/pin-input.jsx

@@ -4,7 +4,7 @@ import { ark } from '../factory';
 import { PinInputProvider } from './pin-input-context';
 import { usePinInput } from './use-pin-input';
 export const PinInput = (props) => {
-    const [pinInputProps, localProps] = createSplitProps()(props, [
+    const [usePinInputProps, localProps] = createSplitProps()(props, [
         'autoFocus',
         'blurOnComplete',
         'dir',
@@ -27,7 +27,7 @@ export const PinInput = (props) => {
         'type',
         'value',
     ]);
-    const api = usePinInput(pinInputProps);
+    const api = usePinInput(usePinInputProps);
     const mergedProps = mergeProps(() => api().rootProps, localProps);
     return (<PinInputProvider value={api}>
       <ark.div {...mergedProps}/>

package/source/popover/popover-description.jsx

@@ -4,5 +4,5 @@ import { usePopoverContext } from './popover-context';
 export const PopoverDescription = (props) => {
     const api = usePopoverContext();
     const mergedProps = mergeProps(() => api().descriptionProps, props);
-    return <ark.div {...mergedProps}/>;
+    return <ark.p {...mergedProps}/>;
 };

package/source/progress/index.js

@@ -0,0 +1,22 @@
+import { Progress as ProgressRoot } from './progress';
+import { ProgressCircle } from './progress-circle';
+import { ProgressCircleRange } from './progress-circle-range';
+import { ProgressCircleTrack } from './progress-circle-track';
+import { useProgressContext } from './progress-context';
+import { ProgressIndicator } from './progress-indicator';
+import { ProgressLabel } from './progress-label';
+import { ProgressRange } from './progress-range';
+import { ProgressTrack } from './progress-track';
+import { ProgressValueText } from './progress-value-text';
+const Progress = Object.assign(ProgressRoot, {
+    Root: ProgressRoot,
+    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, useProgressContext, };

package/source/progress/progress-circle-range.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useProgressContext } from './progress-context';
+export const ProgressCircleRange = (props) => {
+    const api = useProgressContext();
+    const mergedProps = mergeProps(() => api().circleRangeProps, props);
+    return <ark.circle {...mergedProps}/>;
+};

package/source/progress/progress-circle-track.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useProgressContext } from './progress-context';
+export const ProgressCircleTrack = (props) => {
+    const api = useProgressContext();
+    const mergedProps = mergeProps(() => api().circleTrackProps, props);
+    return <ark.circle {...mergedProps}/>;
+};

package/source/progress/progress-circle.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useProgressContext } from './progress-context';
+export const ProgressCircle = (props) => {
+    const api = useProgressContext();
+    const mergedProps = mergeProps(() => api().circleProps, props);
+    return <ark.svg {...mergedProps}/>;
+};

package/source/progress/progress-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [ProgressProvider, useProgressContext] = createContext({
+    hookName: 'useProgressContext',
+    providerName: '<ProgressProvider />',
+});

package/source/progress/progress-indicator.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useProgressContext } from './progress-context';
+export const ProgressIndicator = (props) => {
+    const [state, localProps] = createSplitProps()(props, ['state']);
+    const api = useProgressContext();
+    const mergedProps = mergeProps(() => api().getIndicatorProps(state), localProps);
+    return <ark.span {...mergedProps}/>;
+};

package/source/progress/progress-label.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useProgressContext } from './progress-context';
+export const ProgressLabel = (props) => {
+    const api = useProgressContext();
+    const mergedProps = mergeProps(() => api().labelProps, props);
+    return <ark.label {...mergedProps}/>;
+};

package/source/progress/progress-range.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useProgressContext } from './progress-context';
+export const ProgressRange = (props) => {
+    const api = useProgressContext();
+    const mergedProps = mergeProps(() => api().rangeProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/progress/progress-track.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useProgressContext } from './progress-context';
+export const ProgressTrack = (props) => {
+    const api = useProgressContext();
+    const mergedProps = mergeProps(() => api().trackProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/progress/progress-value-text.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { useProgressContext } from './progress-context';
+export const ProgressValueText = (props) => {
+    const api = useProgressContext();
+    const mergedProps = mergeProps(() => api().valueTextProps, props);
+    const getChildren = () => runIfFn(props.children, () => api().valueAsString);
+    return <ark.span {...mergedProps}>{getChildren() || api().valueAsString}</ark.span>;
+};

package/source/progress/progress.jsx

@@ -0,0 +1,24 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { ProgressProvider } from './progress-context';
+import { useProgress } from './use-progress';
+export const Progress = (props) => {
+    const [progressProps, localProps] = createSplitProps()(props, [
+        'dir',
+        'getRootNode',
+        'id',
+        'max',
+        'min',
+        'orientation',
+        'translations',
+        'value',
+    ]);
+    const api = useProgress(progressProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const getChildren = () => runIfFn(localProps.children, api);
+    return (<ProgressProvider value={api}>
+      <ark.div {...mergedProps}>{getChildren()}</ark.div>
+    </ProgressProvider>);
+};