@ark-ui/solid 1.2.0 → 2.0.0

package/source/index.jsx

@@ -17,6 +17,7 @@ export * from './pagination';
 export * from './pin-input';
 export * from './popover';
 export * from './presence';
+export * from './progress';
 export * from './radio-group';
 export * from './rating-group';
 export * from './segment-group';
@@ -29,3 +30,4 @@ export * from './tags-input';
 export * from './toast';
 export * from './toggle-group';
 export * from './tooltip';
+export * from './tree-view';

package/source/menu/index.js

@@ -1,4 +1,3 @@
-import { Menu as MenuRoot } from './menu';
 import { MenuArrow } from './menu-arrow';
 import { MenuArrowTip } from './menu-arrow-tip';
 import { MenuContent } from './menu-content';
@@ -9,10 +8,11 @@ import { MenuItemGroup } from './menu-item-group';
 import { MenuItemGroupLabel } from './menu-item-group-label';
 import { MenuOptionItem } from './menu-option-item';
 import { MenuPositioner } from './menu-positioner';
+import { MenuRoot } from './menu-root';
 import { MenuSeparator } from './menu-separator';
 import { MenuTrigger } from './menu-trigger';
 import { MenuTriggerItem } from './menu-trigger-item';
-const Menu = Object.assign(MenuRoot, {
+export const Menu = {
     Root: MenuRoot,
     Arrow: MenuArrow,
     ArrowTip: MenuArrowTip,
@@ -26,5 +26,5 @@ const Menu = Object.assign(MenuRoot, {
     Separator: MenuSeparator,
     Trigger: MenuTrigger,
     TriggerItem: MenuTriggerItem,
-});
-export { Menu, MenuArrow, MenuArrowTip, MenuContent, MenuContextTrigger, MenuItem, MenuItemGroup, MenuItemGroupLabel, MenuOptionItem, MenuPositioner, MenuSeparator, MenuTrigger, MenuTriggerItem, useMenuContext, };
+};
+export { MenuArrow, MenuArrowTip, MenuContent, MenuContextTrigger, MenuItem, MenuItemGroup, MenuItemGroupLabel, MenuOptionItem, MenuPositioner, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, useMenuContext, };

package/source/menu/{menu.jsx → menu-root.jsx}

@@ -5,7 +5,7 @@ import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence'
 import { runIfFn } from '../run-if-fn';
 import { MenuMachineProvider, MenuProvider, MenuTriggerItemProvider, useMenuContext, useMenuMachineContext, } from './menu-context';
 import { useMenu } from './use-menu';
-export const Menu = (props) => {
+export const MenuRoot = (props) => {
     const [presenceProps, menuProps] = splitPresenceProps(props);
     const [useMenuProps, localProps] = createSplitProps()(menuProps, [
         'anchorPoint',

package/source/menu/menu-trigger.jsx

@@ -6,6 +6,5 @@ export const MenuTrigger = (props) => {
     const api = useMenuContext();
     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/number-input/index.js

@@ -1,12 +1,12 @@
-import { NumberInput as NumberInputRoot } from './number-input';
 import { useNumberInputContext } from './number-input-context';
 import { NumberInputControl } from './number-input-control';
 import { NumberInputDecrementTrigger, } from './number-input-decrement-trigger';
 import { NumberInputIncrementTrigger, } from './number-input-increment-trigger';
 import { NumberInputInput } from './number-input-input';
 import { NumberInputLabel } from './number-input-label';
+import { NumberInputRoot } from './number-input-root';
 import { NumberInputScrubber } from './number-input-scrubber';
-const NumberInput = Object.assign(NumberInputRoot, {
+export const NumberInput = {
     Root: NumberInputRoot,
     Control: NumberInputControl,
     DecrementTrigger: NumberInputDecrementTrigger,
@@ -14,5 +14,5 @@ const NumberInput = Object.assign(NumberInputRoot, {
     IncrementTrigger: NumberInputIncrementTrigger,
     Label: NumberInputLabel,
     Scrubber: NumberInputScrubber,
-});
-export { NumberInput, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputScrubber, useNumberInputContext, };
+};
+export { NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputRoot, NumberInputScrubber, useNumberInputContext, };

package/source/number-input/{number-input.jsx → number-input-root.jsx}

@@ -4,7 +4,7 @@ import { ark } from '../factory';
 import { runIfFn } from '../run-if-fn';
 import { NumberInputProvider } from './number-input-context';
 import { useNumberInput, } from './use-number-input';
-export const NumberInput = (props) => {
+export const NumberInputRoot = (props) => {
     const [useNumberInputProps, localProps] = createSplitProps()(props, [
         'allowMouseWheel',
         'allowOverflow',

package/source/pagination/index.js

@@ -1,14 +1,14 @@
-import { Pagination as PaginationRoot } from './pagination';
 import { usePaginationContext } from './pagination-context';
 import { PaginationEllipsis } from './pagination-ellipsis';
 import { PaginationItem } from './pagination-item';
 import { PaginationNextTrigger } from './pagination-next-trigger';
 import { PaginationPrevTrigger } from './pagination-prev-trigger';
-const Pagination = Object.assign(PaginationRoot, {
+import { PaginationRoot } from './pagination-root';
+export const Pagination = {
     Root: PaginationRoot,
     Ellipsis: PaginationEllipsis,
     Item: PaginationItem,
     NextTrigger: PaginationNextTrigger,
     PrevTrigger: PaginationPrevTrigger,
-});
-export { Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, usePaginationContext, };
+};
+export { PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot, usePaginationContext, };

package/source/pagination/{pagination.jsx → pagination-root.jsx}

@@ -4,7 +4,7 @@ import { ark } from '../factory';
 import { runIfFn } from '../run-if-fn';
 import { PaginationProvider } from './pagination-context';
 import { usePagination } from './use-pagination';
-export const Pagination = (props) => {
+export const PaginationRoot = (props) => {
     const [paginationParams, localProps] = createSplitProps()(props, [
         'count',
         'dir',

package/source/pin-input/index.js

@@ -1,12 +1,12 @@
-import { PinInput as PinInputRoot } from './pin-input';
 import { usePinInputContext } from './pin-input-context';
 import { PinInputControl } from './pin-input-control';
 import { PinInputInput } from './pin-input-input';
 import { PinInputLabel } from './pin-input-label';
-const PinInput = Object.assign(PinInputRoot, {
+import { PinInputRoot } from './pin-input-root';
+export const PinInput = {
     Root: PinInputRoot,
     Control: PinInputControl,
     Input: PinInputInput,
     Label: PinInputLabel,
-});
-export { PinInput, PinInputControl, PinInputInput, PinInputLabel, usePinInputContext };
+};
+export { PinInputControl, PinInputInput, PinInputLabel, PinInputRoot, usePinInputContext };

package/source/pin-input/{pin-input.jsx → pin-input-root.jsx}

@@ -3,7 +3,7 @@ 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) => {
+export const PinInputRoot = (props) => {
     const [usePinInputProps, localProps] = createSplitProps()(props, [
         'autoFocus',
         'blurOnComplete',

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,9 +7,10 @@ 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, {
+export const Popover = {
     Root: PopoverRoot,
     Anchor: PopoverAnchor,
     Arrow: PopoverArrow,
@@ -22,5 +22,5 @@ const Popover = Object.assign(PopoverRoot, {
     Positioner: PopoverPositioner,
     Title: PopoverTitle,
     Trigger: PopoverTrigger,
-});
-export { Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverTitle, PopoverTrigger, usePopoverContext, };
+};
+export { PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverRoot, PopoverTitle, PopoverTrigger, usePopoverContext, };

package/source/popover/popover-description.jsx

@@ -4,5 +4,5 @@ import { usePopoverContext } from './popover-context';
 export const PopoverDescription = (props) => {
     const api = usePopoverContext();
     const mergedProps = mergeProps(() => api().descriptionProps, props);
-    return <ark.div {...mergedProps}/>;
+    return <ark.p {...mergedProps}/>;
 };

package/source/popover/{popover.jsx → popover-root.jsx}

@@ -4,7 +4,7 @@ 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) => {
+export const PopoverRoot = (props) => {
     const [presenceProps, popoverProps] = splitPresenceProps(props);
     const [usePopoverProps, localProps] = createSplitProps()(popoverProps, [
         'autoFocus',

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/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

@@ -0,0 +1,22 @@
+import { ProgressCircle } from './progress-circle';
+import { ProgressCircleRange } from './progress-circle-range';
+import { ProgressCircleTrack } from './progress-circle-track';
+import { useProgressContext } from './progress-context';
+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';
+import { ProgressView } from './progress-view';
+export const Progress = {
+    Root: ProgressRoot,
+    Label: ProgressLabel,
+    Track: ProgressTrack,
+    Range: ProgressRange,
+    ValueText: ProgressValueText,
+    View: ProgressView,
+    Circle: ProgressCircle,
+    CircleTrack: ProgressCircleTrack,
+    CircleRange: ProgressCircleRange,
+};
+export { ProgressCircle, ProgressCircleRange, ProgressCircleTrack, ProgressLabel, ProgressRange, ProgressRoot, ProgressTrack, ProgressValueText, ProgressView, useProgressContext, };

package/source/progress/progress-circle-range.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useProgressContext } from './progress-context';
+export const ProgressCircleRange = (props) => {
+    const api = useProgressContext();
+    const mergedProps = mergeProps(() => api().circleRangeProps, props);
+    return <ark.circle {...mergedProps}/>;
+};

package/source/progress/progress-circle-track.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useProgressContext } from './progress-context';
+export const ProgressCircleTrack = (props) => {
+    const api = useProgressContext();
+    const mergedProps = mergeProps(() => api().circleTrackProps, props);
+    return <ark.circle {...mergedProps}/>;
+};

package/source/progress/progress-circle.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useProgressContext } from './progress-context';
+export const ProgressCircle = (props) => {
+    const api = useProgressContext();
+    const mergedProps = mergeProps(() => api().circleProps, props);
+    return <ark.svg {...mergedProps}/>;
+};

package/source/progress/progress-context.js

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

package/source/progress/progress-label.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useProgressContext } from './progress-context';
+export const ProgressLabel = (props) => {
+    const api = useProgressContext();
+    const mergedProps = mergeProps(() => api().labelProps, props);
+    return <ark.label {...mergedProps}/>;
+};

package/source/progress/progress-range.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useProgressContext } from './progress-context';
+export const ProgressRange = (props) => {
+    const api = useProgressContext();
+    const mergedProps = mergeProps(() => api().rangeProps, props);
+    return <ark.div {...mergedProps}/>;
+};

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-track.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useProgressContext } from './progress-context';
+export const ProgressTrack = (props) => {
+    const api = useProgressContext();
+    const mergedProps = mergeProps(() => api().trackProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/progress/progress-value-text.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { useProgressContext } from './progress-context';
+export const ProgressValueText = (props) => {
+    const api = useProgressContext();
+    const mergedProps = mergeProps(() => api().valueTextProps, props);
+    const getChildren = () => runIfFn(props.children, () => api().valueAsString);
+    return <ark.span {...mergedProps}>{getChildren() || api().valueAsString}</ark.span>;
+};

package/source/progress/progress-view.jsx

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

package/source/progress/use-progress.js

@@ -0,0 +1,10 @@
+import * as progress from '@zag-js/progress';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext } from '../environment';
+export const useProgress = (props) => {
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
+    const [state, send] = useMachine(progress.machine(context), { context });
+    return createMemo(() => progress.connect(state, send, normalizeProps));
+};

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,13 @@ 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, {
+import { RadioGroupRoot } from './radio-group-root';
+export const RadioGroup = {
     Root: RadioGroupRoot,
     Indicator: RadioGroupIndicator,
     Item: RadioGroupItem,
     ItemControl: RadioGroupItemControl,
     ItemText: RadioGroupItemText,
     Label: RadioGroupLabel,
-});
-export { RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel, useRadioGroupContext, useRadioGroupItemContext, };
+};
+export { RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel, RadioGroupRoot, useRadioGroupContext, useRadioGroupItemContext, };

package/source/radio-group/{radio-group.jsx → radio-group-root.jsx}

@@ -3,7 +3,7 @@ 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) => {
+export const RadioGroupRoot = (props) => {
     const [useRadioGroupProps, localProps] = createSplitProps()(props, [
         'dir',
         'disabled',

package/source/rating-group/index.js

@@ -1,13 +1,13 @@
-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, {
+import { RatingGroupRoot } from './rating-group-root';
+export const RatingGroup = {
     Root: RatingGroupRoot,
     Control: RatingGroupControl,
     Label: RatingGroupLabel,
     Item: RatingGroupItem,
-});
-export { RatingGroup, RatingGroupControl, RatingGroupItem, RatingGroupLabel, useRatingGroupContext, useRatingGroupItemContext, };
+};
+export { RatingGroupControl, RatingGroupItem, RatingGroupLabel, RatingGroupRoot, useRatingGroupContext, useRatingGroupItemContext, };

package/source/rating-group/{rating-group.jsx → rating-group-root.jsx}

@@ -3,7 +3,7 @@ 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) => {
+export const RatingGroupRoot = (props) => {
     const [useRatingProps, localProps] = createSplitProps()(props, [
         'allowHalf',
         'autoFocus',

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,13 @@ 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, {
+import { SegmentGroupRoot } from './segment-group-root';
+export const SegmentGroup = {
     Root: SegmentGroupRoot,
     Indicator: SegmentGroupIndicator,
     Item: SegmentGroupItem,
     ItemControl: SegmentGroupItemControl,
     ItemText: SegmentGroupItemText,
     Label: SegmentGroupLabel,
-});
-export { SegmentGroup, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel, useSegmentGroupContext, useSegmentGroupItemContext, };
+};
+export { SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel, SegmentGroupRoot, useSegmentGroupContext, useSegmentGroupItemContext, };

package/source/segment-group/{segment-group.jsx → segment-group-root.jsx}

@@ -4,7 +4,7 @@ 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) => {
+export const SegmentGroupRoot = (props) => {
     const [groupParams, localProps] = createSplitProps()(props, [
         'dir',
         'disabled',

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,9 +11,10 @@ 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, {
+export const Select = {
     Root: SelectRoot,
     ClearTrigger: SelectClearTrigger,
     Content: SelectContent,
@@ -29,5 +29,5 @@ const Select = Object.assign(SelectRoot, {
     Positioner: SelectPositioner,
     Trigger: SelectTrigger,
     ValueText: SelectValueText,
-});
-export { Select, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText, useSelectContext, useSelectItemContext, };
+};
+export { SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectRoot, SelectTrigger, SelectValueText, useSelectContext, useSelectItemContext, };

package/source/select/{select.jsx → select-root.jsx}

@@ -5,7 +5,7 @@ import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence'
 import { runIfFn } from '../run-if-fn';
 import { SelectProvider } from './select-context';
 import { useSelect } from './use-select';
-export const Select = (props) => {
+export const SelectRoot = (props) => {
     const [presenceProps, selectProps] = splitPresenceProps(props);
     const [useSelectProps, localProps] = createSplitProps()(selectProps, [
         'closeOnSelect',

package/source/select/use-select.js

@@ -10,10 +10,10 @@ export const useSelect = (props) => {
         'itemToString',
         'items',
     ]);
-    const collection = select.collection(collectionOptions);
+    const collection = () => select.collection(collectionOptions);
     const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), getRootNode, collection }, rest);
-    const [state, send] = useMachine(select.machine(context), {
+    const context = () => mergeProps({ id: createUniqueId(), getRootNode, collection: collection() }, rest);
+    const [state, send] = useMachine(select.machine(context()), {
         context,
     });
     return createMemo(() => select.connect(state, send, normalizeProps));

package/source/slider/index.js

@@ -1,14 +1,14 @@
-import { Slider as SliderRoot } from './slider';
 import { useSliderContext } from './slider-context';
 import { SliderControl } from './slider-control';
 import { SliderLabel } from './slider-label';
 import { SliderMarker } from './slider-marker';
 import { SliderMarkerGroup } from './slider-marker-group';
 import { SliderRange } from './slider-range';
+import { SliderRoot } from './slider-root';
 import { SliderThumb } from './slider-thumb';
 import { SliderTrack } from './slider-track';
 import { SliderValueText } from './slider-value-text';
-const Slider = Object.assign(SliderRoot, {
+export const Slider = {
     Root: SliderRoot,
     Control: SliderControl,
     Label: SliderLabel,
@@ -18,5 +18,5 @@ const Slider = Object.assign(SliderRoot, {
     Thumb: SliderThumb,
     Track: SliderTrack,
     ValueText: SliderValueText,
-});
-export { Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderThumb, SliderTrack, SliderValueText, useSliderContext, };
+};
+export { SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderRoot, SliderThumb, SliderTrack, SliderValueText, useSliderContext, };

package/source/slider/{slider.jsx → slider-root.jsx}

@@ -4,7 +4,7 @@ import { ark } from '../factory';
 import { runIfFn } from '../run-if-fn';
 import { SliderProvider } from './slider-context';
 import { useSlider } from './use-slider';
-export const Slider = (props) => {
+export const SliderRoot = (props) => {
     const [sliderParams, restProps] = createSplitProps()(props, [
         'aria-label',
         'aria-labelledby',

package/source/splitter/index.js

@@ -1,10 +1,10 @@
-import { Splitter as SplitterRoot } from './splitter';
 import { useSplitterContext } from './splitter-context';
 import { SplitterPanel } from './splitter-panel';
 import { SplitterResizeTrigger } from './splitter-resize-trigger';
-const Splitter = Object.assign(SplitterRoot, {
+import { SplitterRoot } from './splitter-root';
+export const Splitter = {
     Root: SplitterRoot,
     Panel: SplitterPanel,
     ResizeTrigger: SplitterResizeTrigger,
-});
-export { Splitter, SplitterPanel, SplitterResizeTrigger, useSplitterContext };
+};
+export { SplitterPanel, SplitterResizeTrigger, SplitterRoot, useSplitterContext };

package/source/splitter/{splitter.jsx → splitter-root.jsx}

@@ -4,7 +4,7 @@ import { ark } from '../factory';
 import { runIfFn } from '../run-if-fn';
 import { SplitterProvider } from './splitter-context';
 import { useSplitter } from './use-splitter';
-export const Splitter = (props) => {
+export const SplitterRoot = (props) => {
     const [splitterParams, localProps] = createSplitProps()(props, [
         'dir',
         'getRootNode',

package/source/switch/index.js

@@ -1,12 +1,12 @@
-import { Switch as SwitchRoot } from './switch';
 import { useSwitchContext } from './switch-context';
 import { SwitchControl } from './switch-control';
 import { SwitchLabel } from './switch-label';
+import { SwitchRoot } from './switch-root';
 import { SwitchThumb } from './switch-thumb';
-const Switch = Object.assign(SwitchRoot, {
+export const Switch = {
     Root: SwitchRoot,
     Control: SwitchControl,
     Label: SwitchLabel,
     Thumb: SwitchThumb,
-});
-export { Switch, SwitchControl, SwitchLabel, SwitchThumb, useSwitchContext };
+};
+export { SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb, useSwitchContext };

package/source/switch/{switch.jsx → switch-root.jsx}

@@ -4,7 +4,7 @@ import { ark } from '../factory';
 import { runIfFn } from '../run-if-fn';
 import { SwitchProvider } from './switch-context';
 import { useSwitch } from './use-switch';
-export const Switch = (props) => {
+export const SwitchRoot = (props) => {
     const [switchProps, localProps] = createSplitProps()(props, [
         'checked',
         'dir',

package/source/tabs/index.js

@@ -2,13 +2,13 @@ import { TabContent } from './tab-content';
 import { TabIndicator } from './tab-indicator';
 import { TabList } from './tab-list';
 import { TabTrigger } from './tab-trigger';
-import { Tabs as TabsRoot } from './tabs';
 import { useTabsContext } from './tabs-context';
-const Tabs = Object.assign(TabsRoot, {
+import { TabsRoot } from './tabs-root';
+export const Tabs = {
     Root: TabsRoot,
     Content: TabContent,
     Indicator: TabIndicator,
     List: TabList,
     Trigger: TabTrigger,
-});
-export { TabContent, TabIndicator, TabList, TabTrigger, Tabs, useTabsContext };
+};
+export { TabContent, TabIndicator, TabList, TabTrigger, TabsRoot, useTabsContext };