@ark-ui/react 1.3.0 → 2.0.0

package/select/index.d.ts

@@ -2,7 +2,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import type { HighlightChangeDetails as SelectHighlightChangeDetails, OpenChangeDetails as SelectOpenChangeDetails, ValueChangeDetails as SelectValueChangeDetails } from '@zag-js/select';
 import type { CollectionItem } from '../types';
-import { SelectComponent, type SelectProps } from './select';
 import { SelectClearTrigger, type SelectClearTriggerProps } from './select-clear-trigger';
 import { SelectContent, type SelectContentProps } from './select-content';
 import { useSelectContext, type SelectContext } from './select-context';
@@ -16,9 +15,10 @@ import { SelectItemIndicator, type SelectItemIndicatorProps } from './select-ite
 import { SelectItemText, type SelectItemTextProps } from './select-item-text';
 import { SelectLabel, type SelectLabelProps } from './select-label';
 import { SelectPositioner, type SelectPositionerProps } from './select-positioner';
+import { SelectComponent, SelectRoot, type SelectRootProps } from './select-root';
 import { SelectTrigger, type SelectTriggerProps } from './select-trigger';
 import { SelectValueText, type SelectValueTextProps } from './select-value-text';
-declare const Select: SelectComponent & {
+export declare const Select: {
     Root: SelectComponent;
     ClearTrigger: ForwardRefExoticComponent<SelectClearTriggerProps & RefAttributes<HTMLButtonElement>>;
     Content: ForwardRefExoticComponent<SelectContentProps & RefAttributes<HTMLDivElement>>;
@@ -34,5 +34,5 @@ declare const Select: SelectComponent & {
     Trigger: ForwardRefExoticComponent<SelectTriggerProps & RefAttributes<HTMLButtonElement>>;
     ValueText: ForwardRefExoticComponent<SelectValueTextProps & RefAttributes<HTMLSpanElement>>;
 };
-export { Select, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText, useSelectContext, useSelectItemContext };
-export type { CollectionItem, SelectClearTriggerProps, SelectContentProps, SelectContext, SelectControlProps, SelectHighlightChangeDetails, SelectIndicatorProps, SelectItemContext, SelectItemGroupLabelProps, SelectItemGroupProps, SelectItemIndicatorProps, SelectItemProps, SelectItemTextProps, SelectLabelProps, SelectOpenChangeDetails, SelectPositionerProps, SelectProps, SelectTriggerProps, SelectValueChangeDetails, SelectValueTextProps };
+export { SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectRoot, SelectTrigger, SelectValueText, useSelectContext, useSelectItemContext, };
+export type { CollectionItem, SelectClearTriggerProps, SelectContentProps, SelectContext, SelectControlProps, SelectHighlightChangeDetails, SelectIndicatorProps, SelectItemContext, SelectItemGroupLabelProps, SelectItemGroupProps, SelectItemIndicatorProps, SelectItemProps, SelectItemTextProps, SelectLabelProps, SelectOpenChangeDetails, SelectPositionerProps, SelectRootProps, SelectTriggerProps, SelectValueChangeDetails, SelectValueTextProps, };

package/select/index.mjs

@@ -1,5 +1,4 @@
 'use client';
-import { Select as Select$1 } from './select.mjs';
 import { SelectClearTrigger } from './select-clear-trigger.mjs';
 import { SelectContent } from './select-content.mjs';
 export { useSelectContext } from './select-context.mjs';
@@ -13,11 +12,12 @@ import { SelectItemIndicator } from './select-item-indicator.mjs';
 import { SelectItemText } from './select-item-text.mjs';
 import { SelectLabel } from './select-label.mjs';
 import { SelectPositioner } from './select-positioner.mjs';
+import { SelectRoot } from './select-root.mjs';
 import { SelectTrigger } from './select-trigger.mjs';
 import { SelectValueText } from './select-value-text.mjs';
 
-const Select = Object.assign(Select$1, {
-  Root: Select$1,
+const Select = {
+  Root: SelectRoot,
   ClearTrigger: SelectClearTrigger,
   Content: SelectContent,
   Control: SelectControl,
@@ -31,6 +31,6 @@ const Select = Object.assign(Select$1, {
   Positioner: SelectPositioner,
   Trigger: SelectTrigger,
   ValueText: SelectValueText
-});
+};
 
-export { Select, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText };
+export { Select, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectRoot, SelectTrigger, SelectValueText };

package/select/select-content.cjs

@@ -7,9 +7,8 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-require('../presence/index.cjs');
-const selectContext = require('./select-context.cjs');
 const presenceContext = require('../presence/presence-context.cjs');
+const selectContext = require('./select-context.cjs');
 
 const SelectContent = react.forwardRef((props, ref) => {
   const api = selectContext.useSelectContext();

package/select/select-content.mjs

@@ -3,9 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
-import { useSelectContext } from './select-context.mjs';
 import { usePresenceContext } from '../presence/presence-context.mjs';
+import { useSelectContext } from './select-context.mjs';
 
 const SelectContent = forwardRef((props, ref) => {
   const api = useSelectContext();

package/select/select-positioner.cjs

@@ -7,9 +7,8 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-require('../presence/index.cjs');
-const selectContext = require('./select-context.cjs');
 const presenceContext = require('../presence/presence-context.cjs');
+const selectContext = require('./select-context.cjs');
 
 const SelectPositioner = react.forwardRef((props, ref) => {
   const api = selectContext.useSelectContext();

package/select/select-positioner.mjs

@@ -3,9 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
-import { useSelectContext } from './select-context.mjs';
 import { usePresenceContext } from '../presence/presence-context.mjs';
+import { useSelectContext } from './select-context.mjs';
 
 const SelectPositioner = forwardRef((props, ref) => {
   const api = useSelectContext();

package/select/{select.cjs → select-root.cjs}

@@ -8,13 +8,12 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
-require('../presence/index.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const usePresence = require('../presence/use-presence.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const selectContext = require('./select-context.cjs');
 const useSelect = require('./use-select.cjs');
-const splitPresenceProps = require('../presence/split-presence-props.cjs');
-const usePresence = require('../presence/use-presence.cjs');
-const presenceContext = require('../presence/presence-context.cjs');
 
 const SelectImpl = (props, ref) => {
   const [presenceProps, selectProps] = splitPresenceProps.splitPresenceProps(props);
@@ -57,6 +56,6 @@ const SelectImpl = (props, ref) => {
   const mergedProps = react$1.mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(selectContext.SelectProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) }) });
 };
-const Select = react.forwardRef(SelectImpl);
+const SelectRoot = react.forwardRef(SelectImpl);
 
-exports.Select = Select;
+exports.SelectRoot = SelectRoot;

package/select/{select.d.ts → select-root.d.ts}

@@ -3,11 +3,11 @@ import { type HTMLArkProps } from '../factory';
 import { type UsePresenceProps } from '../presence';
 import { type Assign, type CollectionItem } from '../types';
 import { type UseSelectProps, type UseSelectReturn } from './use-select';
-export interface SelectProps<T extends CollectionItem> extends Assign<Assign<HTMLArkProps<'div'>, {
+export interface SelectRootProps<T extends CollectionItem> extends Assign<Assign<HTMLArkProps<'div'>, {
     children?: ReactNode | ((api: UseSelectReturn<T>) => ReactNode);
 }>, UseSelectProps<T>>, UsePresenceProps {
 }
 export interface SelectComponent {
-    <T extends CollectionItem>(props: SelectProps<T> & React.RefAttributes<HTMLDivElement>): JSX.Element;
+    <T extends CollectionItem>(props: SelectRootProps<T> & React.RefAttributes<HTMLDivElement>): JSX.Element;
 }
-export declare const Select: SelectComponent;
+export declare const SelectRoot: SelectComponent;

package/select/{select.mjs → select-root.mjs}

@@ -4,13 +4,12 @@ import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
+import { PresenceProvider } from '../presence/presence-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { usePresence } from '../presence/use-presence.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { SelectProvider } from './select-context.mjs';
 import { useSelect } from './use-select.mjs';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
-import { usePresence } from '../presence/use-presence.mjs';
-import { PresenceProvider } from '../presence/presence-context.mjs';
 
 const SelectImpl = (props, ref) => {
   const [presenceProps, selectProps] = splitPresenceProps(props);
@@ -53,6 +52,6 @@ const SelectImpl = (props, ref) => {
   const mergedProps = mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsx(SelectProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) }) });
 };
-const Select = forwardRef(SelectImpl);
+const SelectRoot = forwardRef(SelectImpl);
 
-export { Select };
+export { SelectRoot };

package/select/stories/icons.d.ts

@@ -0,0 +1,4 @@
+import { JSX } from 'react/jsx-runtime';
+declare const ChevronDownIcon: () => JSX.Element;
+declare const ChevronsDownUpIcon: () => JSX.Element;
+export { ChevronDownIcon, ChevronsDownUpIcon };

package/select/stories/select.stories.d.ts

@@ -1,8 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-import { Select } from '../';
-type SelectType = typeof Select;
-declare const meta: Meta<SelectType>;
+declare const meta: Meta;
 export default meta;
 export declare const Basic: () => JSX.Element;
 export declare const Advanced: () => JSX.Element;

package/select/tests/basic.d.ts

@@ -0,0 +1,10 @@
+import { JSX } from 'react/jsx-runtime';
+import { type SelectRootProps } from '../';
+import type { Optional } from '../../types';
+interface Item {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+export declare const ComponentUnderTest: (props: Optional<SelectRootProps<Item>, 'items'>) => JSX.Element;
+export {};

package/select/use-select.cjs

@@ -7,9 +7,8 @@ const react$1 = require('@zag-js/react');
 const select = require('@zag-js/select');
 const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
-require('../environment/index.cjs');
-const useEvent = require('../use-event.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
+const useEvent = require('../use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });

package/select/use-select.mjs

@@ -3,9 +3,8 @@ import { useMachine, normalizeProps } from '@zag-js/react';
 import * as select from '@zag-js/select';
 import { useMemo, useId } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
-import '../environment/index.mjs';
-import { useEvent } from '../use-event.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
+import { useEvent } from '../use-event.mjs';
 
 const useSelect = (props) => {
   const [collectionOptions, rest] = createSplitProps()(props, [

package/slider/index.cjs

@@ -3,19 +3,19 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const slider = require('./slider.cjs');
 const sliderContext = require('./slider-context.cjs');
 const sliderControl = require('./slider-control.cjs');
 const sliderLabel = require('./slider-label.cjs');
 const sliderMarker = require('./slider-marker.cjs');
 const sliderMarkerGroup = require('./slider-marker-group.cjs');
 const sliderRange = require('./slider-range.cjs');
+const sliderRoot = require('./slider-root.cjs');
 const sliderThumb = require('./slider-thumb.cjs');
 const sliderTrack = require('./slider-track.cjs');
 const sliderValueText = require('./slider-value-text.cjs');
 
-const Slider = Object.assign(slider.Slider, {
-  Root: slider.Slider,
+const Slider = {
+  Root: sliderRoot.SliderRoot,
   Control: sliderControl.SliderControl,
   Label: sliderLabel.SliderLabel,
   Marker: sliderMarker.SliderMarker,
@@ -24,7 +24,7 @@ const Slider = Object.assign(slider.Slider, {
   Thumb: sliderThumb.SliderThumb,
   Track: sliderTrack.SliderTrack,
   ValueText: sliderValueText.SliderValueText
-});
+};
 
 exports.useSliderContext = sliderContext.useSliderContext;
 exports.SliderControl = sliderControl.SliderControl;
@@ -32,6 +32,7 @@ exports.SliderLabel = sliderLabel.SliderLabel;
 exports.SliderMarker = sliderMarker.SliderMarker;
 exports.SliderMarkerGroup = sliderMarkerGroup.SliderMarkerGroup;
 exports.SliderRange = sliderRange.SliderRange;
+exports.SliderRoot = sliderRoot.SliderRoot;
 exports.SliderThumb = sliderThumb.SliderThumb;
 exports.SliderTrack = sliderTrack.SliderTrack;
 exports.SliderValueText = sliderValueText.SliderValueText;

package/slider/index.d.ts

@@ -1,18 +1,18 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import type { FocusChangeDetails as SliderFocusChangeDetails, ValueChangeDetails as SliderValueChangeDetails } from '@zag-js/slider';
-import { type SliderProps } from './slider';
 import { useSliderContext, type SliderContext } from './slider-context';
 import { SliderControl, type SliderControlProps } from './slider-control';
 import { SliderLabel, type SliderLabelProps } from './slider-label';
 import { SliderMarker, type SliderMarkerProps } from './slider-marker';
 import { SliderMarkerGroup, type SliderMarkerGroupProps } from './slider-marker-group';
 import { SliderRange, type SliderRangeProps } from './slider-range';
+import { SliderRoot, type SliderRootProps } from './slider-root';
 import { SliderThumb, type SliderThumbProps } from './slider-thumb';
 import { SliderTrack, type SliderTrackProps } from './slider-track';
 import { SliderValueText, type SliderValueTextProps } from './slider-value-text';
-declare const Slider: ForwardRefExoticComponent<SliderProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<SliderProps & RefAttributes<HTMLDivElement>>;
+export declare const Slider: {
+    Root: ForwardRefExoticComponent<SliderRootProps & RefAttributes<HTMLDivElement>>;
     Control: ForwardRefExoticComponent<SliderControlProps & RefAttributes<HTMLDivElement>>;
     Label: ForwardRefExoticComponent<SliderLabelProps & RefAttributes<HTMLLabelElement>>;
     Marker: ForwardRefExoticComponent<SliderMarkerProps & RefAttributes<HTMLSpanElement>>;
@@ -22,5 +22,5 @@ declare const Slider: ForwardRefExoticComponent<SliderProps & RefAttributes<HTML
     Track: ForwardRefExoticComponent<SliderTrackProps & RefAttributes<HTMLDivElement>>;
     ValueText: ForwardRefExoticComponent<SliderValueTextProps & RefAttributes<HTMLDivElement>>;
 };
-export { Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderThumb, SliderTrack, SliderValueText, useSliderContext, };
-export type { SliderContext, SliderControlProps, SliderFocusChangeDetails, SliderLabelProps, SliderMarkerGroupProps, SliderMarkerProps, SliderProps, SliderRangeProps, SliderThumbProps, SliderTrackProps, SliderValueChangeDetails, SliderValueTextProps, };
+export { SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderRoot, SliderThumb, SliderTrack, SliderValueText, useSliderContext, };
+export type { SliderContext, SliderControlProps, SliderFocusChangeDetails, SliderLabelProps, SliderMarkerGroupProps, SliderMarkerProps, SliderRangeProps, SliderRootProps, SliderThumbProps, SliderTrackProps, SliderValueChangeDetails, SliderValueTextProps, };

package/slider/index.mjs

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

package/slider/{slider.cjs → slider-root.cjs}

@@ -12,7 +12,7 @@ const runIfFn = require('../run-if-fn.cjs');
 const sliderContext = require('./slider-context.cjs');
 const useSlider = require('./use-slider.cjs');
 
-const Slider = react.forwardRef((props, ref) => {
+const SliderRoot = react.forwardRef((props, ref) => {
   const [useSliderProps, { children, ...divProps }] = createSplitProps.createSplitProps()(props, [
     "aria-label",
     "aria-labelledby",
@@ -46,6 +46,6 @@ const Slider = react.forwardRef((props, ref) => {
   const view = runIfFn.runIfFn(children, api);
   return /* @__PURE__ */ jsxRuntime.jsx(sliderContext.SliderProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
 });
-Slider.displayName = "Slider";
+SliderRoot.displayName = "SliderRoot";
 
-exports.Slider = Slider;
+exports.SliderRoot = SliderRoot;

package/slider/{slider.d.ts → slider-root.d.ts}

@@ -2,8 +2,8 @@ import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react'
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 import { type UseSliderProps, type UseSliderReturn } from './use-slider';
-export interface SliderProps extends Assign<Assign<HTMLArkProps<'div'>, {
+export interface SliderRootProps extends Assign<Assign<HTMLArkProps<'div'>, {
     children?: ReactNode | ((api: UseSliderReturn) => ReactNode);
 }>, UseSliderProps> {
 }
-export declare const Slider: ForwardRefExoticComponent<SliderProps & RefAttributes<HTMLDivElement>>;
+export declare const SliderRoot: ForwardRefExoticComponent<SliderRootProps & RefAttributes<HTMLDivElement>>;

package/slider/{slider.mjs → slider-root.mjs}

@@ -8,7 +8,7 @@ import { runIfFn } from '../run-if-fn.mjs';
 import { SliderProvider } from './slider-context.mjs';
 import { useSlider } from './use-slider.mjs';
 
-const Slider = forwardRef((props, ref) => {
+const SliderRoot = forwardRef((props, ref) => {
   const [useSliderProps, { children, ...divProps }] = createSplitProps()(props, [
     "aria-label",
     "aria-labelledby",
@@ -42,6 +42,6 @@ const Slider = forwardRef((props, ref) => {
   const view = runIfFn(children, api);
   return /* @__PURE__ */ jsx(SliderProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
 });
-Slider.displayName = "Slider";
+SliderRoot.displayName = "SliderRoot";
 
-export { Slider };
+export { SliderRoot };

package/slider/stories/range-slider.stories.d.ts

@@ -1,8 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-import { Slider } from '../';
-type SliderType = typeof Slider;
-declare const meta: Meta<SliderType>;
+declare const meta: Meta;
 export default meta;
 export declare const Basic: () => JSX.Element;
 export declare const WithMarks: () => JSX.Element;

package/slider/stories/slider.stories.d.ts

@@ -1,8 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-import { Slider } from '../';
-type SliderType = typeof Slider;
-declare const meta: Meta<SliderType>;
+declare const meta: Meta;
 export default meta;
 export declare const Basic: () => JSX.Element;
 export declare const WithMarks: () => JSX.Element;

package/slider/tests/basic.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react/jsx-runtime';
+import { type SliderRootProps } from '../';
+export declare const ComponentUnderTest: (props: SliderRootProps) => JSX.Element;

package/slider/use-slider.cjs

@@ -6,9 +6,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const react$1 = require('@zag-js/react');
 const Slider = require('@zag-js/slider');
 const react = require('react');
-require('../environment/index.cjs');
-const useEvent = require('../use-event.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
+const useEvent = require('../use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });

package/slider/use-slider.mjs

@@ -2,9 +2,8 @@
 import { useMachine, normalizeProps } from '@zag-js/react';
 import * as Slider from '@zag-js/slider';
 import { useId } from 'react';
-import '../environment/index.mjs';
-import { useEvent } from '../use-event.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
+import { useEvent } from '../use-event.mjs';
 
 const useSlider = (props) => {
   const initialContext = {

package/splitter/index.cjs

@@ -3,18 +3,19 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const splitter = require('./splitter.cjs');
 const splitterContext = require('./splitter-context.cjs');
 const splitterPanel = require('./splitter-panel.cjs');
 const splitterResizeTrigger = require('./splitter-resize-trigger.cjs');
+const splitterRoot = require('./splitter-root.cjs');
 
-const Splitter = Object.assign(splitter.Splitter, {
-  Root: splitter.Splitter,
+const Splitter = {
+  Root: splitterRoot.SplitterRoot,
   Panel: splitterPanel.SplitterPanel,
   ResizeTrigger: splitterResizeTrigger.SplitterResizeTrigger
-});
+};
 
 exports.useSplitterContext = splitterContext.useSplitterContext;
 exports.SplitterPanel = splitterPanel.SplitterPanel;
 exports.SplitterResizeTrigger = splitterResizeTrigger.SplitterResizeTrigger;
+exports.SplitterRoot = splitterRoot.SplitterRoot;
 exports.Splitter = Splitter;

package/splitter/index.d.ts

@@ -1,14 +1,14 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import type { SizeChangeDetails as SplitterSizeChangeDetails } from '@zag-js/splitter';
-import { type SplitterProps } from './splitter';
 import { useSplitterContext, type SplitterContext } from './splitter-context';
 import { SplitterPanel, type SplitterPanelProps } from './splitter-panel';
 import { SplitterResizeTrigger, type SplitterResizeTriggerProps } from './splitter-resize-trigger';
-declare const Splitter: ForwardRefExoticComponent<SplitterProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<SplitterProps & RefAttributes<HTMLDivElement>>;
+import { SplitterRoot, type SplitterRootProps } from './splitter-root';
+export declare const Splitter: {
+    Root: ForwardRefExoticComponent<SplitterRootProps & RefAttributes<HTMLDivElement>>;
     Panel: ForwardRefExoticComponent<SplitterPanelProps & RefAttributes<HTMLDivElement>>;
     ResizeTrigger: ForwardRefExoticComponent<SplitterResizeTriggerProps & RefAttributes<HTMLButtonElement>>;
 };
-export { Splitter, SplitterPanel, SplitterResizeTrigger, useSplitterContext };
-export type { SplitterContext, SplitterPanelProps, SplitterProps, SplitterResizeTriggerProps, SplitterSizeChangeDetails, };
+export { SplitterPanel, SplitterResizeTrigger, SplitterRoot, useSplitterContext };
+export type { SplitterContext, SplitterPanelProps, SplitterResizeTriggerProps, SplitterRootProps, SplitterSizeChangeDetails, };

package/splitter/index.mjs

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

package/splitter/{splitter.cjs → splitter-root.cjs}

@@ -12,7 +12,7 @@ const runIfFn = require('../run-if-fn.cjs');
 const splitterContext = require('./splitter-context.cjs');
 const useSplitter = require('./use-splitter.cjs');
 
-const Splitter = react.forwardRef((props, ref) => {
+const SplitterRoot = react.forwardRef((props, ref) => {
   const [useSplitterProps, { children, ...divProps }] = createSplitProps.createSplitProps()(
     props,
     [
@@ -33,6 +33,6 @@ const Splitter = react.forwardRef((props, ref) => {
   const view = runIfFn.runIfFn(children, api);
   return /* @__PURE__ */ jsxRuntime.jsx(splitterContext.SplitterProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
 });
-Splitter.displayName = "Splitter";
+SplitterRoot.displayName = "SplitterRoot";
 
-exports.Splitter = Splitter;
+exports.SplitterRoot = SplitterRoot;

package/splitter/{splitter.d.ts → splitter-root.d.ts}

@@ -2,8 +2,8 @@ import { ForwardRefExoticComponent, RefAttributes, ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type UseSplitterProps, type UseSplitterReturn } from './use-splitter';
-export interface SplitterProps extends Assign<Assign<HTMLArkProps<'div'>, {
+export interface SplitterRootProps extends Assign<Assign<HTMLArkProps<'div'>, {
     children?: ReactNode | ((api: UseSplitterReturn) => ReactNode);
 }>, UseSplitterProps> {
 }
-export declare const Splitter: ForwardRefExoticComponent<SplitterProps & RefAttributes<HTMLDivElement>>;
+export declare const SplitterRoot: ForwardRefExoticComponent<SplitterRootProps & RefAttributes<HTMLDivElement>>;

package/splitter/{splitter.mjs → splitter-root.mjs}

@@ -8,7 +8,7 @@ import { runIfFn } from '../run-if-fn.mjs';
 import { SplitterProvider } from './splitter-context.mjs';
 import { useSplitter } from './use-splitter.mjs';
 
-const Splitter = forwardRef((props, ref) => {
+const SplitterRoot = forwardRef((props, ref) => {
   const [useSplitterProps, { children, ...divProps }] = createSplitProps()(
     props,
     [
@@ -29,6 +29,6 @@ const Splitter = forwardRef((props, ref) => {
   const view = runIfFn(children, api);
   return /* @__PURE__ */ jsx(SplitterProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
 });
-Splitter.displayName = "Splitter";
+SplitterRoot.displayName = "SplitterRoot";
 
-export { Splitter };
+export { SplitterRoot };

package/splitter/stories/splitter.stories.d.ts

@@ -1,8 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-import { Splitter } from '../';
-type SplitterType = typeof Splitter;
-declare const meta: Meta<SplitterType>;
+declare const meta: Meta;
 export default meta;
 export declare const Basic: () => JSX.Element;
 export declare const RenderProp: () => JSX.Element;

package/splitter/tests/basic.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react/jsx-runtime';
+import { type SplitterRootProps } from '../';
+export declare const ComponentUnderTest: (props: SplitterRootProps) => JSX.Element;

package/splitter/use-splitter.cjs

@@ -6,9 +6,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const react$1 = require('@zag-js/react');
 const splitter = require('@zag-js/splitter');
 const react = require('react');
-require('../environment/index.cjs');
-const useEvent = require('../use-event.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
+const useEvent = require('../use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });

package/splitter/use-splitter.mjs

@@ -2,9 +2,8 @@
 import { useMachine, normalizeProps } from '@zag-js/react';
 import * as splitter from '@zag-js/splitter';
 import { useId } from 'react';
-import '../environment/index.mjs';
-import { useEvent } from '../use-event.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
+import { useEvent } from '../use-event.mjs';
 
 const useSplitter = (props) => {
   const initialContext = {

package/switch/index.cjs

@@ -3,21 +3,22 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const _switch = require('./switch.cjs');
 const switchContext = require('./switch-context.cjs');
 const switchControl = require('./switch-control.cjs');
 const switchLabel = require('./switch-label.cjs');
+const switchRoot = require('./switch-root.cjs');
 const switchThumb = require('./switch-thumb.cjs');
 
-const Switch = Object.assign(_switch.Switch, {
-  Root: _switch.Switch,
+const Switch = {
+  Root: switchRoot.SwitchRoot,
   Control: switchControl.SwitchControl,
   Label: switchLabel.SwitchLabel,
   Thumb: switchThumb.SwitchThumb
-});
+};
 
 exports.useSwitchContext = switchContext.useSwitchContext;
 exports.SwitchControl = switchControl.SwitchControl;
 exports.SwitchLabel = switchLabel.SwitchLabel;
+exports.SwitchRoot = switchRoot.SwitchRoot;
 exports.SwitchThumb = switchThumb.SwitchThumb;
 exports.Switch = Switch;