@ark-ui/solid 3.1.0 → 3.2.0

package/dist/source/components/accordion/accordion-root-provider.jsx

@@ -0,0 +1,17 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { RenderStrategyProvider, splitRenderStrategyProps, } from '../../utils/render-strategy';
+import { ark } from '../factory';
+import { AccordionProvider } from './use-accordion-context';
+export const AccordionRootProvider = (props) => {
+    const [renderStrategyProps, accordionProps] = splitRenderStrategyProps(props);
+    const [{ value: accordion }, localProps] = createSplitProps()(accordionProps, [
+        'value',
+    ]);
+    const mergedProps = mergeProps(() => accordion().getRootProps(), localProps);
+    return (<AccordionProvider value={accordion}>
+      <RenderStrategyProvider value={renderStrategyProps}>
+        <ark.div {...mergedProps}/>
+      </RenderStrategyProvider>
+    </AccordionProvider>);
+};

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

@@ -19,7 +19,7 @@ export const AccordionRoot = (props) => {
         'value',
     ]);
     const api = useAccordion(useAccordionProps);
-    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const mergedProps = mergeProps(() => api().getRootProps(), localProps);
     return (<AccordionProvider value={api}>
       <RenderStrategyProvider value={renderStrategyProps}>
         <ark.div {...mergedProps}/>

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

@@ -5,3 +5,4 @@ export { AccordionItemContext as ItemContext, } from './accordion-item-context';
 export { AccordionItemIndicator as ItemIndicator, } from './accordion-item-indicator';
 export { AccordionItemTrigger as ItemTrigger, } from './accordion-item-trigger';
 export { AccordionRoot as Root } from './accordion-root';
+export { AccordionRootProvider as RootProvider, } from './accordion-root-provider';

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

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

package/dist/source/components/avatar/avatar-fallback.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useAvatarContext } from './use-avatar-context';
 export const AvatarFallback = (props) => {
     const context = useAvatarContext();
-    const mergedProps = mergeProps(() => context().fallbackProps, props);
+    const mergedProps = mergeProps(() => context().getFallbackProps(), props);
     return <ark.span {...mergedProps}/>;
 };

package/dist/source/components/avatar/avatar-image.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useAvatarContext } from './use-avatar-context';
 export const AvatarImage = (props) => {
     const context = useAvatarContext();
-    const mergedProps = mergeProps(() => context().imageProps, props);
+    const mergedProps = mergeProps(() => context().getImageProps(), props);
     return <ark.img {...mergedProps}/>;
 };

package/dist/source/components/avatar/avatar-root-provider.jsx

@@ -0,0 +1,11 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { AvatarProvider } from './use-avatar-context';
+export const AvatarRootProvider = (props) => {
+    const [{ value: avatar }, localProps] = createSplitProps()(props, ['value']);
+    const mergedProps = mergeProps(() => avatar().getRootProps(), localProps);
+    return (<AvatarProvider value={avatar}>
+      <ark.div {...mergedProps}/>
+    </AvatarProvider>);
+};

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

@@ -10,7 +10,7 @@ export const AvatarRoot = (props) => {
         'onStatusChange',
     ]);
     const context = useAvatar(useAvatarProps);
-    const mergedProps = mergeProps(() => context().rootProps, localProps);
+    const mergedProps = mergeProps(() => context().getRootProps(), localProps);
     return (<AvatarProvider value={context}>
       <ark.div {...mergedProps}/>
     </AvatarProvider>);

package/dist/source/components/avatar/avatar.js

@@ -2,3 +2,4 @@ export { AvatarContext as Context } from './avatar-context';
 export { AvatarFallback as Fallback, } from './avatar-fallback';
 export { AvatarImage as Image } from './avatar-image';
 export { AvatarRoot as Root } from './avatar-root';
+export { AvatarRootProvider as RootProvider, } from './avatar-root-provider';

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

