@ark-ui/solid 3.12.1 → 4.0.0

package/dist/source/components/accordion/index.js

@@ -6,8 +6,8 @@ export { AccordionItemIndicator, } from './accordion-item-indicator';
 export { AccordionItemTrigger, } from './accordion-item-trigger';
 export { AccordionRoot, } from './accordion-root';
 export { AccordionRootProvider, } from './accordion-root-provider';
+export { accordionAnatomy } from './accordion.anatomy';
 export { useAccordion } from './use-accordion';
 export { useAccordionContext } from './use-accordion-context';
 export { useAccordionItemContext } from './use-accordion-item-context';
-export { accordionAnatomy } from './accordion.anatomy';
 export * as Accordion from './accordion';

package/dist/source/components/carousel/index.js

@@ -9,7 +9,7 @@ export { CarouselPrevTrigger, } from './carousel-prev-trigger';
 export { CarouselRoot, } from './carousel-root';
 export { CarouselRootProvider, } from './carousel-root-provider';
 export { CarouselViewport, } from './carousel-viewport';
+export { carouselAnatomy } from './carousel.anatomy';
 export { useCarousel } from './use-carousel';
 export { useCarouselContext } from './use-carousel-context';
-export { carouselAnatomy } from './carousel.anatomy';
 export * as Carousel from './carousel';

package/dist/source/components/checkbox/index.js

@@ -6,9 +6,9 @@ export { CheckboxIndicator, } from './checkbox-indicator';
 export { CheckboxLabel, } from './checkbox-label';
 export { CheckboxRoot, } from './checkbox-root';
 export { CheckboxRootProvider, } from './checkbox-root-provider';
+export { checkboxAnatomy } from './checkbox.anatomy';
 export { useCheckbox } from './use-checkbox';
 export { useCheckboxContext } from './use-checkbox-context';
 export { useCheckboxGroup, } from './use-checkbox-group';
 export { useCheckboxGroupContext } from './use-checkbox-group-context';
-export { checkboxAnatomy } from './checkbox.anatomy';
 export * as Checkbox from './checkbox';

package/dist/source/components/clipboard/index.js

@@ -6,7 +6,7 @@ export { ClipboardLabel, } from './clipboard-label';
 export { ClipboardRoot, } from './clipboard-root';
 export { ClipboardRootProvider, } from './clipboard-root-provider';
 export { ClipboardTrigger, } from './clipboard-trigger';
+export { clipboardAnatomy } from './clipboard.anatomy';
 export { useClipboard } from './use-clipboard';
 export { useClipboardContext } from './use-clipboard-context';
-export { clipboardAnatomy } from './clipboard.anatomy';
 export * as Clipboard from './clipboard';

package/dist/source/components/collapsible/index.js

@@ -3,7 +3,7 @@ export { CollapsibleContext, } from './collapsible-context';
 export { CollapsibleRoot, } from './collapsible-root';
 export { CollapsibleRootProvider, } from './collapsible-root-provider';
 export { CollapsibleTrigger, } from './collapsible-trigger';
+export { collapsibleAnatomy } from './collapsible.anatomy';
 export { useCollapsible, } from './use-collapsible';
 export { useCollapsibleContext } from './use-collapsible-context';
-export { collapsibleAnatomy } from './collapsible.anatomy';
 export * as Collapsible from './collapsible';

package/dist/source/components/collection.js

@@ -0,0 +1,3 @@
+import { ListCollection } from '@zag-js/collection';
+import { ref } from '@zag-js/core';
+export const createListCollection = (options) => ref(new ListCollection(options));

package/dist/source/components/color-picker/index.js

@@ -1,3 +1,4 @@
+export { parse as parseColor } from '@zag-js/color-picker';
 export { ColorPickerArea, } from './color-picker-area';
 export { ColorPickerAreaBackground, } from './color-picker-area-background';
 export { ColorPickerAreaThumb, } from './color-picker-area-thumb';
