@ark-ui/react 1.2.1 → 2.0.0

package/radio-group/{radio-group.stories.d.ts → stories/radio-group.stories.d.ts}

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

package/radio-group/tests/basic.d.ts

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

package/radio-group/use-radio-group.cjs

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

@@ -2,9 +2,8 @@
 import * as radio from '@zag-js/radio-group';
 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 useRadioGroup = (props) => {
   const initialContext = {

package/rating-group/index.cjs

@@ -3,23 +3,24 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const ratingGroup = require('./rating-group.cjs');
 const ratingGroupContext = require('./rating-group-context.cjs');
 const ratingGroupControl = require('./rating-group-control.cjs');
 const ratingGroupItem = require('./rating-group-item.cjs');
 const ratingGroupItemContext = require('./rating-group-item-context.cjs');
 const ratingGroupLabel = require('./rating-group-label.cjs');
+const ratingGroupRoot = require('./rating-group-root.cjs');
 
-const RatingGroup = Object.assign(ratingGroup.RatingGroup, {
-  Root: ratingGroup.RatingGroup,
+const RatingGroup = {
+  Root: ratingGroupRoot.RatingGroupRoot,
   Control: ratingGroupControl.RatingGroupControl,
   Label: ratingGroupLabel.RatingGroupLabel,
   Item: ratingGroupItem.RatingGroupItem
-});
+};
 
 exports.useRatingGroupContext = ratingGroupContext.useRatingGroupContext;
 exports.RatingGroupControl = ratingGroupControl.RatingGroupControl;
 exports.RatingGroupItem = ratingGroupItem.RatingGroupItem;
 exports.useRatingGroupItemContext = ratingGroupItemContext.useRatingGroupItemContext;
 exports.RatingGroupLabel = ratingGroupLabel.RatingGroupLabel;
+exports.RatingGroupRoot = ratingGroupRoot.RatingGroupRoot;
 exports.RatingGroup = RatingGroup;

package/rating-group/index.d.ts

@@ -1,16 +1,17 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
-import { type RatingGroupProps } from './rating-group';
+import type { HoverChangeDetails as RatingGroupHoverChangeDetails, ValueChangeDetails as RatingGroupValueChangeDetails } from '@zag-js/rating-group';
 import { useRatingGroupContext, type RatingGroupContext } from './rating-group-context';
 import { RatingGroupControl, type RatingGroupControlProps } from './rating-group-control';
 import { RatingGroupItem, type RatingGroupItemProps } from './rating-group-item';
 import { useRatingGroupItemContext, type RatingGroupItemContext } from './rating-group-item-context';
 import { RatingGroupLabel, type RatingGroupLabelProps } from './rating-group-label';
-declare const RatingGroup: ForwardRefExoticComponent<RatingGroupProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<RatingGroupProps & RefAttributes<HTMLDivElement>>;
+import { RatingGroupRoot, type RatingGroupRootProps } from './rating-group-root';
+export declare const RatingGroup: {
+    Root: ForwardRefExoticComponent<RatingGroupRootProps & RefAttributes<HTMLDivElement>>;
     Control: ForwardRefExoticComponent<RatingGroupControlProps & RefAttributes<HTMLDivElement>>;
     Label: ForwardRefExoticComponent<RatingGroupLabelProps & RefAttributes<HTMLLabelElement>>;
     Item: ForwardRefExoticComponent<RatingGroupItemProps & RefAttributes<HTMLSpanElement>>;
 };
-export { RatingGroup, RatingGroupControl, RatingGroupItem, RatingGroupLabel, useRatingGroupContext, useRatingGroupItemContext, };
-export type { RatingGroupContext, RatingGroupControlProps, RatingGroupItemContext, RatingGroupItemProps, RatingGroupLabelProps, RatingGroupProps, };
+export { RatingGroupControl, RatingGroupItem, RatingGroupLabel, RatingGroupRoot, useRatingGroupContext, useRatingGroupItemContext, };
+export type { RatingGroupContext, RatingGroupControlProps, RatingGroupHoverChangeDetails, RatingGroupItemContext, RatingGroupItemProps, RatingGroupLabelProps, RatingGroupRootProps, RatingGroupValueChangeDetails, };

package/rating-group/index.mjs

@@ -1,16 +1,16 @@
 'use client';
-import { RatingGroup as RatingGroup$1 } from './rating-group.mjs';
 export { useRatingGroupContext } from './rating-group-context.mjs';
 import { RatingGroupControl } from './rating-group-control.mjs';
 import { RatingGroupItem } from './rating-group-item.mjs';
 export { useRatingGroupItemContext } from './rating-group-item-context.mjs';
 import { RatingGroupLabel } from './rating-group-label.mjs';
+import { RatingGroupRoot } from './rating-group-root.mjs';
 
-const RatingGroup = Object.assign(RatingGroup$1, {
-  Root: RatingGroup$1,
+const RatingGroup = {
+  Root: RatingGroupRoot,
   Control: RatingGroupControl,
   Label: RatingGroupLabel,
   Item: RatingGroupItem
-});
+};
 
-export { RatingGroup, RatingGroupControl, RatingGroupItem, RatingGroupLabel };
+export { RatingGroup, RatingGroupControl, RatingGroupItem, RatingGroupLabel, RatingGroupRoot };

package/rating-group/{rating-group.cjs → rating-group-root.cjs}

@@ -11,7 +11,7 @@ const factory = require('../factory.cjs');
 const ratingGroupContext = require('./rating-group-context.cjs');
 const useRatingGroup = require('./use-rating-group.cjs');
 
-const RatingGroup = react.forwardRef((props, ref) => {
+const RatingGroupRoot = react.forwardRef((props, ref) => {
   const [useRatingProps, localProps] = createSplitProps.createSplitProps()(props, [
     "allowHalf",
     "autoFocus",
@@ -34,6 +34,6 @@ const RatingGroup = react.forwardRef((props, ref) => {
   const mergedProps = react$1.mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(ratingGroupContext.RatingGroupProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });
-RatingGroup.displayName = "RatingGroup";
+RatingGroupRoot.displayName = "RatingGroupRoot";
 
-exports.RatingGroup = RatingGroup;
+exports.RatingGroupRoot = RatingGroupRoot;

package/rating-group/{rating-group.d.ts → rating-group-root.d.ts}

@@ -3,6 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 import { type UseRatingGroupProps } from './use-rating-group';
-export interface RatingGroupProps extends Assign<HTMLArkProps<'div'>, UseRatingGroupProps> {
+export interface RatingGroupRootProps extends Assign<HTMLArkProps<'div'>, UseRatingGroupProps> {
 }
-export declare const RatingGroup: ForwardRefExoticComponent<RatingGroupProps & RefAttributes<HTMLDivElement>>;
+export declare const RatingGroupRoot: ForwardRefExoticComponent<RatingGroupRootProps & RefAttributes<HTMLDivElement>>;

package/rating-group/{rating-group.mjs → rating-group-root.mjs}

@@ -7,7 +7,7 @@ import { ark } from '../factory.mjs';
 import { RatingGroupProvider } from './rating-group-context.mjs';
 import { useRatingGroup } from './use-rating-group.mjs';
 
-const RatingGroup = forwardRef((props, ref) => {
+const RatingGroupRoot = forwardRef((props, ref) => {
   const [useRatingProps, localProps] = createSplitProps()(props, [
     "allowHalf",
     "autoFocus",
@@ -30,6 +30,6 @@ const RatingGroup = forwardRef((props, ref) => {
   const mergedProps = mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsx(RatingGroupProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });
-RatingGroup.displayName = "RatingGroup";
+RatingGroupRoot.displayName = "RatingGroupRoot";
 
-export { RatingGroup };
+export { RatingGroupRoot };

package/rating-group/{rating-group.stories.d.ts → stories/rating-group.stories.d.ts}

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

package/rating-group/tests/basic.d.ts

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

package/rating-group/use-rating-group.cjs

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

@@ -2,9 +2,8 @@
 import * as rating from '@zag-js/rating-group';
 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 useRatingGroup = (props) => {
   const initialContext = {

package/segment-group/index.cjs

@@ -3,7 +3,6 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const segmentGroup = require('./segment-group.cjs');
 const segmentGroupContext = require('./segment-group-context.cjs');
 const segmentGroupIndicator = require('./segment-group-indicator.cjs');
 const segmentGroupItem = require('./segment-group-item.cjs');
@@ -11,15 +10,16 @@ const segmentGroupItemContext = require('./segment-group-item-context.cjs');
 const segmentGroupItemControl = require('./segment-group-item-control.cjs');
 const segmentGroupItemText = require('./segment-group-item-text.cjs');
 const segmentGroupLabel = require('./segment-group-label.cjs');
+const segmentGroupRoot = require('./segment-group-root.cjs');
 
-const SegmentGroup = Object.assign(segmentGroup.SegmentGroup, {
-  Root: segmentGroup.SegmentGroup,
+const SegmentGroup = {
+  Root: segmentGroupRoot.SegmentGroupRoot,
   Indicator: segmentGroupIndicator.SegmentGroupIndicator,
   Item: segmentGroupItem.SegmentGroupItem,
   ItemControl: segmentGroupItemControl.SegmentGroupItemControl,
   ItemText: segmentGroupItemText.SegmentGroupItemText,
   Label: segmentGroupLabel.SegmentGroupLabel
-});
+};
 
 exports.useSegmentGroupContext = segmentGroupContext.useSegmentGroupContext;
 exports.SegmentGroupIndicator = segmentGroupIndicator.SegmentGroupIndicator;
@@ -28,4 +28,5 @@ exports.useSegmentGroupItemContext = segmentGroupItemContext.useSegmentGroupItem
 exports.SegmentGroupItemControl = segmentGroupItemControl.SegmentGroupItemControl;
 exports.SegmentGroupItemText = segmentGroupItemText.SegmentGroupItemText;
 exports.SegmentGroupLabel = segmentGroupLabel.SegmentGroupLabel;
+exports.SegmentGroupRoot = segmentGroupRoot.SegmentGroupRoot;
 exports.SegmentGroup = SegmentGroup;

package/segment-group/index.d.ts

@@ -1,6 +1,6 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
-import { type SegmentGroupProps } from './segment-group';
+import type { ValueChangeDetails as SegmentGroupValueChangeDetails } from '@zag-js/radio-group';
 import { useSegmentGroupContext, type SegmentGroupContext } from './segment-group-context';
 import { SegmentGroupIndicator, type SegmentGroupIndicatorProps } from './segment-group-indicator';
 import { SegmentGroupItem, type SegmentGroupItemProps } from './segment-group-item';
@@ -8,13 +8,14 @@ import { useSegmentGroupItemContext, type SegmentGroupItemContext } from './segm
 import { SegmentGroupItemControl, type SegmentGroupItemControlProps } from './segment-group-item-control';
 import { SegmentGroupItemText, type SegmentGroupItemTextProps } from './segment-group-item-text';
 import { SegmentGroupLabel, type SegmentGroupLabelProps } from './segment-group-label';
-declare const SegmentGroup: ForwardRefExoticComponent<SegmentGroupProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<SegmentGroupProps & RefAttributes<HTMLDivElement>>;
+import { SegmentGroupRoot, type SegmentGroupRootProps } from './segment-group-root';
+export declare const SegmentGroup: {
+    Root: ForwardRefExoticComponent<SegmentGroupRootProps & RefAttributes<HTMLDivElement>>;
     Indicator: ForwardRefExoticComponent<SegmentGroupIndicatorProps & RefAttributes<HTMLDivElement>>;
     Item: ForwardRefExoticComponent<SegmentGroupItemProps & RefAttributes<HTMLLabelElement>>;
     ItemControl: ForwardRefExoticComponent<SegmentGroupItemControlProps & RefAttributes<HTMLDivElement>>;
     ItemText: ForwardRefExoticComponent<SegmentGroupItemTextProps & RefAttributes<HTMLSpanElement>>;
     Label: ForwardRefExoticComponent<SegmentGroupLabelProps & RefAttributes<HTMLLabelElement>>;
 };
-export { SegmentGroup, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel, useSegmentGroupContext, useSegmentGroupItemContext, };
-export type { SegmentGroupContext, SegmentGroupIndicatorProps, SegmentGroupItemContext, SegmentGroupItemControlProps, SegmentGroupItemProps, SegmentGroupItemTextProps, SegmentGroupLabelProps, SegmentGroupProps, };
+export { SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel, SegmentGroupRoot, useSegmentGroupContext, useSegmentGroupItemContext, };
+export type { SegmentGroupContext, SegmentGroupIndicatorProps, SegmentGroupItemContext, SegmentGroupItemControlProps, SegmentGroupItemProps, SegmentGroupItemTextProps, SegmentGroupLabelProps, SegmentGroupRootProps, SegmentGroupValueChangeDetails, };

package/segment-group/index.mjs

@@ -1,5 +1,4 @@
 'use client';
-import { SegmentGroup as SegmentGroup$1 } from './segment-group.mjs';
 export { useSegmentGroupContext } from './segment-group-context.mjs';
 import { SegmentGroupIndicator } from './segment-group-indicator.mjs';
 import { SegmentGroupItem } from './segment-group-item.mjs';
@@ -7,14 +6,15 @@ export { useSegmentGroupItemContext } from './segment-group-item-context.mjs';
 import { SegmentGroupItemControl } from './segment-group-item-control.mjs';
 import { SegmentGroupItemText } from './segment-group-item-text.mjs';
 import { SegmentGroupLabel } from './segment-group-label.mjs';
+import { SegmentGroupRoot } from './segment-group-root.mjs';
 
-const SegmentGroup = Object.assign(SegmentGroup$1, {
-  Root: SegmentGroup$1,
+const SegmentGroup = {
+  Root: SegmentGroupRoot,
   Indicator: SegmentGroupIndicator,
   Item: SegmentGroupItem,
   ItemControl: SegmentGroupItemControl,
   ItemText: SegmentGroupItemText,
   Label: SegmentGroupLabel
-});
+};
 
-export { SegmentGroup, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel };
+export { SegmentGroup, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel, SegmentGroupRoot };

package/segment-group/{segment-group.cjs → segment-group-root.cjs}

@@ -12,7 +12,7 @@ const factory = require('../factory.cjs');
 const segmentGroupContext = require('./segment-group-context.cjs');
 const useSegmentGroup = require('./use-segment-group.cjs');
 
-const SegmentGroup = react.forwardRef((props, ref) => {
+const SegmentGroupRoot = react.forwardRef((props, ref) => {
   const [useSegmentGroupProps, localProps] = createSplitProps.createSplitProps()(props, [
     "defaultValue",
     "dir",
@@ -34,6 +34,6 @@ const SegmentGroup = react.forwardRef((props, ref) => {
   );
   return /* @__PURE__ */ jsxRuntime.jsx(segmentGroupContext.SegmentGroupProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });
-SegmentGroup.displayName = "SegmentGroup";
+SegmentGroupRoot.displayName = "SegmentGroupRoot";
 
-exports.SegmentGroup = SegmentGroup;
+exports.SegmentGroupRoot = SegmentGroupRoot;

package/segment-group/{segment-group.d.ts → segment-group-root.d.ts}

@@ -3,6 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 import { type UseSegmentGroupProps } from './use-segment-group';
-export interface SegmentGroupProps extends Assign<HTMLArkProps<'div'>, UseSegmentGroupProps> {
+export interface SegmentGroupRootProps extends Assign<HTMLArkProps<'div'>, UseSegmentGroupProps> {
 }
-export declare const SegmentGroup: ForwardRefExoticComponent<SegmentGroupProps & RefAttributes<HTMLDivElement>>;
+export declare const SegmentGroupRoot: ForwardRefExoticComponent<SegmentGroupRootProps & RefAttributes<HTMLDivElement>>;

package/segment-group/{segment-group.mjs → segment-group-root.mjs}

@@ -8,7 +8,7 @@ import { ark } from '../factory.mjs';
 import { SegmentGroupProvider } from './segment-group-context.mjs';
 import { useSegmentGroup } from './use-segment-group.mjs';
 
-const SegmentGroup = forwardRef((props, ref) => {
+const SegmentGroupRoot = forwardRef((props, ref) => {
   const [useSegmentGroupProps, localProps] = createSplitProps()(props, [
     "defaultValue",
     "dir",
@@ -30,6 +30,6 @@ const SegmentGroup = forwardRef((props, ref) => {
   );
   return /* @__PURE__ */ jsx(SegmentGroupProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });
-SegmentGroup.displayName = "SegmentGroup";
+SegmentGroupRoot.displayName = "SegmentGroupRoot";
 
-export { SegmentGroup };
+export { SegmentGroupRoot };

package/segment-group/{segment-group.stories.d.ts → stories/segment-group.stories.d.ts}

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

package/segment-group/tests/basic.d.ts

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

package/segment-group/use-segment-group.cjs

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

@@ -2,9 +2,8 @@
 import * as radio from '@zag-js/radio-group';
 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 useSegmentGroup = (props) => {
   const initialContext = {

package/select/index.cjs

@@ -3,7 +3,6 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const select = require('./select.cjs');
 const selectClearTrigger = require('./select-clear-trigger.cjs');
 const selectContent = require('./select-content.cjs');
 const selectContext = require('./select-context.cjs');
@@ -17,11 +16,12 @@ const selectItemIndicator = require('./select-item-indicator.cjs');
 const selectItemText = require('./select-item-text.cjs');
 const selectLabel = require('./select-label.cjs');
 const selectPositioner = require('./select-positioner.cjs');
+const selectRoot = require('./select-root.cjs');
 const selectTrigger = require('./select-trigger.cjs');
 const selectValueText = require('./select-value-text.cjs');
 
-const Select = Object.assign(select.Select, {
-  Root: select.Select,
+const Select = {
+  Root: selectRoot.SelectRoot,
   ClearTrigger: selectClearTrigger.SelectClearTrigger,
   Content: selectContent.SelectContent,
   Control: selectControl.SelectControl,
@@ -35,7 +35,7 @@ const Select = Object.assign(select.Select, {
   Positioner: selectPositioner.SelectPositioner,
   Trigger: selectTrigger.SelectTrigger,
   ValueText: selectValueText.SelectValueText
-});
+};
 
 exports.SelectClearTrigger = selectClearTrigger.SelectClearTrigger;
 exports.SelectContent = selectContent.SelectContent;
@@ -50,6 +50,7 @@ exports.SelectItemIndicator = selectItemIndicator.SelectItemIndicator;
 exports.SelectItemText = selectItemText.SelectItemText;
 exports.SelectLabel = selectLabel.SelectLabel;
 exports.SelectPositioner = selectPositioner.SelectPositioner;
+exports.SelectRoot = selectRoot.SelectRoot;
 exports.SelectTrigger = selectTrigger.SelectTrigger;
 exports.SelectValueText = selectValueText.SelectValueText;
 exports.Select = Select;

package/select/index.d.ts

@@ -1,7 +1,7 @@
 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';
@@ -15,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>>;
@@ -33,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, SelectIndicatorProps, SelectItemContext, SelectItemGroupLabelProps, SelectItemGroupProps, SelectItemIndicatorProps, SelectItemProps, SelectItemTextProps, SelectLabelProps, SelectPositionerProps, SelectProps, SelectTriggerProps, 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/select-value-text.d.ts

@@ -2,5 +2,9 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
 export interface SelectValueTextProps extends HTMLArkProps<'span'> {
+    /**
+     * Text to display when no value is selected.
+     */
+    placeholder?: string;
 }
 export declare const SelectValueText: ForwardRefExoticComponent<SelectValueTextProps & RefAttributes<HTMLSpanElement>>;

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