@@ -2,5 +2,7 @@ export { AvatarContext } from './avatar-context';
 export { AvatarFallback } from './avatar-fallback';
 export { AvatarImage } from './avatar-image';
 export { AvatarRoot } from './avatar-root';
+export { AvatarRootProvider } from './avatar-root-provider';
+export { useAvatar } from './use-avatar';
 export { useAvatarContext } from './use-avatar-context';
 export * as Avatar from './avatar';

package/dist/source/components/carousel/carousel-indicator-group.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useCarouselContext } from './use-carousel-context';
 export const CarouselIndicatorGroup = (props) => {
     const api = useCarouselContext();
-    const mergedProps = mergeProps(() => api().indicatorGroupProps, props);
+    const mergedProps = mergeProps(() => api().getIndicatorGroupProps(), props);
     return <ark.div {...mergedProps}/>;
 };

package/dist/source/components/carousel/carousel-item-group.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useCarouselContext } from './use-carousel-context';
 export const CarouselItemGroup = (props) => {
     const api = useCarouselContext();
-    const mergedProps = mergeProps(() => api().itemGroupProps, props);
+    const mergedProps = mergeProps(() => api().getItemGroupProps(), props);
     return <ark.div {...mergedProps}/>;
 };

package/dist/source/components/carousel/carousel-next-trigger.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useCarouselContext } from './use-carousel-context';
 export const CarouselNextTrigger = (props) => {
     const api = useCarouselContext();
-    const mergedProps = mergeProps(() => api().nextTriggerProps, props);
+    const mergedProps = mergeProps(() => api().getNextTriggerProps(), props);
     return <ark.button {...mergedProps}/>;
 };

package/dist/source/components/carousel/carousel-prev-trigger.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useCarouselContext } from './use-carousel-context';
 export const CarouselPrevTrigger = (props) => {
     const api = useCarouselContext();
-    const mergedProps = mergeProps(() => api().prevTriggerProps, props);
+    const mergedProps = mergeProps(() => api().getPrevTriggerProps(), props);
     return <ark.button {...mergedProps}/>;
 };

package/dist/source/components/carousel/carousel-root-provider.jsx

@@ -0,0 +1,11 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { CarouselProvider } from './use-carousel-context';
+export const CarouselRootProvider = (props) => {
+    const [{ value: carousel }, localProps] = createSplitProps()(props, ['value']);
+    const mergedProps = mergeProps(() => carousel().getRootProps(), localProps);
+    return (<CarouselProvider value={carousel}>
+      <ark.div {...mergedProps}/>
+    </CarouselProvider>);
+};

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

@@ -17,7 +17,7 @@ export const CarouselRoot = (props) => {
         'spacing',
     ]);
     const api = useCarousel(useCarouselProps);
-    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const mergedProps = mergeProps(() => api().getRootProps(), localProps);
     return (<CarouselProvider value={api}>
       <ark.div {...mergedProps}/>
     </CarouselProvider>);

package/dist/source/components/carousel/carousel-viewport.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useCarouselContext } from './use-carousel-context';
 export const CarouselViewport = (props) => {
     const api = useCarouselContext();
-    const mergedProps = mergeProps(() => api().viewportProps, props);
+    const mergedProps = mergeProps(() => api().getViewportProps(), props);
     return <ark.div {...mergedProps}/>;
 };

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

@@ -7,4 +7,5 @@ export { CarouselItemGroup as ItemGroup, } from './carousel-item-group';
 export { CarouselNextTrigger as NextTrigger, } from './carousel-next-trigger';
 export { CarouselPrevTrigger as PrevTrigger, } from './carousel-prev-trigger';
 export { CarouselRoot as Root } from './carousel-root';
+export { CarouselRootProvider as RootProvider, } from './carousel-root-provider';
 export { CarouselViewport as Viewport, } from './carousel-viewport';

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

@@ -7,6 +7,8 @@ export { CarouselItemGroup } from './carousel-item-group';
 export { CarouselNextTrigger } from './carousel-next-trigger';
 export { CarouselPrevTrigger } from './carousel-prev-trigger';
 export { CarouselRoot } from './carousel-root';
