@ark-ui/solid 1.3.0 → 2.0.0

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

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

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

@@ -4,7 +4,7 @@ import { ark } from '../factory';
 import { runIfFn } from '../run-if-fn';
 import { ProgressProvider } from './progress-context';
 import { useProgress } from './use-progress';
-export const Progress = (props) => {
+export const ProgressRoot = (props) => {
     const [progressProps, localProps] = createSplitProps()(props, [
         'dir',
         'getRootNode',

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

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

@@ -4,7 +4,7 @@ import { ark } from '../factory';
 import { PresencePropsProvider, splitPresenceProps } from '../presence';
 import { TabsProvider } from './tabs-context';
 import { useTabs } from './use-tabs';
-export const Tabs = (props) => {
+export const TabsRoot = (props) => {
     const [presenceProps, tabsProps] = splitPresenceProps(props);
     const [tabsParams, restProps] = createSplitProps()(tabsProps, [
         'activationMode',

package/source/tags-input/index.js

@@ -1,4 +1,3 @@
-import { TagsInput as TagsInputRoot } from './tags-input';
 import { TagsInputClearTrigger } from './tags-input-clear-trigger';
 import { useTagsInputContext } from './tags-input-context';
 import { TagsInputControl } from './tags-input-control';
@@ -7,17 +6,20 @@ import { TagsInputItem } from './tags-input-item';
 import { useTagsInputItemContext } from './tags-input-item-context';
 import { TagsInputItemDeleteTrigger, } from './tags-input-item-delete-trigger';
 import { TagsInputItemInput } from './tags-input-item-input';
+import { TagsInputItemPreview } from './tags-input-item-preview';
 import { TagsInputItemText } from './tags-input-item-text';
 import { TagsInputLabel } from './tags-input-label';
-const TagsInput = Object.assign(TagsInputRoot, {
+import { TagsInputRoot } from './tags-input-root';
+export const TagsInput = {
     Root: TagsInputRoot,
     ClearTrigger: TagsInputClearTrigger,
     Control: TagsInputControl,
     Input: TagsInputInput,
     Item: TagsInputItem,
+    ItemPreview: TagsInputItemPreview,
     ItemDeleteTrigger: TagsInputItemDeleteTrigger,
     ItemInput: TagsInputItemInput,
     ItemText: TagsInputItemText,
     Label: TagsInputLabel,
-});
-export { TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemText, TagsInputLabel, useTagsInputContext, useTagsInputItemContext, };
+};
+export { TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemPreview, TagsInputItemText, TagsInputLabel, TagsInputRoot, useTagsInputContext, useTagsInputItemContext, };

package/source/tags-input/tags-input-item-preview.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useTagsInputContext } from './tags-input-context';
+import { useTagsInputItemContext } from './tags-input-item-context';
+export const TagsInputItemPreview = (props) => {
+    const api = useTagsInputContext();
+    const itemProps = useTagsInputItemContext();
+    const mergedProps = mergeProps(() => api().getItemPreviewProps(itemProps), props);
+    return <ark.div {...mergedProps}/>;
+};

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

@@ -4,7 +4,7 @@ import { ark } from '../factory';
 import { runIfFn } from '../run-if-fn';
 import { TagsInputProvider } from './tags-input-context';
 import { useTagsInput } from './use-tags-input';
-export const TagsInput = (props) => {
+export const TagsInputRoot = (props) => {
     const [tagsInputParams, restProps] = createSplitProps()(props, [
         'addOnPaste',
         'allowEditTag',

package/source/toast/index.js

@@ -1,14 +1,14 @@
 import { createToaster } from './create-toaster';
-import { Toast as ToastRoot } from './toast';
 import { ToastCloseTrigger } from './toast-close-trigger';
 import { ToastDescription } from './toast-description';
 import { ToastGroup } from './toast-group';
+import { ToastRoot } from './toast-root';
 import { ToastTitle } from './toast-title';
-const Toast = Object.assign(ToastRoot, {
+export const Toast = {
     Root: ToastRoot,
     CloseTrigger: ToastCloseTrigger,
     Description: ToastDescription,
     Group: ToastGroup,
     Title: ToastTitle,
-});
-export { createToaster, Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastTitle };
+};
+export { createToaster, ToastCloseTrigger, ToastDescription, ToastGroup, ToastRoot, ToastTitle };

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

@@ -1,7 +1,7 @@
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
 import { useToastContext } from './toast-context';
-export const Toast = (props) => {
+export const ToastRoot = (props) => {
     const api = useToastContext();
     const mergedProps = mergeProps(() => api().rootProps, props);
     return <ark.li {...mergedProps}/>;

package/source/toggle-group/index.js

@@ -1,8 +1,8 @@
-import { ToggleGroup as ToggleGroupRoot } from './toggle-group';
 import { useToggleGroupContext } from './toggle-group-context';
 import { ToggleGroupItem } from './toggle-group-item';
-const ToggleGroup = Object.assign(ToggleGroupRoot, {
+import { ToggleGroupRoot } from './toggle-group-root';
+export const ToggleGroup = {
     Root: ToggleGroupRoot,
     Item: ToggleGroupItem,
-});
-export { ToggleGroup, ToggleGroupItem, useToggleGroupContext };
+};
+export { ToggleGroupItem, ToggleGroupRoot, useToggleGroupContext };

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

@@ -3,7 +3,7 @@ import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
 import { ToggleGroupProvider } from './toggle-group-context';
 import { useToggleGroup } from './use-toggle-group';
-export const ToggleGroup = (props) => {
+export const ToggleGroupRoot = (props) => {
     const [groupParams, restProps] = createSplitProps()(props, [
         'dir',
         'disabled',

package/source/tooltip/index.js

@@ -1,16 +1,16 @@
-import { Tooltip as TooltipRoot } from './tooltip';
 import { TooltipArrow } from './tooltip-arrow';
 import { TooltipArrowTip } from './tooltip-arrow-tip';
 import { TooltipContent } from './tooltip-content';
 import { useTooltipContext } from './tooltip-context';
 import { TooltipPositioner } from './tooltip-positioner';
+import { TooltipRoot } from './tooltip-root';
 import { TooltipTrigger } from './tooltip-trigger';
-const Tooltip = Object.assign(TooltipRoot, {
+export const Tooltip = {
     Root: TooltipRoot,
     Arrow: TooltipArrow,
     ArrowTip: TooltipArrowTip,
     Content: TooltipContent,
     Positioner: TooltipPositioner,
     Trigger: TooltipTrigger,
-});
-export { Tooltip, TooltipArrow, TooltipArrowTip, TooltipContent, TooltipPositioner, TooltipTrigger, useTooltipContext, };
+};
+export { TooltipArrow, TooltipArrowTip, TooltipContent, TooltipPositioner, TooltipRoot, TooltipTrigger, useTooltipContext, };