@ark-ui/solid 3.1.0 → 3.2.0

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

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useRadioGroupContext } from './use-radio-group-context';
 export const RadioGroupIndicator = (props) => {
     const radioGroup = useRadioGroupContext();
-    const mergedProps = mergeProps(() => radioGroup().indicatorProps, props);
+    const mergedProps = mergeProps(() => radioGroup().getIndicatorProps(), props);
     return <ark.div {...mergedProps}/>;
 };

package/dist/source/components/radio-group/radio-group-label.jsx

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

package/dist/source/components/radio-group/radio-group-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 { RadioGroupProvider } from './use-radio-group-context';
+export const RadioGroupRootProvider = (props) => {
+    const [{ value: radioGroup }, localProps] = createSplitProps()(props, [
+        'value',
+    ]);
+    const mergedProps = mergeProps(() => radioGroup().getRootProps(), localProps);
+    return (<RadioGroupProvider value={radioGroup}>
+      <ark.div {...mergedProps}/>
+    </RadioGroupProvider>);
+};

package/dist/source/components/radio-group/radio-group-root.jsx

@@ -17,7 +17,7 @@ export const RadioGroupRoot = (props) => {
         'value',
     ]);
     const radioGroup = useRadioGroup(useRadioGroupProps);
-    const mergedProps = mergeProps(() => radioGroup().rootProps, localProps);
+    const mergedProps = mergeProps(() => radioGroup().getRootProps(), localProps);
     return (<RadioGroupProvider value={radioGroup}>
       <ark.div {...mergedProps}/>
     </RadioGroupProvider>);

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

@@ -7,3 +7,4 @@ export { RadioGroupItemHiddenInput as ItemHiddenInput, } from './radio-group-ite
 export { RadioGroupItemText as ItemText, } from './radio-group-item-text';
 export { RadioGroupLabel as Label, } from './radio-group-label';
 export { RadioGroupRoot as Root } from './radio-group-root';
+export { RadioGroupRootProvider as RootProvider, } from './radio-group-root-provider';

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

@@ -1,10 +1,12 @@
 export { RatingGroupContext } from './rating-group-context';
 export { RatingGroupControl } from './rating-group-control';
+export { RatingGroupHiddenInput, } from './rating-group-hidden-input';
 export { RatingGroupItem } from './rating-group-item';
 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 { useRatingGroup, } from './use-rating-group';
 export { useRatingGroupContext } from './use-rating-group-context';
-export { RatingGroupHiddenInput, } from './rating-group-hidden-input';
 export { useRatingGroupItemContext, } from './use-rating-group-item-context';
 export * as RatingGroup from './rating-group';

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

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

package/dist/source/components/rating-group/rating-group-hidden-input.jsx

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

package/dist/source/components/rating-group/rating-group-label.jsx

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

package/dist/source/components/rating-group/rating-group-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 { RatingGroupProvider } from './use-rating-group-context';
+export const RatingGroupRootProvider = (props) => {
+    const [{ value: ratingGroup }, localProps] = createSplitProps()(props, [
+        'value',
+    ]);
+    const mergedProps = mergeProps(() => ratingGroup().getRootProps(), localProps);
+    return (<RatingGroupProvider value={ratingGroup}>
+      <ark.div {...mergedProps}/>
+    </RatingGroupProvider>);
+};

package/dist/source/components/rating-group/rating-group-root.jsx

@@ -21,7 +21,7 @@ export const RatingGroupRoot = (props) => {
         'value',
     ]);
     const api = useRatingGroup(useRatingProps);
-    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const mergedProps = mergeProps(() => api().getRootProps(), localProps);
     return (<RatingGroupProvider value={api}>
       <ark.div {...mergedProps}/>
     </RatingGroupProvider>);

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