+export { CarouselRootProvider } from './carousel-root-provider';
 export { CarouselViewport } from './carousel-viewport';
+export { useCarousel } from './use-carousel';
 export { useCarouselContext } from './use-carousel-context';
 export * as Carousel from './carousel';

package/dist/source/components/checkbox/checkbox-control.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useCheckboxContext } from './use-checkbox-context';
 export const CheckboxControl = (props) => {
     const checkbox = useCheckboxContext();
-    const mergedProps = mergeProps(() => checkbox().controlProps, props);
+    const mergedProps = mergeProps(() => checkbox().getControlProps(), props);
     return <ark.div {...mergedProps}/>;
 };

package/dist/source/components/checkbox/checkbox-hidden-input.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useCheckboxContext } from './use-checkbox-context';
 export const CheckboxHiddenInput = (props) => {
     const checkbox = useCheckboxContext();
-    const mergedProps = mergeProps(() => checkbox().hiddenInputProps, props);
+    const mergedProps = mergeProps(() => checkbox().getHiddenInputProps(), props);
     return <ark.input {...mergedProps}/>;
 };

package/dist/source/components/checkbox/checkbox-indicator.jsx

@@ -5,6 +5,6 @@ import { useCheckboxContext } from './use-checkbox-context';
 export const CheckboxIndicator = (props) => {
     const [indicatorProps, localProps] = createSplitProps()(props, ['indeterminate']);
     const checkbox = useCheckboxContext();
-    const mergedProps = mergeProps(() => checkbox().indicatorProps, localProps);
+    const mergedProps = mergeProps(() => checkbox().getIndicatorProps(), localProps);
     return (<ark.div {...mergedProps} hidden={!(indicatorProps.indeterminate ? checkbox().indeterminate : checkbox().checked)}/>);
 };

package/dist/source/components/checkbox/checkbox-label.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useCheckboxContext } from './use-checkbox-context';
 export const CheckboxLabel = (props) => {
     const checkbox = useCheckboxContext();
-    const mergedProps = mergeProps(() => checkbox().labelProps, props);
+    const mergedProps = mergeProps(() => checkbox().getLabelProps(), props);
     return <ark.span {...mergedProps}/>;
 };

package/dist/source/components/checkbox/checkbox-root-provider.jsx

@@ -0,0 +1,11 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { CheckboxProvider } from './use-checkbox-context';
+export const CheckboxRootProvider = (props) => {
+    const [{ value: checkbox }, labelprops] = createSplitProps()(props, ['value']);
+    const mergedProps = mergeProps(() => checkbox().getRootProps(), labelprops);
+    return (<CheckboxProvider value={checkbox}>
+      <ark.label {...mergedProps}/>
+    </CheckboxProvider>);
+};

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

@@ -19,7 +19,7 @@ export const CheckboxRoot = (props) => {
         'value',
     ]);
     const checkbox = useCheckbox(useCheckboxProps);
-    const mergedProps = mergeProps(() => checkbox().rootProps, labelprops);
+    const mergedProps = mergeProps(() => checkbox().getRootProps(), labelprops);
     return (<CheckboxProvider value={checkbox}>
       <ark.label {...mergedProps}/>
     </CheckboxProvider>);

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

@@ -4,3 +4,4 @@ export { CheckboxHiddenInput as HiddenInput, } from './checkbox-hidden-input';
 export { CheckboxIndicator as Indicator, } from './checkbox-indicator';
 export { CheckboxLabel as Label } from './checkbox-label';
 export { CheckboxRoot as Root } from './checkbox-root';
+export { CheckboxRootProvider as RootProvider, } from './checkbox-root-provider';

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

@@ -4,5 +4,7 @@ export { CheckboxHiddenInput } from './checkbox-hidden-input';
 export { CheckboxIndicator } from './checkbox-indicator';
 export { CheckboxLabel } from './checkbox-label';
 export { CheckboxRoot } from './checkbox-root';
