@ark-ui/solid 1.3.0 → 2.0.1

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

@@ -1,36 +1,5 @@
-import { mergeProps } from '@zag-js/solid';
-import { createSplitProps } from '../create-split-props';
-import { ark } from '../factory';
-import { PinInputProvider } from './pin-input-context';
-import { usePinInput } from './use-pin-input';
-export const PinInput = (props) => {
-    const [usePinInputProps, localProps] = createSplitProps()(props, [
-        'autoFocus',
-        'blurOnComplete',
-        'dir',
-        'disabled',
-        'form',
-        'getRootNode',
-        'id',
-        'ids',
-        'invalid',
-        'mask',
-        'name',
-        'onValueChange',
-        'onValueComplete',
-        'onValueInvalid',
-        'otp',
-        'pattern',
-        'placeholder',
-        'selectOnFocus',
-        'translations',
-        'type',
-        'value',
-    ]);
-    const api = usePinInput(usePinInputProps);
-    const mergedProps = mergeProps(() => api().rootProps, localProps);
-    return (<PinInputProvider value={api}>
-      <ark.div {...mergedProps}/>
-      <input {...api().hiddenInputProps}/>
-    </PinInputProvider>);
-};
+import { PinInputControl as Control } from './pin-input-control';
+import { PinInputInput as Input } from './pin-input-input';
+import { PinInputLabel as Label } from './pin-input-label';
+import { PinInputRoot as Root } from './pin-input-root';
+export { Control, Input, Label, Root };

package/source/popover/index.js

@@ -1,4 +1,3 @@
-import { Popover as PopoverRoot } from './popover';
 import { PopoverAnchor } from './popover-anchor';
 import { PopoverArrow } from './popover-arrow';
 import { PopoverArrowTip } from './popover-arrow-tip';
@@ -8,19 +7,8 @@ import { usePopoverContext } from './popover-context';
 import { PopoverDescription } from './popover-description';
 import { PopoverIndicator } from './popover-indicator';
 import { PopoverPositioner } from './popover-positioner';
+import { PopoverRoot } from './popover-root';
 import { PopoverTitle } from './popover-title';
 import { PopoverTrigger } from './popover-trigger';
-const Popover = Object.assign(PopoverRoot, {
-    Root: PopoverRoot,
-    Anchor: PopoverAnchor,
-    Arrow: PopoverArrow,
-    ArrowTip: PopoverArrowTip,
-    CloseTrigger: PopoverCloseTrigger,
-    Content: PopoverContent,
-    Description: PopoverDescription,
-    Indicator: PopoverIndicator,
-    Positioner: PopoverPositioner,
-    Title: PopoverTitle,
-    Trigger: PopoverTrigger,
-});
-export { Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverTitle, PopoverTrigger, usePopoverContext, };
+export * as Popover from './popover';
+export { PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverRoot, PopoverTitle, PopoverTrigger, usePopoverContext, };

package/source/popover/popover-root.jsx

@@ -0,0 +1,34 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
+import { runIfFn } from '../run-if-fn';
+import { PopoverProvider } from './popover-context';
+import { usePopover } from './use-popover';
+export const PopoverRoot = (props) => {
+    const [presenceProps, popoverProps] = splitPresenceProps(props);
+    const [usePopoverProps, localProps] = createSplitProps()(popoverProps, [
+        'autoFocus',
+        'closeOnEsc',
+        'closeOnInteractOutside',
+        'dir',
+        'getRootNode',
+        'id',
+        'ids',
+        'initialFocusEl',
+        'modal',
+        'onEscapeKeyDown',
+        'onFocusOutside',
+        'onInteractOutside',
+        'onOpenChange',
+        'onPointerDownOutside',
+        'open',
+        'portalled',
+        'positioning',
+    ]);
+    const api = usePopover(usePopoverProps);
+    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().isOpen })));
+    const getChildren = () => runIfFn(localProps.children, api);
+    return (<PopoverProvider value={api}>
+      <PresenceProvider value={apiPresence}>{getChildren()}</PresenceProvider>
+    </PopoverProvider>);
+};