@@ -7,6 +7,8 @@ export { SegmentGroupItemHiddenInput, } from './segment-group-item-hidden-input'
 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 { useSegmentGroup, } from './use-segment-group';
 export { useSegmentGroupContext } from './use-segment-group-context';
 export { useSegmentGroupItemContext, } from './use-segment-group-item-context';
 export * as SegmentGroup from './segment-group';

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

@@ -4,6 +4,6 @@ import { ark } from '../factory';
 import { useSegmentGroupContext } from './use-segment-group-context';
 export const SegmentGroupIndicator = (props) => {
     const segmentGroup = useSegmentGroupContext();
-    const mergedProps = mergeProps(() => segmentGroup().indicatorProps, segmentGroupAnatomy.build().indicator.attrs, props);
+    const mergedProps = mergeProps(() => segmentGroup().getIndicatorProps(), segmentGroupAnatomy.build().indicator.attrs, props);
     return <ark.div {...mergedProps}/>;
 };

package/dist/source/components/segment-group/segment-group-label.jsx

@@ -4,6 +4,6 @@ import { ark } from '../factory';
 import { useSegmentGroupContext } from './use-segment-group-context';
 export const SegmentGroupLabel = (props) => {
     const segmentGroup = useSegmentGroupContext();
-    const mergedProps = mergeProps(() => segmentGroup().labelProps, segmentGroupAnatomy.build().label.attrs, props);
+    const mergedProps = mergeProps(() => segmentGroup().getLabelProps(), segmentGroupAnatomy.build().label.attrs, props);
     return <ark.label {...mergedProps}/>;
 };

package/dist/source/components/segment-group/segment-group-root-provider.jsx

@@ -0,0 +1,14 @@
+import { segmentGroupAnatomy } from '@ark-ui/anatomy';
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { SegmentGroupProvider } from './use-segment-group-context';
+export const SegmentGroupRootProvider = (props) => {
+    const [{ value: segmentGroup }, localProps] = createSplitProps()(props, [
+        'value',
+    ]);
+    const mergedProps = mergeProps(() => segmentGroup().getRootProps(), segmentGroupAnatomy.build().root.attrs, localProps);
+    return (<SegmentGroupProvider value={segmentGroup}>
+      <ark.div {...mergedProps}/>
+    </SegmentGroupProvider>);
+};

package/dist/source/components/segment-group/segment-group-root.jsx

@@ -18,7 +18,7 @@ export const SegmentGroupRoot = (props) => {
         'value',
     ]);
     const segmentGroup = useSegmentGroup(useSegmentGroupProps);
-    const mergedProps = mergeProps(() => segmentGroup().rootProps, segmentGroupAnatomy.build().root.attrs, localProps);
+    const mergedProps = mergeProps(() => segmentGroup().getRootProps(), segmentGroupAnatomy.build().root.attrs, localProps);
     return (<SegmentGroupProvider value={segmentGroup}>
       <ark.div {...mergedProps}/>
     </SegmentGroupProvider>);

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

@@ -3,7 +3,7 @@ export { SegmentGroupIndicator as Indicator, } from './segment-group-indicator';
 export { SegmentGroupItem as Item, } from './segment-group-item';
 export { SegmentGroupItemContext as ItemContext, } from './segment-group-item-context';
 export { SegmentGroupItemControl as ItemControl, } from './segment-group-item-control';
-export { SegmentGroupItemHiddenInput as ItemHiddenInput } from './segment-group-item-hidden-input';
+export { SegmentGroupItemHiddenInput as ItemHiddenInput, } from './segment-group-item-hidden-input';
 export { SegmentGroupItemText as ItemText, } from './segment-group-item-text';
 export { SegmentGroupLabel as Label, } from './segment-group-label';
 export { SegmentGroupRoot as Root, } from './segment-group-root';

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

@@ -13,8 +13,10 @@ export { SelectItemText } from './select-item-text';
 export { SelectLabel } from './select-label';
 export { SelectPositioner } from './select-positioner';
 export { SelectRoot } from './select-root';
