@ark-ui/react 1.2.1 → 2.0.0

package/carousel/index.cjs

@@ -3,7 +3,6 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const carousel = require('./carousel.cjs');
 const carouselContext = require('./carousel-context.cjs');
 const carouselControl = require('./carousel-control.cjs');
 const carouselIndicator = require('./carousel-indicator.cjs');
@@ -12,10 +11,11 @@ const carouselItem = require('./carousel-item.cjs');
 const carouselItemGroup = require('./carousel-item-group.cjs');
 const carouselNextTrigger = require('./carousel-next-trigger.cjs');
 const carouselPrevTrigger = require('./carousel-prev-trigger.cjs');
+const carouselRoot = require('./carousel-root.cjs');
 const carouselViewport = require('./carousel-viewport.cjs');
 
-const Carousel = Object.assign(carousel.Carousel, {
-  Root: carousel.Carousel,
+const Carousel = {
+  Root: carouselRoot.CarouselRoot,
   Control: carouselControl.CarouselControl,
   Indicator: carouselIndicator.CarouselIndicator,
   IndicatorGroup: carouselIndicatorGroup.CarouselIndicatorGroup,
@@ -24,7 +24,7 @@ const Carousel = Object.assign(carousel.Carousel, {
   Item: carouselItem.CarouselItem,
   ItemGroup: carouselItemGroup.CarouselItemGroup,
   Viewport: carouselViewport.CarouselViewport
-});
+};
 
 exports.useCarouselContext = carouselContext.useCarouselContext;
 exports.CarouselControl = carouselControl.CarouselControl;
@@ -34,5 +34,6 @@ exports.CarouselItem = carouselItem.CarouselItem;
 exports.CarouselItemGroup = carouselItemGroup.CarouselItemGroup;
 exports.CarouselNextTrigger = carouselNextTrigger.CarouselNextTrigger;
 exports.CarouselPrevTrigger = carouselPrevTrigger.CarouselPrevTrigger;
+exports.CarouselRoot = carouselRoot.CarouselRoot;
 exports.CarouselViewport = carouselViewport.CarouselViewport;
 exports.Carousel = Carousel;

package/carousel/index.d.ts

@@ -1,6 +1,6 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
-import { type CarouselProps } from './carousel';
+import type { SlideChangeDetails as CarouselSlideChangeDetails } from '@zag-js/carousel';
 import { useCarouselContext, type CarouselContext } from './carousel-context';
 import { CarouselControl, type CarouselControlProps } from './carousel-control';
 import { CarouselIndicator, type CarouselIndicatorProps } from './carousel-indicator';
@@ -9,9 +9,10 @@ import { CarouselItem, type CarouselItemProps } from './carousel-item';
 import { CarouselItemGroup, type CarouselItemGroupProps } from './carousel-item-group';
 import { CarouselNextTrigger, type CarouselNextTriggerProps } from './carousel-next-trigger';
 import { CarouselPrevTrigger, type CarouselPrevTriggerProps } from './carousel-prev-trigger';
+import { CarouselRoot, type CarouselRootProps } from './carousel-root';
 import { CarouselViewport, type CarouselViewportProps } from './carousel-viewport';
-declare const Carousel: ForwardRefExoticComponent<CarouselProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<CarouselProps & RefAttributes<HTMLDivElement>>;
+export declare const Carousel: {
+    Root: ForwardRefExoticComponent<CarouselRootProps & RefAttributes<HTMLDivElement>>;
     Control: ForwardRefExoticComponent<CarouselControlProps & RefAttributes<HTMLDivElement>>;
     Indicator: ForwardRefExoticComponent<CarouselIndicatorProps & RefAttributes<HTMLButtonElement>>;
     IndicatorGroup: ForwardRefExoticComponent<CarouselIndicatorGroupProps & RefAttributes<HTMLDivElement>>;
@@ -21,5 +22,5 @@ declare const Carousel: ForwardRefExoticComponent<CarouselProps & RefAttributes<
     ItemGroup: ForwardRefExoticComponent<CarouselItemGroupProps & RefAttributes<HTMLDivElement>>;
     Viewport: ForwardRefExoticComponent<CarouselViewportProps & RefAttributes<HTMLDivElement>>;
 };
-export { Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselViewport, useCarouselContext, };
-export type { CarouselContext, CarouselControlProps, CarouselIndicatorGroupProps, CarouselIndicatorProps, CarouselItemGroupProps, CarouselItemProps, CarouselNextTriggerProps, CarouselPrevTriggerProps, CarouselProps, CarouselViewportProps, };
+export { CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselRoot, CarouselViewport, useCarouselContext, };
+export type { CarouselContext, CarouselControlProps, CarouselIndicatorGroupProps, CarouselIndicatorProps, CarouselItemGroupProps, CarouselItemProps, CarouselNextTriggerProps, CarouselPrevTriggerProps, CarouselRootProps, CarouselSlideChangeDetails, CarouselViewportProps, };

package/carousel/index.mjs

@@ -1,5 +1,4 @@
 'use client';
-import { Carousel as Carousel$1 } from './carousel.mjs';
 export { useCarouselContext } from './carousel-context.mjs';
 import { CarouselControl } from './carousel-control.mjs';
 import { CarouselIndicator } from './carousel-indicator.mjs';
@@ -8,10 +7,11 @@ import { CarouselItem } from './carousel-item.mjs';
 import { CarouselItemGroup } from './carousel-item-group.mjs';
 import { CarouselNextTrigger } from './carousel-next-trigger.mjs';
 import { CarouselPrevTrigger } from './carousel-prev-trigger.mjs';
+import { CarouselRoot } from './carousel-root.mjs';
 import { CarouselViewport } from './carousel-viewport.mjs';
 
-const Carousel = Object.assign(Carousel$1, {
-  Root: Carousel$1,
+const Carousel = {
+  Root: CarouselRoot,
   Control: CarouselControl,
   Indicator: CarouselIndicator,
   IndicatorGroup: CarouselIndicatorGroup,
@@ -20,6 +20,6 @@ const Carousel = Object.assign(Carousel$1, {
   Item: CarouselItem,
   ItemGroup: CarouselItemGroup,
   Viewport: CarouselViewport
-});
+};
 
-export { Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselViewport };
+export { Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselRoot, CarouselViewport };

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

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

package/carousel/tests/basic.d.ts

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

package/carousel/use-carousel.cjs

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

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

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

@@ -12,7 +12,7 @@ const runIfFn = require('../run-if-fn.cjs');
 const checkboxContext = require('./checkbox-context.cjs');
 const useCheckbox = require('./use-checkbox.cjs');
 
-const Checkbox = react.forwardRef((props, ref) => {
+const CheckboxRoot = react.forwardRef((props, ref) => {
   const [useCheckboxProps, { children, ...localProps }] = createSplitProps.createSplitProps()(
     props,
     [
@@ -36,6 +36,6 @@ const Checkbox = react.forwardRef((props, ref) => {
   const view = runIfFn.runIfFn(children, api);
   return /* @__PURE__ */ jsxRuntime.jsx(checkboxContext.CheckboxProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref, children: view }) });
 });
-Checkbox.displayName = "Checkbox";
+CheckboxRoot.displayName = "CheckboxRoot";
 
-exports.Checkbox = Checkbox;
+exports.CheckboxRoot = CheckboxRoot;

package/checkbox/{checkbox.d.ts → checkbox-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 UseCheckboxProps, type UseCheckboxReturn } from './use-checkbox';
-export interface CheckboxProps extends Assign<Assign<HTMLArkProps<'label'>, {
+export interface CheckboxRootProps extends Assign<Assign<HTMLArkProps<'label'>, {
     children?: ReactNode | ((api: UseCheckboxReturn) => ReactNode);
 }>, UseCheckboxProps> {
 }
-export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLLabelElement>>;
+export declare const CheckboxRoot: ForwardRefExoticComponent<CheckboxRootProps & RefAttributes<HTMLLabelElement>>;

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

@@ -8,7 +8,7 @@ import { runIfFn } from '../run-if-fn.mjs';
 import { CheckboxProvider } from './checkbox-context.mjs';
 import { useCheckbox } from './use-checkbox.mjs';
 
-const Checkbox = forwardRef((props, ref) => {
+const CheckboxRoot = forwardRef((props, ref) => {
   const [useCheckboxProps, { children, ...localProps }] = createSplitProps()(
     props,
     [
@@ -32,6 +32,6 @@ const Checkbox = forwardRef((props, ref) => {
   const view = runIfFn(children, api);
   return /* @__PURE__ */ jsx(CheckboxProvider, { value: api, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref, children: view }) });
 });
-Checkbox.displayName = "Checkbox";
+CheckboxRoot.displayName = "CheckboxRoot";
 
-export { Checkbox };
+export { CheckboxRoot };

package/checkbox/index.cjs

@@ -3,21 +3,22 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const checkbox = require('./checkbox.cjs');
 const checkboxContext = require('./checkbox-context.cjs');
 const checkboxControl = require('./checkbox-control.cjs');
 const checkboxIndicator = require('./checkbox-indicator.cjs');
 const checkboxLabel = require('./checkbox-label.cjs');
+const checkboxRoot = require('./checkbox-root.cjs');
 
-const Checkbox = Object.assign(checkbox.Checkbox, {
-  Root: checkbox.Checkbox,
+const Checkbox = {
+  Root: checkboxRoot.CheckboxRoot,
   Control: checkboxControl.CheckboxControl,
   Label: checkboxLabel.CheckboxLabel,
   Indicator: checkboxIndicator.CheckboxIndicator
-});
+};
 
 exports.useCheckboxContext = checkboxContext.useCheckboxContext;
 exports.CheckboxControl = checkboxControl.CheckboxControl;
 exports.CheckboxIndicator = checkboxIndicator.CheckboxIndicator;
 exports.CheckboxLabel = checkboxLabel.CheckboxLabel;
+exports.CheckboxRoot = checkboxRoot.CheckboxRoot;
 exports.Checkbox = Checkbox;

package/checkbox/index.d.ts

@@ -1,16 +1,16 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
-import type { CheckedState } from '@zag-js/checkbox';
-import { type CheckboxProps } from './checkbox';
+import type { CheckedChangeDetails as CheckboxCheckedChangeDetails, CheckedState as CheckboxState } from '@zag-js/checkbox';
 import { useCheckboxContext, type CheckboxContext } from './checkbox-context';
 import { CheckboxControl, type CheckboxControlProps } from './checkbox-control';
 import { CheckboxIndicator, type CheckboxIndicatorProps } from './checkbox-indicator';
 import { CheckboxLabel, type CheckboxLabelProps } from './checkbox-label';
-declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLLabelElement>> & {
-    Root: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLLabelElement>>;
+import { CheckboxRoot, type CheckboxRootProps } from './checkbox-root';
+export declare const Checkbox: {
+    Root: ForwardRefExoticComponent<CheckboxRootProps & RefAttributes<HTMLLabelElement>>;
     Control: ForwardRefExoticComponent<CheckboxControlProps & RefAttributes<HTMLDivElement>>;
     Label: ForwardRefExoticComponent<CheckboxLabelProps & RefAttributes<HTMLSpanElement>>;
     Indicator: ForwardRefExoticComponent<CheckboxIndicatorProps & RefAttributes<HTMLDivElement>>;
 };
-export { Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel, useCheckboxContext };
-export type { CheckboxContext, CheckboxControlProps, CheckboxIndicatorProps, CheckboxLabelProps, CheckboxProps, CheckedState, };
+export { CheckboxControl, CheckboxIndicator, CheckboxLabel, CheckboxRoot, useCheckboxContext };
+export type { CheckboxCheckedChangeDetails, CheckboxContext, CheckboxControlProps, CheckboxIndicatorProps, CheckboxLabelProps, CheckboxRootProps, CheckboxState, };

package/checkbox/index.mjs

@@ -1,15 +1,15 @@
 'use client';
-import { Checkbox as Checkbox$1 } from './checkbox.mjs';
 export { useCheckboxContext } from './checkbox-context.mjs';
 import { CheckboxControl } from './checkbox-control.mjs';
 import { CheckboxIndicator } from './checkbox-indicator.mjs';
 import { CheckboxLabel } from './checkbox-label.mjs';
+import { CheckboxRoot } from './checkbox-root.mjs';
 
-const Checkbox = Object.assign(Checkbox$1, {
-  Root: Checkbox$1,
+const Checkbox = {
+  Root: CheckboxRoot,
   Control: CheckboxControl,
   Label: CheckboxLabel,
   Indicator: CheckboxIndicator
-});
+};
 
-export { Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel };
+export { Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel, CheckboxRoot };

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

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

package/checkbox/tests/basic.d.ts

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

package/checkbox/tests/controlled.d.ts

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

package/checkbox/use-checkbox.cjs

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

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

package/color-picker/color-picker-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 colorPickerContext = require('./color-picker-context.cjs');
 const presenceContext = require('../presence/presence-context.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
 
 const ColorPickerContent = react.forwardRef(
   (props, ref) => {

package/color-picker/color-picker-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 { useColorPickerContext } from './color-picker-context.mjs';
 import { usePresenceContext } from '../presence/presence-context.mjs';
+import { useColorPickerContext } from './color-picker-context.mjs';
 
 const ColorPickerContent = forwardRef(
   (props, ref) => {

package/color-picker/color-picker-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 colorPickerContext = require('./color-picker-context.cjs');
 const presenceContext = require('../presence/presence-context.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
 
 const ColorPickerPositioner = react.forwardRef(
   (props, ref) => {

package/color-picker/color-picker-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 { useColorPickerContext } from './color-picker-context.mjs';
 import { usePresenceContext } from '../presence/presence-context.mjs';
+import { useColorPickerContext } from './color-picker-context.mjs';
 
 const ColorPickerPositioner = forwardRef(
   (props, ref) => {

package/color-picker/{color-picker.cjs → color-picker-root.cjs}

@@ -8,15 +8,14 @@ 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 colorPickerContext = require('./color-picker-context.cjs');
 const useColorPicker = require('./use-color-picker.cjs');
-const splitPresenceProps = require('../presence/split-presence-props.cjs');
-const usePresence = require('../presence/use-presence.cjs');
-const presenceContext = require('../presence/presence-context.cjs');
 
-const ColorPicker = react.forwardRef((props, ref) => {
+const ColorPickerRoot = react.forwardRef((props, ref) => {
   const [presenceProps, colorPickerProps] = splitPresenceProps.splitPresenceProps(props);
   const [useColorPickerProps, { children, ...localProps }] = createSplitProps.createSplitProps()(colorPickerProps, [
     "closeOnSelect",
@@ -51,6 +50,6 @@ const ColorPicker = react.forwardRef((props, ref) => {
     /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.hiddenInputProps })
   ] }) });
 });
-ColorPicker.displayName = "ColorPicker";
+ColorPickerRoot.displayName = "ColorPickerRoot";
 
-exports.ColorPicker = ColorPicker;
+exports.ColorPickerRoot = ColorPickerRoot;

package/color-picker/{color-picker.d.ts → color-picker-root.d.ts}

@@ -3,8 +3,8 @@ import { type HTMLArkProps } from '../factory';
 import { type UsePresenceProps } from '../presence';
 import { type Assign } from '../types';
 import { type UseColorPickerProps, type UseColorPickerReturn } from './use-color-picker';
-export interface ColorPickerProps extends Assign<Assign<HTMLArkProps<'div'>, {
+export interface ColorPickerRootProps extends Assign<Assign<HTMLArkProps<'div'>, {
     children?: ReactNode | ((api: UseColorPickerReturn) => ReactNode);
 }>, UseColorPickerProps>, UsePresenceProps {
 }
-export declare const ColorPicker: ForwardRefExoticComponent<ColorPickerProps & RefAttributes<HTMLDivElement>>;
+export declare const ColorPickerRoot: ForwardRefExoticComponent<ColorPickerRootProps & RefAttributes<HTMLDivElement>>;

package/color-picker/{color-picker.mjs → color-picker-root.mjs}

@@ -4,15 +4,14 @@ 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 { ColorPickerProvider } from './color-picker-context.mjs';
 import { useColorPicker } from './use-color-picker.mjs';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
-import { usePresence } from '../presence/use-presence.mjs';
-import { PresenceProvider } from '../presence/presence-context.mjs';
 
-const ColorPicker = forwardRef((props, ref) => {
+const ColorPickerRoot = forwardRef((props, ref) => {
   const [presenceProps, colorPickerProps] = splitPresenceProps(props);
   const [useColorPickerProps, { children, ...localProps }] = createSplitProps()(colorPickerProps, [
     "closeOnSelect",
@@ -47,6 +46,6 @@ const ColorPicker = forwardRef((props, ref) => {
     /* @__PURE__ */ jsx("input", { ...api.hiddenInputProps })
   ] }) });
 });
-ColorPicker.displayName = "ColorPicker";
+ColorPickerRoot.displayName = "ColorPickerRoot";
 
-export { ColorPicker };
+export { ColorPickerRoot };

package/color-picker/index.cjs

@@ -3,7 +3,6 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const colorPicker = require('./color-picker.cjs');
 const colorPickerArea = require('./color-picker-area.cjs');
 const colorPickerAreaBackground = require('./color-picker-area-background.cjs');
 const colorPickerAreaContext = require('./color-picker-area-context.cjs');
@@ -21,6 +20,7 @@ const colorPickerFormatSelect = require('./color-picker-format-select.cjs');
 const colorPickerFormatTrigger = require('./color-picker-format-trigger.cjs');
 const colorPickerLabel = require('./color-picker-label.cjs');
 const colorPickerPositioner = require('./color-picker-positioner.cjs');
+const colorPickerRoot = require('./color-picker-root.cjs');
 const colorPickerSwatch = require('./color-picker-swatch.cjs');
 const colorPickerSwatchGroup = require('./color-picker-swatch-group.cjs');
 const colorPickerSwatchIndicator = require('./color-picker-swatch-indicator.cjs');
@@ -30,8 +30,8 @@ const colorPickerTrigger = require('./color-picker-trigger.cjs');
 const colorPickerValueText = require('./color-picker-value-text.cjs');
 const colorPickerView = require('./color-picker-view.cjs');
 
-const ColorPicker = Object.assign(colorPicker.ColorPicker, {
-  Root: colorPicker.ColorPicker,
+const ColorPicker = {
+  Root: colorPickerRoot.ColorPickerRoot,
   Area: colorPickerArea.ColorPickerArea,
   AreaBackground: colorPickerAreaBackground.ColorPickerAreaBackground,
   AreaThumb: colorPickerAreaThumb.ColorPickerAreaThumb,
@@ -54,7 +54,7 @@ const ColorPicker = Object.assign(colorPicker.ColorPicker, {
   Trigger: colorPickerTrigger.ColorPickerTrigger,
   ValueText: colorPickerValueText.ColorPickerValueText,
   View: colorPickerView.ColorPickerView
-});
+};
 
 exports.ColorPickerArea = colorPickerArea.ColorPickerArea;
 exports.ColorPickerAreaBackground = colorPickerAreaBackground.ColorPickerAreaBackground;
@@ -73,6 +73,7 @@ exports.ColorPickerFormatSelect = colorPickerFormatSelect.ColorPickerFormatSelec
 exports.ColorPickerFormatTrigger = colorPickerFormatTrigger.ColorPickerFormatTrigger;
 exports.ColorPickerLabel = colorPickerLabel.ColorPickerLabel;
 exports.ColorPickerPositioner = colorPickerPositioner.ColorPickerPositioner;
+exports.ColorPickerRoot = colorPickerRoot.ColorPickerRoot;
 exports.ColorPickerSwatch = colorPickerSwatch.ColorPickerSwatch;
 exports.ColorPickerSwatchGroup = colorPickerSwatchGroup.ColorPickerSwatchGroup;
 exports.ColorPickerSwatchIndicator = colorPickerSwatchIndicator.ColorPickerSwatchIndicator;

package/color-picker/index.d.ts

@@ -1,7 +1,6 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
-import type { ColorFormat } from '@zag-js/color-picker';
-import { type ColorPickerProps } from './color-picker';
+import type { ColorFormat, FormatChangeDetails as ColorPickerFormatChangeDetails, OpenChangeDetails as ColorPickerOpenChangeDetails, ValueChangeDetails as ColorPickerValueChangeDetails } from '@zag-js/color-picker';
 import { ColorPickerArea, type ColorPickerAreaProps } from './color-picker-area';
 import { ColorPickerAreaBackground, type ColorPickerAreaBackgroundProps } from './color-picker-area-background';
 import { useColorPickerAreaContext, type ColorPickerAreaContext } from './color-picker-area-context';
@@ -19,6 +18,7 @@ import { ColorPickerFormatSelect, type ColorPickerFormatSelectProps } from './co
 import { ColorPickerFormatTrigger, type ColorPickerFormatTriggerProps } from './color-picker-format-trigger';
 import { ColorPickerLabel, type ColorPickerLabelProps } from './color-picker-label';
 import { ColorPickerPositioner, type ColorPickerPositionerProps } from './color-picker-positioner';
+import { ColorPickerRoot, type ColorPickerRootProps } from './color-picker-root';
 import { ColorPickerSwatch, type ColorPickerSwatchProps } from './color-picker-swatch';
 import { ColorPickerSwatchGroup, type ColorPickerSwatchGroupProps } from './color-picker-swatch-group';
 import { ColorPickerSwatchIndicator, type ColorPickerSwatchIndicatorProps } from './color-picker-swatch-indicator';
@@ -27,8 +27,8 @@ import { ColorPickerTransparencyGrid, type ColorPickerTransparencyGridProps } fr
 import { ColorPickerTrigger, type ColorPickerTriggerProps } from './color-picker-trigger';
 import { ColorPickerValueText, type ColorPickerValueTextProps } from './color-picker-value-text';
 import { ColorPickerView, type ColorPickerViewProps } from './color-picker-view';
-declare const ColorPicker: ForwardRefExoticComponent<ColorPickerProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<ColorPickerProps & RefAttributes<HTMLDivElement>>;
+export declare const ColorPicker: {
+    Root: ForwardRefExoticComponent<ColorPickerRootProps & RefAttributes<HTMLDivElement>>;
     Area: ForwardRefExoticComponent<ColorPickerAreaProps & RefAttributes<HTMLDivElement>>;
     AreaBackground: ForwardRefExoticComponent<ColorPickerAreaBackgroundProps & RefAttributes<HTMLDivElement>>;
     AreaThumb: ForwardRefExoticComponent<ColorPickerAreaThumbProps & RefAttributes<HTMLDivElement>>;
@@ -52,5 +52,5 @@ declare const ColorPicker: ForwardRefExoticComponent<ColorPickerProps & RefAttri
     ValueText: ForwardRefExoticComponent<ColorPickerValueTextProps & RefAttributes<HTMLDivElement>>;
     View: ForwardRefExoticComponent<ColorPickerViewProps & RefAttributes<HTMLDivElement>>;
 };
-export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };
-export type { ColorFormat, ColorPickerAreaBackgroundProps, ColorPickerAreaContext, ColorPickerAreaProps, ColorPickerAreaThumbProps, ColorPickerChannelInputProps, ColorPickerChannelSliderContext, ColorPickerChannelSliderProps, ColorPickerChannelSliderThumbProps, ColorPickerChannelSliderTrackProps, ColorPickerContentProps, ColorPickerContext, ColorPickerControlProps, ColorPickerEyeDropperTriggerProps, ColorPickerFormatSelectProps, ColorPickerFormatTriggerProps, ColorPickerLabelProps, ColorPickerPositionerProps, ColorPickerProps, ColorPickerSwatchGroupProps, ColorPickerSwatchIndicatorProps, ColorPickerSwatchProps, ColorPickerSwatchTriggerProps, ColorPickerTransparencyGridProps, ColorPickerTriggerProps, ColorPickerValueTextProps, ColorPickerViewProps, };
+export { ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerRoot, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };
+export type { ColorFormat, ColorPickerAreaBackgroundProps, ColorPickerAreaContext, ColorPickerAreaProps, ColorPickerAreaThumbProps, ColorPickerChannelInputProps, ColorPickerChannelSliderContext, ColorPickerChannelSliderProps, ColorPickerChannelSliderThumbProps, ColorPickerChannelSliderTrackProps, ColorPickerContentProps, ColorPickerContext, ColorPickerControlProps, ColorPickerEyeDropperTriggerProps, ColorPickerFormatChangeDetails, ColorPickerFormatSelectProps, ColorPickerFormatTriggerProps, ColorPickerLabelProps, ColorPickerOpenChangeDetails, ColorPickerPositionerProps, ColorPickerRootProps, ColorPickerSwatchGroupProps, ColorPickerSwatchIndicatorProps, ColorPickerSwatchProps, ColorPickerSwatchTriggerProps, ColorPickerTransparencyGridProps, ColorPickerTriggerProps, ColorPickerValueChangeDetails, ColorPickerValueTextProps, ColorPickerViewProps, };

package/color-picker/index.mjs

@@ -1,5 +1,4 @@
 'use client';
-import { ColorPicker as ColorPicker$1 } from './color-picker.mjs';
 import { ColorPickerArea } from './color-picker-area.mjs';
 import { ColorPickerAreaBackground } from './color-picker-area-background.mjs';
 export { useColorPickerAreaContext } from './color-picker-area-context.mjs';
@@ -17,6 +16,7 @@ import { ColorPickerFormatSelect } from './color-picker-format-select.mjs';
 import { ColorPickerFormatTrigger } from './color-picker-format-trigger.mjs';
 import { ColorPickerLabel } from './color-picker-label.mjs';
 import { ColorPickerPositioner } from './color-picker-positioner.mjs';
+import { ColorPickerRoot } from './color-picker-root.mjs';
 import { ColorPickerSwatch } from './color-picker-swatch.mjs';
 import { ColorPickerSwatchGroup } from './color-picker-swatch-group.mjs';
 import { ColorPickerSwatchIndicator } from './color-picker-swatch-indicator.mjs';
@@ -26,8 +26,8 @@ import { ColorPickerTrigger } from './color-picker-trigger.mjs';
 import { ColorPickerValueText } from './color-picker-value-text.mjs';
 import { ColorPickerView } from './color-picker-view.mjs';
 
-const ColorPicker = Object.assign(ColorPicker$1, {
-  Root: ColorPicker$1,
+const ColorPicker = {
+  Root: ColorPickerRoot,
   Area: ColorPickerArea,
   AreaBackground: ColorPickerAreaBackground,
   AreaThumb: ColorPickerAreaThumb,
@@ -50,6 +50,6 @@ const ColorPicker = Object.assign(ColorPicker$1, {
   Trigger: ColorPickerTrigger,
   ValueText: ColorPickerValueText,
   View: ColorPickerView
-});
+};
 
-export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView };
+export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerRoot, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView };

package/color-picker/{color-picker.stories.d.ts → stories/color-picker.stories.d.ts}

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

package/color-picker/tests/basic.d.ts

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

package/color-picker/use-color-picker.cjs

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

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

package/combobox/combobox-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 comboboxContext = require('./combobox-context.cjs');
 const presenceContext = require('../presence/presence-context.cjs');
+const comboboxContext = require('./combobox-context.cjs');
 
 const ComboboxContent = react.forwardRef((props, ref) => {
   const api = comboboxContext.useComboboxContext();

package/combobox/combobox-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 { useComboboxContext } from './combobox-context.mjs';
 import { usePresenceContext } from '../presence/presence-context.mjs';
+import { useComboboxContext } from './combobox-context.mjs';
 
 const ComboboxContent = forwardRef((props, ref) => {
   const api = useComboboxContext();