package/source/popover/popover-trigger.jsx

@@ -6,6 +6,5 @@ export const PopoverTrigger = (props) => {
     const api = usePopoverContext();
     const presenceApi = usePresenceContext();
     const mergedProps = mergeProps(() => api().triggerProps, () => ({ 'aria-controls': presenceApi().isUnmounted && null }), props);
-    // @ts-expect-error we want aria-controls to be null to remove them if the popover if lazy mounted
     return <ark.button {...mergedProps}/>;
 };

package/source/popover/popover.jsx

@@ -1,34 +1,12 @@
-import { mergeProps } from '@zag-js/solid';
-import { createSplitProps } from '../create-split-props';
-import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
-import { runIfFn } from '../run-if-fn';
-import { PopoverProvider } from './popover-context';
-import { usePopover } from './use-popover';
-export const Popover = (props) => {
-    const [presenceProps, popoverProps] = splitPresenceProps(props);
-    const [usePopoverProps, localProps] = createSplitProps()(popoverProps, [
-        'autoFocus',
-        'closeOnEsc',
-        'closeOnInteractOutside',
-        'dir',
-        'getRootNode',
-        'id',
-        'ids',
-        'initialFocusEl',
-        'modal',
-        'onEscapeKeyDown',
-        'onFocusOutside',
-        'onInteractOutside',
-        'onOpenChange',
-        'onPointerDownOutside',
-        'open',
-        'portalled',
-        'positioning',
-    ]);
-    const api = usePopover(usePopoverProps);
-    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().isOpen })));
-    const getChildren = () => runIfFn(localProps.children, api);
-    return (<PopoverProvider value={api}>
-      <PresenceProvider value={apiPresence}>{getChildren()}</PresenceProvider>
-    </PopoverProvider>);
-};
+import { PopoverAnchor as Anchor } from './popover-anchor';
+import { PopoverArrow as Arrow } from './popover-arrow';
+import { PopoverArrowTip as ArrowTip } from './popover-arrow-tip';
+import { PopoverCloseTrigger as CloseTrigger } from './popover-close-trigger';
+import { PopoverContent as Content } from './popover-content';
+import { PopoverDescription as Description } from './popover-description';
+import { PopoverIndicator as Indicator } from './popover-indicator';
+import { PopoverPositioner as Positioner } from './popover-positioner';
+import { PopoverRoot as Root } from './popover-root';
+import { PopoverTitle as Title } from './popover-title';
+import { PopoverTrigger as Trigger } from './popover-trigger';
+export { Anchor, Arrow, ArrowTip, CloseTrigger, Content, Description, Indicator, Positioner, Root, Title, Trigger, };

package/source/presence/index.js

@@ -1,9 +1,6 @@
-import { Presence as PresenceRoot } from './presence';
+import { Presence } from './presence';
 import { PresenceProvider, usePresenceContext } from './presence-context';
 import { PresencePropsProvider, usePresencePropsContext, } from './presence-props-context';
 import { splitPresenceProps } from './split-presence-props';
 import { usePresence } from './use-presence';
-const Presence = Object.assign(PresenceRoot, {
-    Root: PresenceRoot,
-});
 export { Presence, PresencePropsProvider, PresenceProvider, splitPresenceProps, usePresence, usePresenceContext, usePresencePropsContext, };

package/source/progress/index.js

@@ -1,22 +1,12 @@
-import { Progress as ProgressRoot } from './progress';
 import { ProgressCircle } from './progress-circle';
 import { ProgressCircleRange } from './progress-circle-range';
 import { ProgressCircleTrack } from './progress-circle-track';
 import { useProgressContext } from './progress-context';
-import { ProgressIndicator } from './progress-indicator';
 import { ProgressLabel } from './progress-label';
 import { ProgressRange } from './progress-range';