+export { SelectRootProvider } from './select-root-provider';
 export { SelectTrigger } from './select-trigger';
 export { SelectValueText } from './select-value-text';
+export { useSelect } from './use-select';
 export { useSelectContext } from './use-select-context';
 export { useSelectItemContext } from './use-select-item-context';
 export * as Select from './select';

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

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

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

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

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

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

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

@@ -4,7 +4,7 @@ import { ark } from '../factory';
 import { useSelectContext } from './use-select-context';
 export const SelectHiddenSelect = (props) => {
     const select = useSelectContext();
-    const mergedProps = mergeProps(() => select().controlProps, props);
+    const mergedProps = mergeProps(() => select().getControlProps(), props);
     const isValueEmpty = createMemo(() => select().value.length === 0);
     return (<ark.select {...mergedProps}>
       <Show when={isValueEmpty()}>

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
+import { SelectProvider } from './use-select-context';
+export const SelectRootProvider = (props) => {
+    const [presenceProps, selectProps] = splitPresenceProps(props);
+    const [{ value: select }, localProps] = createSplitProps()(selectProps, [
+        'value',
+    ]);
+    const presence = usePresence(mergeProps(() => ({ present: select().open }), presenceProps));
+    const mergedProps = mergeProps(() => select().getRootProps(), localProps);
+    return (<SelectProvider value={select}>
+      <PresenceProvider value={presence}>
+        <ark.div {...mergedProps}/>
+      </PresenceProvider>
+    </SelectProvider>);
+};

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

@@ -38,7 +38,7 @@ export const SelectRoot = (props) => {
     ]);
     const select = useSelect(useSelectProps);
     const presenceApi = usePresence(mergeProps(() => ({ present: select().open }), presenceProps));
-    const mergedProps = mergeProps(() => select().rootProps, localProps);
+    const mergedProps = mergeProps(() => select().getRootProps(), localProps);
     return (<SelectProvider value={select}>
       <PresenceProvider value={presenceApi}>
         <ark.div {...mergedProps}/>

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

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

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

@@ -13,5 +13,6 @@ export { SelectItemText as ItemText, } from './select-item-text';
 export { SelectLabel as Label } from './select-label';
 export { SelectPositioner as Positioner, } from './select-positioner';
 export { SelectRoot as Root } from './select-root';
+export { SelectRootProvider as RootProvider, } from './select-root-provider';
 export { SelectTrigger as Trigger } from './select-trigger';
 export { SelectValueText as ValueText, } from './select-value-text';

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

@@ -6,8 +6,10 @@ export { SliderMarker } from './slider-marker';
 export { SliderMarkerGroup } from './slider-marker-group';
 export { SliderRange } from './slider-range';
 export { SliderRoot } from './slider-root';
+export { SliderRootProvider } from './slider-root-provider';
 export { SliderThumb } from './slider-thumb';
 export { SliderTrack } from './slider-track';
 export { SliderValueText } from './slider-value-text';
+export { useSlider } from './use-slider';
 export { useSliderContext } from './use-slider-context';
 export * as Slider from './slider';

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

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

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

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

package/dist/source/components/slider/slider-marker-group.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useSliderContext } from './use-slider-context';
 export const SliderMarkerGroup = (props) => {
     const api = useSliderContext();
-    const mergedProps = mergeProps(() => api().markerGroupProps, props);
+    const mergedProps = mergeProps(() => api().getMarkerGroupProps(), props);
     return <ark.div {...mergedProps}/>;
 };

package/dist/source/components/slider/slider-range.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useSliderContext } from './use-slider-context';
 export const SliderRange = (props) => {
     const api = useSliderContext();
-    const mergedProps = mergeProps(() => api().rangeProps, props);
+    const mergedProps = mergeProps(() => api().getRangeProps(), props);
     return <ark.div {...mergedProps}/>;
 };