+export { CheckboxRootProvider } from './checkbox-root-provider';
+export { useCheckbox } from './use-checkbox';
 export { useCheckboxContext } from './use-checkbox-context';
 export * as Checkbox from './checkbox';

package/dist/source/components/clipboard/clipboard-control.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useClipboardContext } from './use-clipboard-context';
 export const ClipboardControl = (props) => {
     const api = useClipboardContext();
-    const mergedProps = mergeProps(() => api().controlProps, props);
+    const mergedProps = mergeProps(() => api().getControlProps(), props);
     return <ark.div {...mergedProps}/>;
 };

package/dist/source/components/clipboard/clipboard-input.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useClipboardContext } from './use-clipboard-context';
 export const ClipboardInput = (props) => {
     const api = useClipboardContext();
-    const mergedProps = mergeProps(() => api().inputProps, props);
+    const mergedProps = mergeProps(() => api().getInputProps(), props);
     return <ark.input {...mergedProps}/>;
 };

package/dist/source/components/clipboard/clipboard-label.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useClipboardContext } from './use-clipboard-context';
 export const ClipboardLabel = (props) => {
     const api = useClipboardContext();
-    const mergedProps = mergeProps(() => api().labelProps, props);
+    const mergedProps = mergeProps(() => api().getLabelProps(), props);
     return <ark.label {...mergedProps}/>;
 };

package/dist/source/components/clipboard/clipboard-root-provider.jsx

@@ -0,0 +1,11 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { ClipboardProvider } from './use-clipboard-context';
+export const ClipboardRootProvider = (props) => {
+    const [{ value: clipboard }, localProps] = createSplitProps()(props, ['value']);
+    const mergedProps = mergeProps(() => clipboard().getRootProps(), localProps);
+    return (<ClipboardProvider value={clipboard}>
+      <ark.div {...mergedProps}/>
+    </ClipboardProvider>);
+};

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

@@ -12,7 +12,7 @@ export const ClipboardRoot = (props) => {
         'value',
     ]);
     const api = useClipboard(useClipboardProps);
-    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const mergedProps = mergeProps(() => api().getRootProps(), localProps);
     return (<ClipboardProvider value={api}>
       <ark.div {...mergedProps}/>
     </ClipboardProvider>);

package/dist/source/components/clipboard/clipboard-trigger.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useClipboardContext } from './use-clipboard-context';
 export const ClipboardTrigger = (props) => {
     const api = useClipboardContext();
-    const mergedProps = mergeProps(() => api().triggerProps, props);
+    const mergedProps = mergeProps(() => api().getTriggerProps(), props);
     return <ark.button {...mergedProps}/>;
 };

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

@@ -4,4 +4,5 @@ export { ClipboardIndicator as Indicator, } from './clipboard-indicator';
 export { ClipboardInput as Input } from './clipboard-input';
 export { ClipboardLabel as Label } from './clipboard-label';
 export { ClipboardRoot as Root } from './clipboard-root';
+export { ClipboardRootProvider as RootProvider, } from './clipboard-root-provider';
 export { ClipboardTrigger as Trigger, } from './clipboard-trigger';

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

@@ -4,6 +4,8 @@ export { ClipboardIndicator } from './clipboard-indicator';
 export { ClipboardInput } from './clipboard-input';
 export { ClipboardLabel } from './clipboard-label';
 export { ClipboardRoot } from './clipboard-root';
+export { ClipboardRootProvider } from './clipboard-root-provider';
 export { ClipboardTrigger } from './clipboard-trigger';
+export { useClipboard } from './use-clipboard';
 export { useClipboardContext } from './use-clipboard-context';
 export * as Clipboard from './clipboard';

package/dist/source/components/collapsible/collapsible-content.jsx