+import { ProgressRoot } from './progress-root';
 import { ProgressTrack } from './progress-track';
 import { ProgressValueText } from './progress-value-text';
-const Progress = Object.assign(ProgressRoot, {
-    Root: ProgressRoot,
-    Label: ProgressLabel,
-    Track: ProgressTrack,
-    Range: ProgressRange,
-    ValueText: ProgressValueText,
-    Indicator: ProgressIndicator,
-    Circle: ProgressCircle,
-    CircleTrack: ProgressCircleTrack,
-    CircleRange: ProgressCircleRange,
-});
-export { Progress, ProgressCircle, ProgressCircleRange, ProgressCircleTrack, ProgressIndicator, ProgressLabel, ProgressRange, ProgressTrack, ProgressValueText, useProgressContext, };
+import { ProgressView } from './progress-view';
+export * as Progress from './progress';
+export { ProgressCircle, ProgressCircleRange, ProgressCircleTrack, ProgressLabel, ProgressRange, ProgressRoot, ProgressTrack, ProgressValueText, ProgressView, useProgressContext, };

package/source/progress/progress-root.jsx

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

package/source/progress/{progress-indicator.jsx → progress-view.jsx}

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

package/source/progress/progress.jsx

@@ -1,24 +1,10 @@
-import { mergeProps } from '@zag-js/solid';
-import { createSplitProps } from '../create-split-props';
-import { ark } from '../factory';
-import { runIfFn } from '../run-if-fn';
-import { ProgressProvider } from './progress-context';
-import { useProgress } from './use-progress';
-export const Progress = (props) => {
-    const [progressProps, localProps] = createSplitProps()(props, [
-        'dir',
-        'getRootNode',
-        'id',
-        'max',
-        'min',
-        'orientation',
-        'translations',
-        'value',
-    ]);
-    const api = useProgress(progressProps);
-    const mergedProps = mergeProps(() => api().rootProps, localProps);
-    const getChildren = () => runIfFn(localProps.children, api);
-    return (<ProgressProvider value={api}>
-      <ark.div {...mergedProps}>{getChildren()}</ark.div>
-    </ProgressProvider>);
-};
+import { ProgressCircle as Circle } from './progress-circle';
+import { ProgressCircleRange as CircleRange } from './progress-circle-range';
+import { ProgressCircleTrack as CircleTrack } from './progress-circle-track';
+import { ProgressLabel as Label } from './progress-label';
+import { ProgressRange as Range } from './progress-range';
+import { ProgressRoot as Root } from './progress-root';
+import { ProgressTrack as Track } from './progress-track';
+import { ProgressValueText as ValueText } from './progress-value-text';
+import { ProgressView as View } from './progress-view';
+export { Circle, CircleRange, CircleTrack, Label, Range, Root, Track, ValueText, View };

package/source/radio-group/index.js

@@ -1,4 +1,3 @@
-import { RadioGroup as RadioGroupRoot } from './radio-group';
 import { useRadioGroupContext } from './radio-group-context';
 import { RadioGroupIndicator } from './radio-group-indicator';
 import { RadioGroupItem } from './radio-group-item';
@@ -6,12 +5,6 @@ import { useRadioGroupItemContext } from './radio-group-item-context';
 import { RadioGroupItemControl } from './radio-group-item-control';
 import { RadioGroupItemText } from './radio-group-item-text';
 import { RadioGroupLabel } from './radio-group-label';
-const RadioGroup = Object.assign(RadioGroupRoot, {
-    Root: RadioGroupRoot,
-    Indicator: RadioGroupIndicator,
-    Item: RadioGroupItem,
-    ItemControl: RadioGroupItemControl,
-    ItemText: RadioGroupItemText,
-    Label: RadioGroupLabel,
-});
-export { RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel, useRadioGroupContext, useRadioGroupItemContext, };
+import { RadioGroupRoot } from './radio-group-root';
+export * as RadioGroup from './radio-group';
+export { RadioGroupIndicator, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel, RadioGroupRoot, useRadioGroupContext, useRadioGroupItemContext, };

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