package/dist/source/components/slider/slider-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 { SliderProvider } from './use-slider-context';
+export const SliderRootProvider = (props) => {
+    const [{ value: slider }, localProps] = createSplitProps()(props, ['value']);
+    const mergedProps = mergeProps(() => slider().getRootProps(), localProps);
+    return (<SliderProvider value={slider}>
+      <ark.div {...mergedProps}/>
+    </SliderProvider>);
+};

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

@@ -31,7 +31,7 @@ export const SliderRoot = (props) => {
         'value',
     ]);
     const api = useSlider(useSliderProps);
-    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const mergedProps = mergeProps(() => api().getRootProps(), localProps);
     return (<SliderProvider value={api}>
       <ark.div {...mergedProps}/>
     </SliderProvider>);

package/dist/source/components/slider/slider-track.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useSliderContext } from './use-slider-context';
 export const SliderTrack = (props) => {
     const api = useSliderContext();
-    const mergedProps = mergeProps(() => api().trackProps, props);
+    const mergedProps = mergeProps(() => api().getTrackProps(), props);
     return <ark.div {...mergedProps}/>;
 };

package/dist/source/components/slider/slider-value-text.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useSliderContext } from './use-slider-context';
 export const SliderValueText = (props) => {
     const api = useSliderContext();
-    const mergedProps = mergeProps(() => api().valueTextProps, props);
+    const mergedProps = mergeProps(() => api().getValueTextProps(), props);
     return <ark.span {...mergedProps}>{props.children || api().value.join(',')}</ark.span>;
 };

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

@@ -1,11 +1,12 @@
 export { SliderContext as Context } from './slider-context';
 export { SliderControl as Control } from './slider-control';
-export { SliderHiddenInput as HiddenInput, } from './slider-hidden-input';
 export { SliderLabel as Label } from './slider-label';
 export { SliderMarker as Marker } from './slider-marker';
 export { SliderMarkerGroup as MarkerGroup, } from './slider-marker-group';
 export { SliderRange as Range } from './slider-range';
 export { SliderRoot as Root } from './slider-root';
+export { SliderRootProvider as RootProvider, } from './slider-root-provider';
 export { SliderThumb as Thumb } from './slider-thumb';
 export { SliderTrack as Track } from './slider-track';
+export { SliderHiddenInput as HiddenInput, } from './slider-hidden-input';
 export { SliderValueText as ValueText, } from './slider-value-text';

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

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

package/dist/source/components/splitter/splitter-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 { SplitterProvider } from './use-splitter-context';
+export const SplitterRootProvider = (props) => {
+    const [{ value: splitter }, localProps] = createSplitProps()(props, ['value']);
+    const mergedProps = mergeProps(() => splitter().getRootProps(), localProps);
+    return (<SplitterProvider value={splitter}>
+      <ark.div {...mergedProps}/>
+    </SplitterProvider>);
+};

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

@@ -14,7 +14,7 @@ export const SplitterRoot = (props) => {
         'size',
     ]);
     const api = useSplitter(useSplitterProps);
-    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const mergedProps = mergeProps(() => api().getRootProps(), localProps);
     return (<SplitterProvider value={api}>
       <ark.div {...mergedProps}/>
     </SplitterProvider>);

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

@@ -2,3 +2,4 @@ export { SplitterContext as Context, } from './splitter-context';
 export { SplitterPanel as Panel } from './splitter-panel';
 export { SplitterResizeTrigger as ResizeTrigger, } from './splitter-resize-trigger';
 export { SplitterRoot as Root } from './splitter-root';
+export { SplitterRootProvider as RootProvider, } from './splitter-root-provider';

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

@@ -3,6 +3,8 @@ export { SwitchControl } from './switch-control';
 export { SwitchHiddenInput } from './switch-hidden-input';
 export { SwitchLabel } from './switch-label';
 export { SwitchRoot } from './switch-root';
+export { SwitchRootProvider } from './switch-root-provider';
 export { SwitchThumb } from './switch-thumb';