@@ -4,7 +4,7 @@ import { ark } from '../factory';
 import { useCollapsibleContext } from './use-collapsible-context';
 export const CollapsibleContent = (props) => {
     const api = useCollapsibleContext();
-    const mergedProps = mergeProps(() => api().contentProps, props);
+    const mergedProps = mergeProps(() => api().getContentProps(), props);
     return (<Show when={!api().unmounted}>
       <ark.div {...mergedProps}/>
     </Show>);

package/dist/source/components/collapsible/collapsible-root-provider.jsx

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { CollapsibleProvider } from './use-collapsible-context';
+export const CollapsibleRootProvider = (props) => {
+    const [{ value: collapsible }, localProps] = createSplitProps()(props, [
+        'value',
+    ]);
+    const mergedProps = mergeProps(() => collapsible().getRootProps(), localProps);
+    return (<CollapsibleProvider value={collapsible}>
+      <ark.div {...mergedProps}/>
+    </CollapsibleProvider>);
+};

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

@@ -16,7 +16,7 @@ export const CollapsibleRoot = (props) => {
         'unmountOnExit',
     ]);
     const api = useCollapsible(useCollapsibleProps);
-    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const mergedProps = mergeProps(() => api().getRootProps(), localProps);
     return (<CollapsibleProvider value={api}>
       <ark.div {...mergedProps}/>
     </CollapsibleProvider>);

package/dist/source/components/collapsible/collapsible-trigger.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useCollapsibleContext } from './use-collapsible-context';
 export const CollapsibleTrigger = (props) => {
     const api = useCollapsibleContext();
-    const mergedProps = mergeProps(() => api().triggerProps, props);
+    const mergedProps = mergeProps(() => api().getTriggerProps(), props);
     return <ark.button {...mergedProps}/>;
 };

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

@@ -1,4 +1,5 @@
 export { CollapsibleContent as Content, } from './collapsible-content';
 export { CollapsibleContext as Context, } from './collapsible-context';
 export { CollapsibleRoot as Root } from './collapsible-root';
+export { CollapsibleRootProvider as RootProvider, } from './collapsible-root-provider';
 export { CollapsibleTrigger as Trigger, } from './collapsible-trigger';

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

@@ -1,6 +1,8 @@
 export { CollapsibleContent } from './collapsible-content';
 export { CollapsibleContext } from './collapsible-context';
 export { CollapsibleRoot } from './collapsible-root';
+export { CollapsibleRootProvider, } from './collapsible-root-provider';
 export { CollapsibleTrigger } from './collapsible-trigger';
+export { useCollapsible, } from './use-collapsible';
 export { useCollapsibleContext } from './use-collapsible-context';
 export * as Collapsible from './collapsible';

package/dist/source/components/color-picker/color-picker-content.jsx

@@ -6,7 +6,7 @@ import { useColorPickerContext } from './use-color-picker-context';
 export const ColorPickerContent = (props) => {
     const api = useColorPickerContext();
     const presenceApi = usePresenceContext();
-    const mergedProps = mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
+    const mergedProps = mergeProps(() => api().getContentProps(), () => presenceApi().presenceProps, props);
     return (<Show when={!presenceApi().unmounted}>
       <ark.div {...mergedProps}/>
     </Show>);

package/dist/source/components/color-picker/color-picker-control.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useColorPickerContext } from './use-color-picker-context';
 export const ColorPickerControl = (props) => {
     const api = useColorPickerContext();
-    const mergedProps = mergeProps(() => api().controlProps, props);
+    const mergedProps = mergeProps(() => api().getControlProps(), props);
     return <ark.div {...mergedProps}/>;
 };

package/dist/source/components/color-picker/color-picker-eye-dropper-trigger.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useColorPickerContext } from './use-color-picker-context';
 export const ColorPickerEyeDropperTrigger = (props) => {
     const api = useColorPickerContext();
-    const mergedProps = mergeProps(() => api().eyeDropperTriggerProps, props);
+    const mergedProps = mergeProps(() => api().getEyeDropperTriggerProps(), props);
     return <ark.button {...mergedProps}/>;
 };

package/dist/source/components/color-picker/color-picker-format-select.jsx