@@ -0,0 +1,24 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { RadioGroupProvider } from './radio-group-context';
+import { useRadioGroup } from './use-radio-group';
+export const RadioGroupRoot = (props) => {
+    const [useRadioGroupProps, localProps] = createSplitProps()(props, [
+        'dir',
+        'disabled',
+        'form',
+        'getRootNode',
+        'id',
+        'ids',
+        'name',
+        'onValueChange',
+        'orientation',
+        'value',
+    ]);
+    const api = useRadioGroup(useRadioGroupProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    return (<RadioGroupProvider value={api}>
+      <ark.div {...mergedProps}/>
+    </RadioGroupProvider>);
+};

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

@@ -1,24 +1,7 @@
-import { mergeProps } from '@zag-js/solid';
-import { createSplitProps } from '../create-split-props';
-import { ark } from '../factory';
-import { RadioGroupProvider } from './radio-group-context';
-import { useRadioGroup } from './use-radio-group';
-export const RadioGroup = (props) => {
-    const [useRadioGroupProps, localProps] = createSplitProps()(props, [
-        'dir',
-        'disabled',
-        'form',
-        'getRootNode',
-        'id',
-        'ids',
-        'name',
-        'onValueChange',
-        'orientation',
-        'value',
-    ]);
-    const api = useRadioGroup(useRadioGroupProps);
-    const mergedProps = mergeProps(() => api().rootProps, localProps);
-    return (<RadioGroupProvider value={api}>
-      <ark.div {...mergedProps}/>
-    </RadioGroupProvider>);
-};
+import { RadioGroupIndicator as Indicator } from './radio-group-indicator';
+import { RadioGroupItem as Item } from './radio-group-item';
+import { RadioGroupItemControl as ItemControl } from './radio-group-item-control';
+import { RadioGroupItemText as ItemText } from './radio-group-item-text';
+import { RadioGroupLabel as Label } from './radio-group-label';
+import { RadioGroupRoot as Root } from './radio-group-root';
+export { Indicator, Item, ItemControl, ItemText, Label, Root };

package/source/rating-group/index.js

@@ -1,13 +1,8 @@
-import { RatingGroup as RatingGroupRoot } from './rating-group';
 import { useRatingGroupContext } from './rating-group-context';
 import { RatingGroupControl } from './rating-group-control';
 import { RatingGroupItem } from './rating-group-item';
 import { useRatingGroupItemContext } from './rating-group-item-context';
 import { RatingGroupLabel } from './rating-group-label';
-const RatingGroup = Object.assign(RatingGroupRoot, {
-    Root: RatingGroupRoot,
-    Control: RatingGroupControl,
-    Label: RatingGroupLabel,
-    Item: RatingGroupItem,
-});
-export { RatingGroup, RatingGroupControl, RatingGroupItem, RatingGroupLabel, useRatingGroupContext, useRatingGroupItemContext, };
+import { RatingGroupRoot } from './rating-group-root';
+export * as RatingGroup from './rating-group';
+export { RatingGroupControl, RatingGroupItem, RatingGroupLabel, RatingGroupRoot, useRatingGroupContext, useRatingGroupItemContext, };

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

@@ -0,0 +1,29 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { RatingGroupProvider } from './rating-group-context';
+import { useRatingGroup } from './use-rating-group';
+export const RatingGroupRoot = (props) => {
+    const [useRatingProps, localProps] = createSplitProps()(props, [
+        'allowHalf',
+        'autoFocus',
+        'count',
+        'dir',
+        'disabled',
+        'form',
+        'getRootNode',
+        'id',
+        'ids',
+        'name',
+        'onHoverChange',
+        'onValueChange',
+        'readOnly',
+        'translations',
+        'value',
+    ]);
+    const api = useRatingGroup(useRatingProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    return (<RatingGroupProvider value={api}>
+      <ark.div {...mergedProps}/>
+    </RatingGroupProvider>);
+};

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

@@ -1,29 +1,5 @@
-import { mergeProps } from '@zag-js/solid';
-import { createSplitProps } from '../create-split-props';
-import { ark } from '../factory';
-import { RatingGroupProvider } from './rating-group-context';
-import { useRatingGroup } from './use-rating-group';
-export const RatingGroup = (props) => {
-    const [useRatingProps, localProps] = createSplitProps()(props, [
-        'allowHalf',
-        'autoFocus',
-        'count',
-        'dir',
-        'disabled',
-        'form',
-        'getRootNode',
-        'id',
-        'ids',
-        'name',
-        'onHoverChange',
-        'onValueChange',
-        'readOnly',
-        'translations',
-        'value',
-    ]);
-    const api = useRatingGroup(useRatingProps);
-    const mergedProps = mergeProps(() => api().rootProps, localProps);
-    return (<RatingGroupProvider value={api}>
-      <ark.div {...mergedProps}/>
-    </RatingGroupProvider>);
-};
+import { RatingGroupControl as Control } from './rating-group-control';
+import { RatingGroupItem as Item } from './rating-group-item';
+import { RatingGroupLabel as Label } from './rating-group-label';
+import { RatingGroupRoot as Root } from './rating-group-root';
+export { Control, Item, Label, Root };

package/source/segment-group/index.js

@@ -1,4 +1,3 @@
-import { SegmentGroup as SegmentGroupRoot } from './segment-group';
 import { useSegmentGroupContext } from './segment-group-context';
 import { SegmentGroupIndicator } from './segment-group-indicator';
 import { SegmentGroupItem } from './segment-group-item';
@@ -6,12 +5,6 @@ import { useSegmentGroupItemContext, } from './segment-group-item-context';
 import { SegmentGroupItemControl, } from './segment-group-item-control';
 import { SegmentGroupItemText } from './segment-group-item-text';
 import { SegmentGroupLabel } from './segment-group-label';
-const SegmentGroup = Object.assign(SegmentGroupRoot, {
-    Root: SegmentGroupRoot,
-    Indicator: SegmentGroupIndicator,
-    Item: SegmentGroupItem,
-    ItemControl: SegmentGroupItemControl,
-    ItemText: SegmentGroupItemText,
-    Label: SegmentGroupLabel,
-});
-export { SegmentGroup, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel, useSegmentGroupContext, useSegmentGroupItemContext, };
+import { SegmentGroupRoot } from './segment-group-root';
+export * as SegmentGroup from './segment-group';
+export { SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel, SegmentGroupRoot, useSegmentGroupContext, useSegmentGroupItemContext, };

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

@@ -0,0 +1,25 @@
+import { segmentGroupAnatomy } from '@ark-ui/anatomy';
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { SegmentGroupProvider } from './segment-group-context';
+import { useSegmentGroup } from './use-segment-group';
+export const SegmentGroupRoot = (props) => {
+    const [groupParams, localProps] = createSplitProps()(props, [
+        'dir',
+        'disabled',
+        'form',
+        'getRootNode',
+        'id',
+        'ids',
+        'name',
+        'onValueChange',
+        'orientation',
+        'value',
+    ]);
+    const api = useSegmentGroup(groupParams);
+    const mergedProps = mergeProps(() => api().rootProps, segmentGroupAnatomy.build().root.attrs, localProps);
+    return (<SegmentGroupProvider value={api}>
+      <ark.div {...mergedProps}/>
+    </SegmentGroupProvider>);
+};

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

@@ -1,25 +1,7 @@
-import { segmentGroupAnatomy } from '@ark-ui/anatomy';
-import { mergeProps } from '@zag-js/solid';
-import { createSplitProps } from '../create-split-props';
-import { ark } from '../factory';
-import { SegmentGroupProvider } from './segment-group-context';
-import { useSegmentGroup } from './use-segment-group';
-export const SegmentGroup = (props) => {
-    const [groupParams, localProps] = createSplitProps()(props, [
-        'dir',
-        'disabled',
-        'form',
-        'getRootNode',
-        'id',
-        'ids',
-        'name',
-        'onValueChange',
-        'orientation',
-        'value',
-    ]);
-    const api = useSegmentGroup(groupParams);
-    const mergedProps = mergeProps(() => api().rootProps, segmentGroupAnatomy.build().root.attrs, localProps);
-    return (<SegmentGroupProvider value={api}>
-      <ark.div {...mergedProps}/>
-    </SegmentGroupProvider>);
-};
+import { SegmentGroupIndicator as Indicator } from './segment-group-indicator';
+import { SegmentGroupItem as Item } from './segment-group-item';
+import { SegmentGroupItemControl as ItemControl } from './segment-group-item-control';
+import { SegmentGroupItemText as ItemText } from './segment-group-item-text';
+import { SegmentGroupLabel as Label } from './segment-group-label';
+import { SegmentGroupRoot as Root } from './segment-group-root';
+export { Indicator, Item, ItemControl, ItemText, Label, Root };

package/source/select/index.js

@@ -1,4 +1,3 @@
-import { Select as SelectRoot } from './select';
 import { SelectClearTrigger } from './select-clear-trigger';
 import { SelectContent } from './select-content';
 import { useSelectContext } from './select-context';
@@ -12,22 +11,8 @@ import { SelectItemIndicator } from './select-item-indicator';
 import { SelectItemText } from './select-item-text';
 import { SelectLabel } from './select-label';
 import { SelectPositioner } from './select-positioner';
+import { SelectRoot } from './select-root';
 import { SelectTrigger } from './select-trigger';
 import { SelectValueText } from './select-value-text';
-const Select = Object.assign(SelectRoot, {
-    Root: SelectRoot,
-    ClearTrigger: SelectClearTrigger,
-    Content: SelectContent,
-    Control: SelectControl,
-    Indicator: SelectIndicator,
-    Item: SelectItem,
-    ItemGroup: SelectItemGroup,
-    ItemGroupLabel: SelectItemGroupLabel,
-    ItemIndicator: SelectItemIndicator,
-    ItemText: SelectItemText,
-    Label: SelectLabel,
-    Positioner: SelectPositioner,
-    Trigger: SelectTrigger,
-    ValueText: SelectValueText,
-});
-export { Select, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText, useSelectContext, useSelectItemContext, };
+export * as Select from './select';
+export { SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectRoot, SelectTrigger, SelectValueText, useSelectContext, useSelectItemContext, };

package/source/select/select-root.jsx

@@ -0,0 +1,48 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
+import { runIfFn } from '../run-if-fn';
+import { SelectProvider } from './select-context';
+import { useSelect } from './use-select';
+export const SelectRoot = (props) => {
+    const [presenceProps, selectProps] = splitPresenceProps(props);
+    const [useSelectProps, localProps] = createSplitProps()(selectProps, [
+        'closeOnSelect',
+        'dir',
+        'disabled',
+        'form',
+        'getRootNode',
+        'highlightedValue',
+        'id',
+        'ids',
+        'invalid',
+        'isItemDisabled',
+        'items',
+        'itemToString',
+        'itemToValue',
+        'loop',
+        'multiple',
+        'name',
+        'onFocusOutside',
+        'onHighlightChange',
+        'onInteractOutside',
+        'onOpenChange',
+        'onPointerDownOutside',
+        'onValueChange',
+        'open',
+        'positioning',
+        'readOnly',
+        'selectOnBlur',
+        'value',
+    ]);
+    const api = useSelect(useSelectProps);
+    const presenceApi = usePresence(mergeProps(() => ({ present: api().isOpen }), presenceProps));
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const getChildren = () => runIfFn(localProps.children, api);
+    return (<SelectProvider value={api}>
+      <PresenceProvider value={presenceApi}>
+        <ark.div {...mergedProps}>{getChildren()}</ark.div>
+      </PresenceProvider>
+    </SelectProvider>);
+};