@ark-ui/react 1.2.1 → 2.0.0

package/select/{select.stories.d.ts → 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,17 +1,18 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
-import { type SliderProps } from './slider';
+import type { FocusChangeDetails as SliderFocusChangeDetails, ValueChangeDetails as SliderValueChangeDetails } from '@zag-js/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>>;
@@ -21,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, SliderLabelProps, SliderMarkerGroupProps, SliderMarkerProps, SliderProps, SliderRangeProps, SliderThumbProps, SliderTrackProps, 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

@@ -0,0 +1,12 @@
+import { JSX } from 'react/jsx-runtime';
+import type { Meta } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+export declare const Basic: () => JSX.Element;
+export declare const WithMarks: () => JSX.Element;
+export declare const InitialValue: () => JSX.Element;
+export declare const MinMax: () => JSX.Element;
+export declare const Step: () => JSX.Element;
+export declare const OnEvent: () => JSX.Element;
+export declare const Vertical: () => JSX.Element;
+export declare const ThumbOverlap: () => JSX.Element;

package/slider/{slider.stories.d.ts → stories/slider.stories.d.ts}

@@ -1,11 +1,8 @@
 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 Range: () => JSX.Element;
 export declare const WithMarks: () => JSX.Element;
 export declare const InitialValue: () => JSX.Element;
 export declare const MinMax: () => 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,13 +1,14 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
-import { type SplitterProps } from './splitter';
+import type { SizeChangeDetails as SplitterSizeChangeDetails } from '@zag-js/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 };
+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/{splitter.stories.d.ts → 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;

package/switch/index.d.ts

@@ -1,15 +1,16 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
-import { type SwitchProps } from './switch';
+import type { CheckedChangeDetails as SwitchCheckedChangeDetails } from '@zag-js/switch';
 import { useSwitchContext, type SwitchContext } from './switch-context';
 import { SwitchControl, type SwitchControlProps } from './switch-control';
 import { SwitchLabel, type SwitchLabelProps } from './switch-label';
+import { SwitchRoot, type SwitchRootProps } from './switch-root';
 import { SwitchThumb, type SwitchThumbProps } from './switch-thumb';
-declare const Switch: ForwardRefExoticComponent<SwitchProps & RefAttributes<HTMLLabelElement>> & {
-    Root: ForwardRefExoticComponent<SwitchProps & RefAttributes<HTMLLabelElement>>;
+export declare const Switch: {
+    Root: ForwardRefExoticComponent<SwitchRootProps & RefAttributes<HTMLLabelElement>>;
     Control: ForwardRefExoticComponent<SwitchControlProps & RefAttributes<HTMLSpanElement>>;
     Label: ForwardRefExoticComponent<SwitchLabelProps & RefAttributes<HTMLSpanElement>>;
     Thumb: ForwardRefExoticComponent<SwitchThumbProps & RefAttributes<HTMLSpanElement>>;
 };
-export { Switch, SwitchControl, SwitchLabel, SwitchThumb, useSwitchContext };
-export type { SwitchContext, SwitchControlProps, SwitchLabelProps, SwitchProps, SwitchThumbProps };
+export { SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb, useSwitchContext };
+export type { SwitchCheckedChangeDetails, SwitchContext, SwitchControlProps, SwitchLabelProps, SwitchRootProps, SwitchThumbProps, };

package/switch/index.mjs

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

package/switch/{switch.stories.d.ts → stories/switch.stories.d.ts}

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

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

@@ -12,7 +12,7 @@ const runIfFn = require('../run-if-fn.cjs');
 const switchContext = require('./switch-context.cjs');
 const useSwitch = require('./use-switch.cjs');
 
-const Switch = react.forwardRef((props, ref) => {
+const SwitchRoot = react.forwardRef((props, ref) => {
   const [switchProps, { children, ...localProps }] = createSplitProps.createSplitProps()(props, [
     "checked",
     "defaultChecked",
@@ -34,6 +34,6 @@ const Switch = react.forwardRef((props, ref) => {
   const view = runIfFn.runIfFn(children, api);
   return /* @__PURE__ */ jsxRuntime.jsx(switchContext.SwitchProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref, children: view }) });
 });
-Switch.displayName = "Switch";
+SwitchRoot.displayName = "SwitchRoot";
 
-exports.Switch = Switch;
+exports.SwitchRoot = SwitchRoot;

package/switch/{switch.d.ts → switch-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 UseSwitchProps, type UseSwitchReturn } from './use-switch';
-export interface SwitchProps extends Assign<Assign<HTMLArkProps<'label'>, {
+export interface SwitchRootProps extends Assign<Assign<HTMLArkProps<'label'>, {
     children?: ReactNode | ((api: UseSwitchReturn) => ReactNode);
 }>, UseSwitchProps> {
 }
-export declare const Switch: ForwardRefExoticComponent<SwitchProps & RefAttributes<HTMLLabelElement>>;
+export declare const SwitchRoot: ForwardRefExoticComponent<SwitchRootProps & RefAttributes<HTMLLabelElement>>;

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

@@ -8,7 +8,7 @@ import { runIfFn } from '../run-if-fn.mjs';
 import { SwitchProvider } from './switch-context.mjs';
 import { useSwitch } from './use-switch.mjs';
 
-const Switch = forwardRef((props, ref) => {
+const SwitchRoot = forwardRef((props, ref) => {
   const [switchProps, { children, ...localProps }] = createSplitProps()(props, [
     "checked",
     "defaultChecked",
@@ -30,6 +30,6 @@ const Switch = forwardRef((props, ref) => {
   const view = runIfFn(children, api);
   return /* @__PURE__ */ jsx(SwitchProvider, { value: api, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref, children: view }) });
 });
-Switch.displayName = "Switch";
+SwitchRoot.displayName = "SwitchRoot";
 
-export { Switch };
+export { SwitchRoot };

package/switch/tests/basic.d.ts

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

package/switch/use-switch.cjs

@@ -6,9 +6,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const react$1 = require('@zag-js/react');
 const zagSwitch = require('@zag-js/switch');
 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/switch/use-switch.mjs

@@ -2,9 +2,8 @@
 import { useMachine, normalizeProps } from '@zag-js/react';
 import * as zagSwitch from '@zag-js/switch';
 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 useSwitch = (props) => {
   const initialContext = {

package/tabs/index.cjs

@@ -7,20 +7,21 @@ const tabContent = require('./tab-content.cjs');
 const tabIndicator = require('./tab-indicator.cjs');
 const tabList = require('./tab-list.cjs');
 const tabTrigger = require('./tab-trigger.cjs');
-const tabs = require('./tabs.cjs');
 const tabsContext = require('./tabs-context.cjs');
+const tabsRoot = require('./tabs-root.cjs');
 
-const Tabs = Object.assign(tabs.Tabs, {
-  Root: tabs.Tabs,
+const Tabs = {
+  Root: tabsRoot.TabsRoot,
   Content: tabContent.TabContent,
   Indicator: tabIndicator.TabIndicator,
   List: tabList.TabList,
   Trigger: tabTrigger.TabTrigger
-});
+};
 
 exports.TabContent = tabContent.TabContent;
 exports.TabIndicator = tabIndicator.TabIndicator;
 exports.TabList = tabList.TabList;
 exports.TabTrigger = tabTrigger.TabTrigger;
 exports.useTabsContext = tabsContext.useTabsContext;
+exports.TabsRoot = tabsRoot.TabsRoot;
 exports.Tabs = Tabs;

package/tabs/index.d.ts

@@ -1,17 +1,18 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
+import type { FocusChangeDetails as TabsFocusChangeDetails, ValueChangeDetails as TabsValueChangeDetails } from '@zag-js/tabs';
 import { TabContent, type TabContentProps } from './tab-content';
 import { TabIndicator, type TabIndicatorProps } from './tab-indicator';
 import { TabList, type TabListProps } from './tab-list';
 import { TabTrigger, type TabTriggerProps } from './tab-trigger';
-import { type TabsProps } from './tabs';
 import { useTabsContext, type TabsContext } from './tabs-context';
-declare const Tabs: ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLDivElement>>;
+import { TabsRoot, type TabsRootProps } from './tabs-root';
+export declare const Tabs: {
+    Root: ForwardRefExoticComponent<TabsRootProps & RefAttributes<HTMLDivElement>>;
     Content: ForwardRefExoticComponent<TabContentProps & RefAttributes<HTMLDivElement>>;
     Indicator: ForwardRefExoticComponent<TabIndicatorProps & RefAttributes<HTMLDivElement>>;
     List: ForwardRefExoticComponent<TabListProps & RefAttributes<HTMLDivElement>>;
     Trigger: ForwardRefExoticComponent<TabTriggerProps & RefAttributes<HTMLButtonElement>>;
 };
-export { TabContent, TabIndicator, TabList, TabTrigger, Tabs, useTabsContext };
-export type { TabContentProps, TabIndicatorProps, TabListProps, TabTriggerProps, TabsContext, TabsProps, };
+export { TabContent, TabIndicator, TabList, TabTrigger, TabsRoot, useTabsContext };
+export type { TabContentProps, TabIndicatorProps, TabListProps, TabTriggerProps, TabsContext, TabsFocusChangeDetails, TabsRootProps, TabsValueChangeDetails, };