@@ -27,7 +28,7 @@ export { ColorPickerTrigger, } from './color-picker-trigger';
 export { ColorPickerValueSwatch, } from './color-picker-value-swatch';
 export { ColorPickerValueText, } from './color-picker-value-text';
 export { ColorPickerView, } from './color-picker-view';
+export { colorPickerAnatomy } from './color-picker.anatomy';
 export { useColorPicker, } from './use-color-picker';
 export { useColorPickerContext } from './use-color-picker-context';
-export { colorPickerAnatomy } from './color-picker.anatomy';
 export * as ColorPicker from './color-picker';

package/dist/source/components/color-picker/use-color-picker.js

@@ -21,12 +21,8 @@ export const useColorPicker = (props) => {
         getRootNode: environment().getRootNode,
         open: props.defaultOpen,
         'open.controlled': props.open !== undefined,
+        value: props.defaultValue,
         ...props,
-        value: props.value
-            ? colorPicker.parse(props.value)
-            : props.defaultValue
-                ? colorPicker.parse(props.defaultValue)
-                : undefined,
     }));
     const [state, send] = useMachine(colorPicker.machine(context()), { context });
     return createMemo(() => colorPicker.connect(state, send, normalizeProps));

package/dist/source/components/combobox/combobox-root.jsx