@@ -4,7 +4,7 @@ import { ark } from '../factory';
 import { useColorPickerContext } from './use-color-picker-context';
 export const ColorPickerFormatSelect = (props) => {
     const api = useColorPickerContext();
-    const mergedProps = mergeProps(() => api().formatSelectProps, props);
+    const mergedProps = mergeProps(() => api().getFormatSelectProps(), props);
     return (<ark.select {...mergedProps}>
       <Index each={['rgba', 'hsla', 'hsba']}>
         {(format) => <ark.option value={format()}>{format()}</ark.option>}

package/dist/source/components/color-picker/color-picker-format-trigger.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useColorPickerContext } from './use-color-picker-context';
 export const ColorPickerFormatTrigger = (props) => {
     const api = useColorPickerContext();
-    const mergedProps = mergeProps(() => api().formatTriggerProps, props);
+    const mergedProps = mergeProps(() => api().getFormatTriggerProps(), props);
     return <ark.button {...mergedProps}/>;
 };

package/dist/source/components/color-picker/color-picker-hidden-input.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useColorPickerContext } from './use-color-picker-context';
 export const ColorPickerHiddenInput = (props) => {
     const colorPicker = useColorPickerContext();
-    const mergedProps = mergeProps(() => colorPicker().hiddenInputProps, props);
+    const mergedProps = mergeProps(() => colorPicker().getHiddenInputProps(), props);
     return <ark.input {...mergedProps}/>;
 };

package/dist/source/components/color-picker/color-picker-label.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useColorPickerContext } from './use-color-picker-context';
 export const ColorPickerLabel = (props) => {
     const api = useColorPickerContext();
-    const mergedProps = mergeProps(() => api().labelProps, props);
+    const mergedProps = mergeProps(() => api().getLabelProps(), props);
     return <ark.label {...mergedProps}/>;
 };

package/dist/source/components/color-picker/color-picker-positioner.jsx

@@ -6,7 +6,7 @@ import { useColorPickerContext } from './use-color-picker-context';
 export const ColorPickerPositioner = (props) => {
     const api = useColorPickerContext();
     const presenceApi = usePresenceContext();
-    const mergedProps = mergeProps(() => api().positionerProps, props);
+    const mergedProps = mergeProps(() => api().getPositionerProps(), props);
     return (<Show when={!presenceApi().unmounted}>
       <ark.div {...mergedProps}/>
     </Show>);

package/dist/source/components/color-picker/color-picker-root-provider.jsx

@@ -0,0 +1,16 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
+import { ColorPickerProvider } from './use-color-picker-context';
+export const ColorPickerRootProvider = (props) => {
+    const [presenceProps, colorPickerProps] = splitPresenceProps(props);
+    const [{ value: colorPicker }, localProps] = createSplitProps()(colorPickerProps, ['value']);
+    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: colorPicker().open })));
+    const mergedProps = mergeProps(() => colorPicker().getRootProps(), localProps);
+    return (<ColorPickerProvider value={colorPicker}>
+      <PresenceProvider value={apiPresence}>
+        <ark.div {...mergedProps}/>
+      </PresenceProvider>
+    </ColorPickerProvider>);
+};

package/dist/source/components/color-picker/color-picker-root.jsx

@@ -31,7 +31,7 @@ export const ColorPickerRoot = (props) => {
     ]);
     const api = useColorPicker(useColorPickerProps);
     const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().open })));
-    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const mergedProps = mergeProps(() => api().getRootProps(), localProps);
     return (<ColorPickerProvider value={api}>
       <PresenceProvider value={apiPresence}>
         <ark.div {...mergedProps}/>

package/dist/source/components/color-picker/color-picker-swatch-group.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useColorPickerContext } from './use-color-picker-context';
 export const ColorPickerSwatchGroup = (props) => {
     const api = useColorPickerContext();
-    const mergedProps = mergeProps(() => api().swatchGroupProps, props);
+    const mergedProps = mergeProps(() => api().getSwatchGroupProps(), props);
     return <ark.div {...mergedProps}/>;
 };

