@ark-ui/solid 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/solid",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -80,71 +80,73 @@
     "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.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/combobox": "0.31.1",
+    "@zag-js/date-picker": "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/select": "0.31.1",
+    "@zag-js/slider": "0.31.1",
+    "@zag-js/solid": "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"
   },
   "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",
+    "@storybook/addon-essentials": "7.6.4",
+    "@storybook/addon-interactions": "7.6.4",
+    "@storybook/addon-links": "7.6.4",
+    "@storybook/blocks": "7.6.4",
     "@storybook/testing-library": "0.2.2",
     "@testing-library/dom": "9.3.3",
-    "@testing-library/jest-dom": "6.1.4",
+    "@testing-library/jest-dom": "6.1.5",
     "@testing-library/user-event": "14.5.1",
     "@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.14.0",
+    "@typescript-eslint/parser": "6.14.0",
     "@vitest/coverage-v8": "0.34.6",
-    "eslint": "8.54.0",
+    "eslint": "8.55.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.294.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.0",
     "rollup-preset-solid": "2.0.1",
-    "solid-js": "1.8.5",
-    "storybook": "7.5.3",
+    "solid-js": "1.8.7",
+    "storybook": "7.6.4",
     "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.8",
+    "vite-plugin-solid": "2.8.0",
     "vitest": "0.34.2"
   },
   "peerDependencies": {

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/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/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/radio-group/radio-group-item-context.js

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

package/source/radio-group/radio-group-item.jsx

@@ -1,17 +1,20 @@
 import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
 import { useRadioGroupContext } from './radio-group-context';
-import { RadioProvider } from './radio-group-item-context';
+import { RadioGroupItemProvider } from './radio-group-item-context';
 export const RadioGroupItem = (props) => {
-    const [itemProps, restProps] = createSplitProps()(props, [
+    const [itemProps, localProps] = createSplitProps()(props, [
         'value',
         'disabled',
         'invalid',
     ]);
     const api = useRadioGroupContext();
-    const mergedProps = mergeProps(() => api().getItemProps(itemProps), restProps);
-    return (<RadioProvider value={itemProps}>
-      <ark.label {...mergedProps}/>
-    </RadioProvider>);
+    const mergedProps = mergeProps(() => api().getItemProps(itemProps), localProps);
+    const itemState = api().getItemState(itemProps);
+    const getChildren = () => runIfFn(localProps.children, itemState);
+    return (<RadioGroupItemProvider value={itemProps}>
+      <ark.label {...mergedProps}>{getChildren()}</ark.label>
+    </RadioGroupItemProvider>);
 };

package/source/rating-group/rating-group-control.jsx

@@ -4,8 +4,8 @@ import { runIfFn } from '../run-if-fn';
 import { useRatingGroupContext } from './rating-group-context';
 export const RatingGroupControl = (props) => {
     const api = useRatingGroupContext();
-    const getChildren = () => runIfFn(props.children, api);
     const mergedProps = mergeProps(() => api().controlProps, props);
+    const getChildren = () => runIfFn(props.children, api);
     return (<>
       <ark.div {...mergedProps}>{getChildren()}</ark.div>
       <input {...api().hiddenInputProps}/>

package/source/rating-group/rating-group-item.jsx

@@ -8,10 +8,10 @@ import { RatingGroupItemProvider } from './rating-group-item-context';
 export const RatingGroupItem = (props) => {
     const [itemProps, localProps] = createSplitProps()(props, ['index']);
     const api = useRatingGroupContext();
+    const mergedProps = mergeProps(() => api().getItemProps(itemProps), localProps);
     const itemState = createMemo(() => api().getItemState(itemProps));
     const getChildren = () => runIfFn(localProps.children, itemState);
-    const mergedProps = mergeProps(() => api().getItemProps(itemProps), localProps);
-    return (<RatingGroupItemProvider value={itemState}>
+    return (<RatingGroupItemProvider value={itemProps}>
       <ark.span {...mergedProps}>{getChildren()}</ark.span>
     </RatingGroupItemProvider>);
 };

package/source/rating-group/rating-group.jsx

@@ -4,7 +4,7 @@ import { ark } from '../factory';
 import { RatingGroupProvider } from './rating-group-context';
 import { useRatingGroup } from './use-rating-group';
 export const RatingGroup = (props) => {
-    const [ratingParams, localProps] = createSplitProps()(props, [
+    const [useRatingProps, localProps] = createSplitProps()(props, [
         'allowHalf',
         'autoFocus',
         'count',
@@ -21,7 +21,7 @@ export const RatingGroup = (props) => {
         'translations',
         'value',
     ]);
-    const api = useRatingGroup(ratingParams);
+    const api = useRatingGroup(useRatingProps);
     const mergedProps = mergeProps(() => api().rootProps, localProps);
     return (<RatingGroupProvider value={api}>
       <ark.div {...mergedProps}/>

package/source/segment-group/segment-group-item-context.js

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

package/source/segment-group/segment-group-item.jsx

@@ -2,17 +2,20 @@ import { segmentGroupAnatomy } from '@ark-ui/anatomy';
 import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
 import { useSegmentGroupContext } from './segment-group-context';
-import { SegmentProvider } from './segment-group-item-context';
+import { SegmentGroupItemProvider, } from './segment-group-item-context';
 export const SegmentGroupItem = (props) => {
-    const [itemProps, restProps] = createSplitProps()(props, [
+    const [itemProps, localProps] = createSplitProps()(props, [
         'value',
         'disabled',
         'invalid',
     ]);
     const api = useSegmentGroupContext();
-    const mergedProps = mergeProps(() => api().getItemProps(itemProps), segmentGroupAnatomy.build().item.attrs, restProps);
-    return (<SegmentProvider value={itemProps}>
-      <ark.label {...mergedProps}/>
-    </SegmentProvider>);
+    const mergedProps = mergeProps(() => api().getItemProps(itemProps), segmentGroupAnatomy.build().item.attrs, localProps);
+    const itemState = api().getItemState(itemProps);
+    const getChildren = () => runIfFn(localProps.children, itemState);
+    return (<SegmentGroupItemProvider value={itemProps}>
+      <ark.label {...mergedProps}>{getChildren()}</ark.label>
+    </SegmentGroupItemProvider>);
 };

package/source/select/select-indicator.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useSelectContext } from './select-context';
 export const SelectIndicator = (props) => {
     const api = useSelectContext();
-    const mergedProps = mergeProps(() => api().controlProps, props);
+    const mergedProps = mergeProps(() => api().indicatorProps, props);
     return <ark.div {...mergedProps}/>;
 };

package/source/select/select-item-group.jsx

@@ -3,8 +3,8 @@ import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
 import { useSelectContext } from './select-context';
 export const SelectItemGroup = (props) => {
-    const [groupProps, localProps] = createSplitProps()(props, ['id']);
+    const [itemGroupProps, localProps] = createSplitProps()(props, ['id']);
     const api = useSelectContext();
-    const mergedProps = mergeProps(() => api().getItemGroupProps(groupProps), localProps);
+    const mergedProps = mergeProps(() => api().getItemGroupProps(itemGroupProps), localProps);
     return <ark.div {...mergedProps}/>;
 };

package/source/select/select.jsx

@@ -37,11 +37,11 @@ export const Select = (props) => {
         'value',
     ]);
     const api = useSelect(useSelectProps);
-    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().isOpen })));
+    const presenceApi = usePresence(mergeProps(() => ({ present: api().isOpen }), presenceProps));
     const mergedProps = mergeProps(() => api().rootProps, localProps);
     const getChildren = () => runIfFn(localProps.children, api);
     return (<SelectProvider value={api}>
-      <PresenceProvider value={apiPresence}>
+      <PresenceProvider value={presenceApi}>
         <ark.div {...mergedProps}>{getChildren()}</ark.div>
       </PresenceProvider>
     </SelectProvider>);

package/source/switch/switch-label.jsx

@@ -2,7 +2,7 @@ import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
 import { useSwitchContext } from './switch-context';
 export const SwitchLabel = (props) => {
-    const checkbox = useSwitchContext();
-    const mergedProps = mergeProps(() => checkbox().labelProps, props);
+    const api = useSwitchContext();
+    const mergedProps = mergeProps(() => api().labelProps, props);
     return <ark.span {...mergedProps}/>;
 };

package/source/switch/switch-thumb.jsx

@@ -2,7 +2,7 @@ import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
 import { useSwitchContext } from './switch-context';
 export const SwitchThumb = (props) => {
-    const checkbox = useSwitchContext();
-    const mergedProps = mergeProps(() => checkbox().thumbProps, props);
+    const api = useSwitchContext();
+    const mergedProps = mergeProps(() => api().thumbProps, props);
     return <ark.span {...mergedProps}/>;
 };