+export { useSwitch } from './use-switch';
 export { useSwitchContext } from './use-switch-context';
 export * as Switch from './switch';

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

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

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

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

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

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

package/dist/source/components/switch/switch-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 { SwitchProvider } from './use-switch-context';
+export const SwitchRootProvider = (props) => {
+    const [{ value: api }, localProps] = createSplitProps()(props, ['value']);
+    const mergedProps = mergeProps(() => api().getRootProps(), localProps);
+    return (<SwitchProvider value={api}>
+      <ark.label {...mergedProps}/>
+    </SwitchProvider>);
+};

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

@@ -20,7 +20,7 @@ export const SwitchRoot = (props) => {
         'value',
     ]);
     const api = useSwitch(switchProps);
-    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const mergedProps = mergeProps(() => api().getRootProps(), localProps);
     return (<SwitchProvider value={api}>
       <ark.label {...mergedProps}/>
     </SwitchProvider>);

package/dist/source/components/switch/switch-thumb.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useSwitchContext } from './use-switch-context';
 export const SwitchThumb = (props) => {
     const api = useSwitchContext();
-    const mergedProps = mergeProps(() => api().thumbProps, props);
+    const mergedProps = mergeProps(() => api().getThumbProps(), props);
     return <ark.span {...mergedProps}/>;
 };

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

@@ -3,4 +3,5 @@ export { SwitchControl as Control } from './switch-control';
 export { SwitchHiddenInput as HiddenInput, } from './switch-hidden-input';
 export { SwitchLabel as Label } from './switch-label';
 export { SwitchRoot as Root } from './switch-root';
+export { SwitchRootProvider as RootProvider, } from './switch-root-provider';
 export { SwitchThumb as Thumb } from './switch-thumb';

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

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

package/dist/source/components/tabs/tab-indicator.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useTabsContext } from './use-tabs-context';
 export const TabIndicator = (props) => {
     const api = useTabsContext();
-    const mergedProps = mergeProps(() => api().indicatorProps, props);
+    const mergedProps = mergeProps(() => api().getIndicatorProps(), props);
     return <ark.div {...mergedProps}/>;
 };

package/dist/source/components/tabs/tab-list.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useTabsContext } from './use-tabs-context';
 export const TabList = (props) => {
     const api = useTabsContext();
-    const mergedProps = mergeProps(() => api().listProps, props);
+    const mergedProps = mergeProps(() => api().getListProps(), props);
     return <ark.div {...mergedProps}/>;
 };

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

@@ -0,0 +1,15 @@
+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 { TabsProvider } from './use-tabs-context';
+export const TabsRootProvider = (props) => {
+    const [renderStrategyProps, tabsProps] = splitRenderStrategyProps(props);
+    const [{ value: tabs }, localprops] = createSplitProps()(tabsProps, ['value']);
+    const mergedProps = mergeProps(() => tabs().getRootProps(), localprops);
+    return (<TabsProvider value={tabs}>
+      <RenderStrategyProvider value={renderStrategyProps}>
+        <ark.div {...mergedProps}/>
+      </RenderStrategyProvider>
+    </TabsProvider>);
+};

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

@@ -20,7 +20,7 @@ export const TabsRoot = (props) => {
         'value',
     ]);
     const api = useTabs(useTabsProps);
-    const mergedProps = mergeProps(() => api().rootProps, restProps);
+    const mergedProps = mergeProps(() => api().getRootProps(), restProps);
     return (<TabsProvider value={api}>
       <RenderStrategyProvider value={renderStrategyProps}>
         <ark.div {...mergedProps}/>

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

@@ -4,3 +4,4 @@ export { TabList as List } from './tab-list';
 export { TabTrigger as Trigger } from './tab-trigger';
 export { TabsContext as Context } from './tabs-context';
 export { TabsRoot as Root } from './tabs-root';
+export { TabsRootProvider as RootProvider, } from './tabs-root-provider';