package/dist/source/components/color-picker/color-picker-trigger.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useColorPickerContext } from './use-color-picker-context';
 export const ColorPickerTrigger = (props) => {
     const api = useColorPickerContext();
-    const mergedProps = mergeProps(() => api().triggerProps, props);
+    const mergedProps = mergeProps(() => api().getTriggerProps(), props);
     return <ark.button {...mergedProps}/>;
 };

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

@@ -15,6 +15,7 @@ export { ColorPickerHiddenInput, } from './color-picker-hidden-input';
 export { ColorPickerLabel } from './color-picker-label';
 export { ColorPickerPositioner } from './color-picker-positioner';
 export { ColorPickerRoot } from './color-picker-root';
+export { ColorPickerRootProvider, } from './color-picker-root-provider';
 export { ColorPickerSwatch } from './color-picker-swatch';
 export { ColorPickerSwatchGroup, } from './color-picker-swatch-group';
 export { ColorPickerSwatchIndicator, } from './color-picker-swatch-indicator';
@@ -23,5 +24,6 @@ export { ColorPickerTransparencyGrid, } from './color-picker-transparency-grid';
 export { ColorPickerTrigger } from './color-picker-trigger';
 export { ColorPickerValueText } from './color-picker-value-text';
 export { ColorPickerView } from './color-picker-view';
+export { useColorPicker, } from './use-color-picker';
 export { useColorPickerContext } from './use-color-picker-context';
 export * as ColorPicker from './color-picker';

package/dist/source/components/combobox/combobox-clear-trigger.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useComboboxContext } from './use-combobox-context';
 export const ComboboxClearTrigger = (props) => {
     const combobox = useComboboxContext();
-    const mergedProps = mergeProps(() => combobox().clearTriggerProps, props);
+    const mergedProps = mergeProps(() => combobox().getClearTriggerProps(), props);
     return <ark.button {...mergedProps}/>;
 };

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

@@ -6,7 +6,7 @@ import { useComboboxContext } from './use-combobox-context';
 export const ComboboxContent = (props) => {
     const api = useComboboxContext();
     const presenceApi = usePresenceContext();
-    const mergedProps = mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
+    const mergedProps = mergeProps(() => api().getContentProps(), () => presenceApi().presenceProps, props);
     return (<Show when={!presenceApi().unmounted}>
       <ark.div {...mergedProps}/>
     </Show>);

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

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useComboboxContext } from './use-combobox-context';
 export const ComboboxControl = (props) => {
     const combobox = useComboboxContext();
-    const mergedProps = mergeProps(() => combobox().controlProps, props);
+    const mergedProps = mergeProps(() => combobox().getControlProps(), props);
     return <ark.div {...mergedProps}/>;
 };

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

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useComboboxContext } from './use-combobox-context';
 export const ComboboxInput = (props) => {
     const combobox = useComboboxContext();
-    const mergedProps = mergeProps(() => combobox().inputProps, props);
+    const mergedProps = mergeProps(() => combobox().getInputProps(), props);
     return <ark.input {...mergedProps}/>;
 };

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

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useComboboxContext } from './use-combobox-context';
 export const ComboboxLabel = (props) => {
     const combobox = useComboboxContext();
-    const mergedProps = mergeProps(() => combobox().labelProps, props);
+    const mergedProps = mergeProps(() => combobox().getLabelProps(), props);
     return <ark.label {...mergedProps}/>;
 };

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

@@ -6,7 +6,7 @@ import { useComboboxContext } from './use-combobox-context';
 export const ComboboxPositioner = (props) => {
     const api = useComboboxContext();
     const presenceApi = usePresenceContext();
-    const mergedProps = mergeProps(() => api().positionerProps, props);
+    const mergedProps = mergeProps(() => api().getPositionerProps(), props);
     return (<Show when={!presenceApi().unmounted}>
       <ark.div {...mergedProps}/>
     </Show>);