@@ -10,6 +10,7 @@ export const ComboboxRoot = (props) => {
         'allowCustomValue',
         'autoFocus',
         'closeOnSelect',
+        'collection',
         'composite',
         'defaultOpen',
         'defaultValue',
@@ -23,10 +24,6 @@ export const ComboboxRoot = (props) => {
         'inputBehavior',
         'inputValue',
         'invalid',
-        'isItemDisabled',
-        'items',
-        'itemToString',
-        'itemToValue',
         'loopFocus',
         'multiple',
         'name',

package/dist/source/components/combobox/index.js

@@ -1,3 +1,4 @@
+export { createListCollection } from '../collection';
 export { ComboboxClearTrigger, } from './combobox-clear-trigger';
 export { ComboboxContent, } from './combobox-content';
 export { ComboboxContext, } from './combobox-context';
@@ -15,8 +16,8 @@ export { ComboboxPositioner, } from './combobox-positioner';
 export { ComboboxRoot, } from './combobox-root';
 export { ComboboxRootProvider, } from './combobox-root-provider';
 export { ComboboxTrigger, } from './combobox-trigger';
+export { comboboxAnatomy } from './combobox.anatomy';
 export { useCombobox } from './use-combobox';
 export { useComboboxContext } from './use-combobox-context';
 export { useComboboxItemContext } from './use-combobox-item-context';
-export { comboboxAnatomy } from './combobox.anatomy';
 export * as Combobox from './combobox';

package/dist/source/components/combobox/use-combobox.js

@@ -1,22 +1,14 @@
 import * as combobox from '@zag-js/combobox';
 import { normalizeProps, useMachine } from '@zag-js/solid';
-import { createMemo, createUniqueId } from 'solid-js';
+import { createEffect, createMemo, createUniqueId, splitProps } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
-import { createSplitProps } from '../../utils/create-split-props';
 import { useFieldContext } from '../field';
 export const useCombobox = (props) => {
-    const [collectionOptions, comboboxProps] = createSplitProps()(props, [
-        'isItemDisabled',
-        'itemToValue',
-        'itemToString',
-        'items',
-    ]);
-    const collection = () => combobox.collection({ ...collectionOptions });
     const locale = useLocaleContext();
     const environment = useEnvironmentContext();
     const id = createUniqueId();
     const field = useFieldContext();
-    const context = createMemo(() => ({
+    const initialContext = createMemo(() => ({
         id,
         ids: {
             label: field?.().ids.label,
@@ -26,16 +18,22 @@ export const useCombobox = (props) => {
         readOnly: field?.().readOnly,
         required: field?.().required,
         invalid: field?.().invalid,
-        collection: collection(),
         dir: locale().dir,
         getRootNode: environment().getRootNode,
         open: props.defaultOpen,
         value: props.defaultValue,
         'open.controlled': props.open !== undefined,
-        ...comboboxProps,
+        ...props,
     }));
-    const [state, send] = useMachine(combobox.machine(context()), {
+    const context = createMemo(() => {
+        const [, restProps] = splitProps(initialContext(), ['collection']);
+        return restProps;
+    });
+    const [state, send, service] = useMachine(combobox.machine(initialContext()), {
         context,
     });
+    createEffect(() => {
+        service.setContext({ collection: props.collection });
+    });
     return createMemo(() => combobox.connect(state, send, normalizeProps));
 };

package/dist/source/components/date-picker/index.js

@@ -1,3 +1,4 @@
+export { parse as parseDate } from '@zag-js/date-picker';
 export { DatePickerClearTrigger, } from './date-picker-clear-trigger';
 export { DatePickerContent, } from './date-picker-content';
 export { DatePickerContext, } from './date-picker-context';
@@ -24,7 +25,7 @@ export { DatePickerView, } from './date-picker-view';
 export { DatePickerViewControl, } from './date-picker-view-control';
 export { DatePickerViewTrigger, } from './date-picker-view-trigger';
 export { DatePickerYearSelect, } from './date-picker-year-select';
+export { datePickerAnatomy } from './date-picker.anatomy';
 export { useDatePicker } from './use-date-picker';
 export { useDatePickerContext } from './use-date-picker-context';
-export { datePickerAnatomy } from './date-picker.anatomy';
 export * as DatePicker from './date-picker';

package/dist/source/components/date-picker/use-date-picker.js

@@ -10,17 +10,10 @@ export const useDatePicker = (props) => {
         id,
         dir: locale().dir,
         getRootNode: environment().getRootNode,
-        'open.controlled': props.open !== undefined,
         open: props.defaultOpen,
+        'open.controlled': props.open !== undefined,
+        value: props.defaultValue,
         ...props,
-        focusedValue: props.focusedValue ? datePicker.parse(props.focusedValue) : undefined,
-        value: props.value
-            ? datePicker.parse(props.value)
-            : props.defaultValue
-                ? datePicker.parse(props.defaultValue)
-                : undefined,
-        max: props.max ? datePicker.parse(props.max) : undefined,
-        min: props.min ? datePicker.parse(props.min) : undefined,
     }));
     const [state, send] = useMachine(datePicker.machine(context()), { context });
     return createMemo(() => datePicker.connect(state, send, normalizeProps));

package/dist/source/components/dialog/index.js

@@ -8,7 +8,7 @@ export { DialogRoot, } from './dialog-root';
 export { DialogRootProvider, } from './dialog-root-provider';
 export { DialogTitle, } from './dialog-title';
 export { DialogTrigger, } from './dialog-trigger';
+export { dialogAnatomy } from './dialog.anatomy';
 export { useDialog } from './use-dialog';
 export { useDialogContext } from './use-dialog-context';
-export { dialogAnatomy } from './dialog.anatomy';
 export * as Dialog from './dialog';

package/dist/source/components/editable/index.js

@@ -1,4 +1,3 @@
-;
 export { EditableArea, } from './editable-area';
 export { EditableCancelTrigger, } from './editable-cancel-trigger';
 export { EditableContext, } from './editable-context';
@@ -10,7 +9,7 @@ export { EditablePreview, } from './editable-preview';
 export { EditableRoot, } from './editable-root';
 export { EditableRootProvider, } from './editable-root-provider';
 export { EditableSubmitTrigger, } from './editable-submit-trigger';
+export { editableAnatomy } from './editable.anatomy';
 export { useEditable } from './use-editable';
 export { useEditableContext } from './use-editable-context';
-export { editableAnatomy } from './editable.anatomy';
 export * as Editable from './editable';

package/dist/source/components/field/index.js

@@ -3,10 +3,10 @@ export { FieldErrorText, } from './field-error-text';
 export { FieldHelperText, } from './field-helper-text';
 export { FieldInput } from './field-input';
 export { FieldLabel } from './field-label';
-export { FieldSelect } from './field-select';
 export { FieldRoot } from './field-root';
 export { FieldRootProvider, } from './field-root-provider';
+export { FieldSelect } from './field-select';
 export { FieldTextarea, } from './field-textarea';
-export { useFieldContext } from './use-field-context';
 export { fieldAnatomy } from './field.anatomy';
+export { useFieldContext } from './use-field-context';
 export * as Field from './field';

package/dist/source/components/fieldset/index.js

@@ -1,9 +1,9 @@
 export { FieldsetContext } from './fieldset-context';
 export { FieldsetErrorText, } from './fieldset-error-text';
 export { FieldsetHelperText, } from './fieldset-helper-text';
+export { FieldsetLegend, } from './fieldset-legend';
 export { FieldsetRoot } from './fieldset-root';
 export { FieldsetRootProvider, } from './fieldset-root-provider';
-export { FieldsetLegend, } from './fieldset-legend';
 export { fieldsetAnatomy } from './fieldset.anatomy';
 export { useFieldsetContext } from './use-fieldset-context';
 export * as Fieldset from './fieldset';

package/dist/source/components/file-upload/file-upload-clear-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useFileUploadContext } from './use-file-upload-context';
+export const FileUploadClearTrigger = (props) => {
+    const fileUpload = useFileUploadContext();
+    const mergedProps = mergeProps(() => fileUpload().getClearTriggerProps(), props);
+    return <ark.button {...mergedProps}/>;
+};

package/dist/source/components/file-upload/file-upload.js

@@ -1,5 +1,7 @@
+export { FileUploadClearTrigger as ClearTrigger, } from './file-upload-clear-trigger';
 export { FileUploadContext as Context, } from './file-upload-context';
 export { FileUploadDropzone as Dropzone, } from './file-upload-dropzone';
+export { FileUploadHiddenInput as HiddenInput, } from './file-upload-hidden-input';
 export { FileUploadItem as Item, } from './file-upload-item';
 export { FileUploadItemDeleteTrigger as ItemDeleteTrigger, } from './file-upload-item-delete-trigger';
 export { FileUploadItemGroup as ItemGroup, } from './file-upload-item-group';
@@ -11,4 +13,3 @@ export { FileUploadLabel as Label, } from './file-upload-label';
 export { FileUploadRoot as Root, } from './file-upload-root';
 export { FileUploadRootProvider as RootProvider, } from './file-upload-root-provider';
 export { FileUploadTrigger as Trigger, } from './file-upload-trigger';
-export { FileUploadHiddenInput as HiddenInput, } from './file-upload-hidden-input';

package/dist/source/components/file-upload/index.js

@@ -1,4 +1,5 @@
-export { FileUploadContext, } from './file-upload-context';
+export { FileUploadClearTrigger, } from './file-upload-clear-trigger';
+export { FileUploadContext } from './file-upload-context';
 export { FileUploadDropzone, } from './file-upload-dropzone';
 export { FileUploadHiddenInput, } from './file-upload-hidden-input';
 export { FileUploadItem, } from './file-upload-item';
@@ -12,7 +13,7 @@ export { FileUploadLabel, } from './file-upload-label';
 export { FileUploadRoot, } from './file-upload-root';
 export { FileUploadRootProvider, } from './file-upload-root-provider';
 export { FileUploadTrigger, } from './file-upload-trigger';
+export { fileUploadAnatomy } from './file-upload.anatomy';
 export { useFileUpload } from './use-file-upload';
 export { useFileUploadContext } from './use-file-upload-context';
-export { fileUploadAnatomy } from './file-upload.anatomy';
 export * as FileUpload from './file-upload';

package/dist/source/components/hover-card/index.js

@@ -6,7 +6,7 @@ export { HoverCardPositioner, } from './hover-card-positioner';
 export { HoverCardRoot, } from './hover-card-root';
 export { HoverCardRootProvider, } from './hover-card-root-provider';
 export { HoverCardTrigger, } from './hover-card-trigger';
+export { hoverCardAnatomy } from './hover-card.anatomy';
 export { useHoverCard } from './use-hover-card';
 export { useHoverCardContext } from './use-hover-card-context';
-export { hoverCardAnatomy } from './hover-card.anatomy';
 export * as HoverCard from './hover-card';

package/dist/source/components/menu/index.js

@@ -19,8 +19,8 @@ export { MenuRootProvider, } from './menu-root-provider';
 export { MenuSeparator, } from './menu-separator';
 export { MenuTrigger, } from './menu-trigger';
 export { MenuTriggerItem, } from './menu-trigger-item';
+export { menuAnatomy } from './menu.anatomy';
 export { useMenu } from './use-menu';
 export { useMenuContext } from './use-menu-context';
 export { useMenuItemContext } from './use-menu-item-context';
-export { menuAnatomy } from './menu.anatomy';
 export * as Menu from './menu';

package/dist/source/components/number-input/index.js

@@ -8,7 +8,7 @@ export { NumberInputRoot, } from './number-input-root';
 export { NumberInputRootProvider, } from './number-input-root-provider';
 export { NumberInputScrubber, } from './number-input-scrubber';
 export { NumberInputValueText, } from './number-input-value-text';
+export { numberInputAnatomy } from './number-input.anatomy';
 export { useNumberInput, } from './use-number-input';
 export { useNumberInputContext } from './use-number-input-context';
-export { numberInputAnatomy } from './number-input.anatomy';
 export * as NumberInput from './number-input';

package/dist/source/components/pagination/index.js

@@ -5,7 +5,7 @@ export { PaginationNextTrigger, } from './pagination-next-trigger';
 export { PaginationPrevTrigger, } from './pagination-prev-trigger';
 export { PaginationRoot, } from './pagination-root';
 export { PaginationRootProvider, } from './pagination-root-provider';
+export { paginationAnatomy } from './pagination.anatomy';
 export { usePagination } from './use-pagination';
 export { usePaginationContext } from './use-pagination-context';
-export { paginationAnatomy } from './pagination.anatomy';
 export * as Pagination from './pagination';

package/dist/source/components/pin-input/index.js

@@ -5,7 +5,7 @@ export { PinInputInput, } from './pin-input-input';
 export { PinInputLabel, } from './pin-input-label';
 export { PinInputRoot, } from './pin-input-root';
 export { PinInputRootProvider, } from './pin-input-root-provider';
+export { pinInputAnatomy } from './pin-input.anatomy';
 export { usePinInput } from './use-pin-input';
 export { usePinInputContext } from './use-pin-input-context';
-export { pinInputAnatomy } from './pin-input.anatomy';
 export * as PinInput from './pin-input';

package/dist/source/components/popover/index.js

@@ -11,7 +11,7 @@ export { PopoverRoot, } from './popover-root';
 export { PopoverRootProvider, } from './popover-root-provider';
 export { PopoverTitle, } from './popover-title';
 export { PopoverTrigger, } from './popover-trigger';
+export { popoverAnatomy } from './popover.anatomy';
 export { usePopover } from './use-popover';
 export { usePopoverContext } from './use-popover-context';
-export { popoverAnatomy } from './popover.anatomy';
 export * as Popover from './popover';

package/dist/source/components/progress/index.js

@@ -9,7 +9,7 @@ export { ProgressRootProvider, } from './progress-root-provider';
 export { ProgressTrack, } from './progress-track';
 export { ProgressValueText, } from './progress-value-text';
 export { ProgressView, } from './progress-view';
+export { progressAnatomy } from './progress.anatomy';
 export { useProgress } from './use-progress';
 export { useProgressContext } from './use-progress-context';
-export { progressAnatomy } from './progress.anatomy';
 export * as Progress from './progress';

package/dist/source/components/qr-code/index.js

@@ -4,7 +4,7 @@ export { QrCodeOverlay, } from './qr-code-overlay';
 export { QrCodePattern, } from './qr-code-pattern';
 export { QrCodeRoot, } from './qr-code-root';
 export { QrCodeRootProvider, } from './qr-code-root-provider';
+export { qrCodeAnatomy } from './qr-code.anatomy';
 export { useQrCode } from './use-qr-code';
 export { useQrCodeContext } from './use-qr-code-context';
-export { qrCodeAnatomy } from './qr-code.anatomy';
 export * as QrCode from './qr-code';

package/dist/source/components/qr-code/qr-code.js

@@ -1,4 +1,4 @@
-export { QrCodeContext } from './qr-code-context';
+export { QrCodeContext as Context, } from './qr-code-context';
 export { QrCodeFrame as Frame, } from './qr-code-frame';
 export { QrCodeOverlay as Overlay, } from './qr-code-overlay';
 export { QrCodePattern as Pattern, } from './qr-code-pattern';

package/dist/source/components/radio-group/index.js

@@ -8,8 +8,8 @@ export { RadioGroupItemText, } from './radio-group-item-text';
 export { RadioGroupLabel, } from './radio-group-label';
 export { RadioGroupRoot, } from './radio-group-root';
 export { RadioGroupRootProvider, } from './radio-group-root-provider';
+export { radioGroupAnatomy } from './radio-group.anatomy';
 export { useRadioGroup } from './use-radio-group';
 export { useRadioGroupContext } from './use-radio-group-context';
 export { useRadioGroupItemContext, } from './use-radio-group-item-context';
-export { radioGroupAnatomy } from './radio-group.anatomy';
 export * as RadioGroup from './radio-group';

package/dist/source/components/rating-group/index.js

@@ -6,8 +6,8 @@ export { RatingGroupItemContext, } from './rating-group-item-context';
 export { RatingGroupLabel, } from './rating-group-label';
 export { RatingGroupRoot, } from './rating-group-root';
 export { RatingGroupRootProvider, } from './rating-group-root-provider';
+export { ratingGroupAnatomy } from './rating-group.anatomy';
 export { useRatingGroup, } from './use-rating-group';
 export { useRatingGroupContext } from './use-rating-group-context';
 export { useRatingGroupItemContext, } from './use-rating-group-item-context';
-export { ratingGroupAnatomy } from './rating-group.anatomy';
 export * as RatingGroup from './rating-group';

package/dist/source/components/segment-group/index.js

@@ -8,8 +8,8 @@ export { SegmentGroupItemText, } from './segment-group-item-text';
 export { SegmentGroupLabel, } from './segment-group-label';
 export { SegmentGroupRoot, } from './segment-group-root';
 export { SegmentGroupRootProvider, } from './segment-group-root-provider';
+export { segmentGroupAnatomy } from './segment-group.anatomy';
 export { useSegmentGroup, } from './use-segment-group';
 export { useSegmentGroupContext } from './use-segment-group-context';
 export { useSegmentGroupItemContext, } from './use-segment-group-item-context';
-export { segmentGroupAnatomy } from './segment-group.anatomy';
 export * as SegmentGroup from './segment-group';

package/dist/source/components/select/index.js

@@ -1,3 +1,4 @@
+export { createListCollection } from '../collection';
 export { SelectClearTrigger, } from './select-clear-trigger';
 export { SelectContent, } from './select-content';
 export { SelectContext, } from './select-context';
@@ -17,8 +18,8 @@ export { SelectRoot, } from './select-root';
 export { SelectRootProvider, } from './select-root-provider';
 export { SelectTrigger, } from './select-trigger';
 export { SelectValueText, } from './select-value-text';
+export { selectAnatomy } from './select.anatomy';
 export { useSelect } from './use-select';
 export { useSelectContext } from './use-select-context';
 export { useSelectItemContext } from './use-select-item-context';
-export { selectAnatomy } from './select.anatomy';
 export * as Select from './select';

package/dist/source/components/select/select-root.jsx

@@ -9,18 +9,16 @@ export const SelectRoot = (props) => {
     const [useSelectProps, localProps] = createSplitProps()(selectProps, [
         'closeOnSelect',
         'composite',
+        'collection',
         'defaultOpen',
         'defaultValue',
+        'deselectable',
         'disabled',
         'form',
         'highlightedValue',
         'id',
         'ids',
         'invalid',
-        'isItemDisabled',
-        'items',
-        'itemToString',
-        'itemToValue',
         'loopFocus',
         'multiple',
         'name',

package/dist/source/components/select/use-select.js

@@ -2,16 +2,8 @@ import * as select from '@zag-js/select';
 import { normalizeProps, useMachine } from '@zag-js/solid';
 import { createEffect, createMemo, createUniqueId, splitProps } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
-import { createSplitProps } from '../../utils/create-split-props';
 import { useFieldContext } from '../field';
 export const useSelect = (props) => {
-    const [collectionOptions, selectProps] = createSplitProps()(props, [
-        'isItemDisabled',
-        'itemToValue',
-        'itemToString',
-        'items',
-    ]);
-    const collection = createMemo(() => select.collection({ ...collectionOptions }));
     const locale = useLocaleContext();
     const environment = useEnvironmentContext();
     const id = createUniqueId();
@@ -26,24 +18,22 @@ export const useSelect = (props) => {
         readOnly: field?.().readOnly,
         invalid: field?.().invalid,
         required: field?.().required,
-        collection: collection(),
         dir: locale().dir,
         getRootNode: environment().getRootNode,
         open: props.defaultOpen,
         value: props.defaultValue,
         'open.controlled': props.open !== undefined,
-        ...selectProps,
+        ...props,
     }));
     const context = createMemo(() => {
         const [, restProps] = splitProps(initialContext(), ['collection']);
         return restProps;
     });
-    const [state, send] = useMachine(select.machine(initialContext()), {
+    const [state, send, service] = useMachine(select.machine(initialContext()), {
         context,
     });
-    const api = createMemo(() => select.connect(state, send, normalizeProps));
     createEffect(() => {
-        api().setCollection(collection());
+        service.setContext({ collection: props.collection });
     });
-    return api;
+    return createMemo(() => select.connect(state, send, normalizeProps));
 };

package/dist/source/components/signature-pad/index.js

@@ -2,12 +2,12 @@ export { SignaturePadClearTrigger, } from './signature-pad-clear-trigger';
 export { SignaturePadContext, } from './signature-pad-context';
 export { SignaturePadControl, } from './signature-pad-control';
 export { SignaturePadGuide, } from './signature-pad-guide';
-export { SignaturePadLabel, } from './signature-pad-label';
 export { SignaturePadHiddenInput, } from './signature-pad-hidden-input';
+export { SignaturePadLabel, } from './signature-pad-label';
 export { SignaturePadRoot, } from './signature-pad-root';
 export { SignaturePadRootProvider, } from './signature-pad-root-provider';
 export { SignaturePadSegment, } from './signature-pad-segment';
+export { signaturePadAnatomy } from './signature-pad.anatomy';
 export { useSignaturePad, } from './use-signature-pad';
 export { useSignaturePadContext } from './use-signature-pad-context';
-export { signaturePadAnatomy } from './signature-pad.anatomy';
 export * as SignaturePad from './signature-pad';

package/dist/source/components/slider/index.js

@@ -10,7 +10,7 @@ export { SliderRootProvider, } from './slider-root-provider';
 export { SliderThumb, } from './slider-thumb';
 export { SliderTrack, } from './slider-track';
 export { SliderValueText, } from './slider-value-text';
+export { sliderAnatomy } from './slider.anatomy';
 export { useSlider } from './use-slider';
 export { useSliderContext } from './use-slider-context';
-export { sliderAnatomy } from './slider.anatomy';
 export * as Slider from './slider';

package/dist/source/components/splitter/index.js

@@ -3,7 +3,7 @@ export { SplitterPanel, } from './splitter-panel';
 export { SplitterResizeTrigger, } from './splitter-resize-trigger';
 export { SplitterRoot, } from './splitter-root';
 export { SplitterRootProvider, } from './splitter-root-provider';
+export { splitterAnatomy } from './splitter.anatomy';
 export { useSplitter } from './use-splitter';
 export { useSplitterContext } from './use-splitter-context';
-export { splitterAnatomy } from './splitter.anatomy';
 export * as Splitter from './splitter';

package/dist/source/components/switch/index.js

@@ -5,7 +5,7 @@ export { SwitchLabel, } from './switch-label';
 export { SwitchRoot, } from './switch-root';
 export { SwitchRootProvider, } from './switch-root-provider';
 export { SwitchThumb, } from './switch-thumb';
+export { switchAnatomy } from './switch.anatomy';
 export { useSwitch } from './use-switch';
 export { useSwitchContext } from './use-switch-context';
-export { switchAnatomy } from './switch.anatomy';
 export * as Switch from './switch';

package/dist/source/components/tabs/index.js

@@ -5,7 +5,7 @@ export { TabTrigger, } from './tab-trigger';
 export { TabsContext, } from './tabs-context';
 export { TabsRoot, } from './tabs-root';
 export { TabsRootProvider, } from './tabs-root-provider';
+export { tabsAnatomy } from './tabs.anatomy';
 export { useTabs } from './use-tabs';
 export { useTabsContext } from './use-tabs-context';
-export { tabsAnatomy } from './tabs.anatomy';
 export * as Tabs from './tabs';

package/dist/source/components/tabs/tabs-root.jsx

@@ -10,6 +10,7 @@ export const TabsRoot = (props) => {
         'activationMode',
         'composite',
         'defaultValue',
+        'deselectable',
         'id',
         'ids',
         'loopFocus',

package/dist/source/components/tags-input/index.js

@@ -12,8 +12,8 @@ export { TagsInputItemText, } from './tags-input-item-text';
 export { TagsInputLabel, } from './tags-input-label';
 export { TagsInputRoot, } from './tags-input-root';
 export { TagsInputRootProvider, } from './tags-input-root-provider';
+export { tagsInputAnatomy } from './tags-input.anatomy';
 export { useTagsInput } from './use-tags-input';
 export { useTagsInputContext } from './use-tags-input-context';
 export { useTagsInputItemContext, } from './use-tags-input-item-context';
-export { tagsInputAnatomy } from './tags-input.anatomy';
 export * as TagsInput from './tags-input';

package/dist/source/components/timer/index.js

@@ -1,11 +1,12 @@
 export { TimerActionTrigger, } from './timer-action-trigger';
-export { TimerArea } from './timer-area';
 export { TimerContext } from './timer-context';
-export { TimerControl } from './timer-control';
 export { TimerItem } from './timer-item';
+export { TimerArea } from './timer-area';
+export { TimerControl } from './timer-control';
 export { TimerRoot } from './timer-root';
 export { TimerRootProvider, } from './timer-root-provider';
 export { TimerSeparator, } from './timer-separator';
+export { timerAnatomy } from './timer.anatomy';
 export { useTimer } from './use-timer';
 export { useTimerContext } from './use-timer-context';
 export * as Timer from './timer';

package/dist/source/components/timer/timer.anatomy.js

@@ -0,0 +1 @@
+export { anatomy as timerAnatomy } from '@zag-js/timer';

package/dist/source/components/toast/index.js

@@ -5,7 +5,7 @@ export { ToastContext, } from './toast-context';
 export { ToastDescription, } from './toast-description';
 export { ToastRoot, } from './toast-root';
 export { ToastTitle, } from './toast-title';
+export { toastAnatomy } from './toast.anatomy';
 export { Toaster, } from './toaster';
 export { useToastContext } from './use-toast-context';
-export { toastAnatomy } from './toast.anatomy';
 export * as Toast from './toast';