@ark-ui/react 1.3.0 → 2.0.1

package/radio-group/radio-group-root.mjs

@@ -0,0 +1,30 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { RadioGroupProvider } from './radio-group-context.mjs';
+import { useRadioGroup } from './use-radio-group.mjs';
+
+const RadioGroupRoot = forwardRef((props, ref) => {
+  const [useRadioGroupProps, localProps] = createSplitProps()(props, [
+    "defaultValue",
+    "dir",
+    "disabled",
+    "form",
+    "getRootNode",
+    "id",
+    "ids",
+    "name",
+    "onValueChange",
+    "orientation",
+    "value"
+  ]);
+  const api = useRadioGroup(useRadioGroupProps);
+  const mergedProps = mergeProps(api.rootProps, localProps);
+  return /* @__PURE__ */ jsx(RadioGroupProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+});
+RadioGroupRoot.displayName = "RadioGroupRoot";
+
+export { RadioGroupRoot };

package/radio-group/radio-group.cjs

@@ -1,34 +1,19 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const jsxRuntime = require('react/jsx-runtime');
-const react$1 = require('@zag-js/react');
-const react = require('react');
-const createSplitProps = require('../create-split-props.cjs');
-const factory = require('../factory.cjs');
-const radioGroupContext = require('./radio-group-context.cjs');
-const useRadioGroup = require('./use-radio-group.cjs');
+const radioGroupIndicator = require('./radio-group-indicator.cjs');
+const radioGroupItem = require('./radio-group-item.cjs');
+const radioGroupItemControl = require('./radio-group-item-control.cjs');
+const radioGroupItemText = require('./radio-group-item-text.cjs');
+const radioGroupLabel = require('./radio-group-label.cjs');
+const radioGroupRoot = require('./radio-group-root.cjs');
 
-const RadioGroup = react.forwardRef((props, ref) => {
-  const [useRadioGroupProps, localProps] = createSplitProps.createSplitProps()(props, [
-    "defaultValue",
-    "dir",
-    "disabled",
-    "form",
-    "getRootNode",
-    "id",
-    "ids",
-    "name",
-    "onValueChange",
-    "orientation",
-    "value"
-  ]);
-  const api = useRadioGroup.useRadioGroup(useRadioGroupProps);
-  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(radioGroupContext.RadioGroupProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
-});
-RadioGroup.displayName = "RadioGroup";
 
-exports.RadioGroup = RadioGroup;
+
+exports.Indicator = radioGroupIndicator.RadioGroupIndicator;
+exports.Item = radioGroupItem.RadioGroupItem;
+exports.ItemControl = radioGroupItemControl.RadioGroupItemControl;
+exports.ItemText = radioGroupItemText.RadioGroupItemText;
+exports.Label = radioGroupLabel.RadioGroupLabel;
+exports.Root = radioGroupRoot.RadioGroupRoot;

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

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="react" />
-import { type HTMLArkProps } from '../factory';
-import { type Assign } from '../types';
-import { type UseRadioGroupProps } from './use-radio-group';
-export interface RadioGroupProps extends Assign<HTMLArkProps<'div'>, UseRadioGroupProps> {
-}
-export declare const RadioGroup: ForwardRefExoticComponent<RadioGroupProps & RefAttributes<HTMLDivElement>>;
+import { RadioGroupIndicator as Indicator } from './radio-group-indicator';
+import { RadioGroupItem as Item } from './radio-group-item';
+import { RadioGroupItemControl as ItemControl } from './radio-group-item-control';
+import { RadioGroupItemText as ItemText } from './radio-group-item-text';
+import { RadioGroupLabel as Label } from './radio-group-label';
+import { RadioGroupRoot as Root } from './radio-group-root';
+export { Indicator, Item, ItemControl, ItemText, Label, Root };

package/radio-group/radio-group.mjs

@@ -1,30 +1,6 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { mergeProps } from '@zag-js/react';
-import { forwardRef } from 'react';
-import { createSplitProps } from '../create-split-props.mjs';
-import { ark } from '../factory.mjs';
-import { RadioGroupProvider } from './radio-group-context.mjs';
-import { useRadioGroup } from './use-radio-group.mjs';
-
-const RadioGroup = forwardRef((props, ref) => {
-  const [useRadioGroupProps, localProps] = createSplitProps()(props, [
-    "defaultValue",
-    "dir",
-    "disabled",
-    "form",
-    "getRootNode",
-    "id",
-    "ids",
-    "name",
-    "onValueChange",
-    "orientation",
-    "value"
-  ]);
-  const api = useRadioGroup(useRadioGroupProps);
-  const mergedProps = mergeProps(api.rootProps, localProps);
-  return /* @__PURE__ */ jsx(RadioGroupProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
-});
-RadioGroup.displayName = "RadioGroup";
-
-export { RadioGroup };
+export { RadioGroupIndicator as Indicator } from './radio-group-indicator.mjs';
+export { RadioGroupItem as Item } from './radio-group-item.mjs';
+export { RadioGroupItemControl as ItemControl } from './radio-group-item-control.mjs';
+export { RadioGroupItemText as ItemText } from './radio-group-item-text.mjs';
+export { RadioGroupLabel as Label } from './radio-group-label.mjs';
+export { RadioGroupRoot as Root } from './radio-group-root.mjs';

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

@@ -1,25 +1,21 @@
-'use client';
 'use strict';
 
 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 = require('./rating-group.cjs');
+
 
-const RatingGroup = Object.assign(ratingGroup.RatingGroup, {
-  Root: ratingGroup.RatingGroup,
-  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.RatingGroup = RatingGroup;
+exports.RatingGroupRoot = ratingGroupRoot.RatingGroupRoot;
+exports.RatingGroup = ratingGroup;

package/rating-group/index.d.ts

@@ -1,17 +1,10 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="react" />
 import type { HoverChangeDetails as RatingGroupHoverChangeDetails, ValueChangeDetails as RatingGroupValueChangeDetails } from '@zag-js/rating-group';
-import { type RatingGroupProps } from './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>>;
-    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, RatingGroupHoverChangeDetails, RatingGroupItemContext, RatingGroupItemProps, RatingGroupLabelProps, RatingGroupProps, RatingGroupValueChangeDetails, };
+import { RatingGroupRoot, type RatingGroupRootProps } from './rating-group-root';
+export * as RatingGroup from './rating-group';
+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,8 @@
-'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 { RatingGroupControl } from './rating-group-control.mjs';
+export { RatingGroupItem } from './rating-group-item.mjs';
 export { useRatingGroupItemContext } from './rating-group-item-context.mjs';
-import { RatingGroupLabel } from './rating-group-label.mjs';
-
-const RatingGroup = Object.assign(RatingGroup$1, {
-  Root: RatingGroup$1,
-  Control: RatingGroupControl,
-  Label: RatingGroupLabel,
-  Item: RatingGroupItem
-});
-
-export { RatingGroup, RatingGroupControl, RatingGroupItem, RatingGroupLabel };
+export { RatingGroupLabel } from './rating-group-label.mjs';
+export { RatingGroupRoot } from './rating-group-root.mjs';
+import * as ratingGroup from './rating-group.mjs';
+export { ratingGroup as RatingGroup };

package/rating-group/rating-group-root.cjs

@@ -0,0 +1,39 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const ratingGroupContext = require('./rating-group-context.cjs');
+const useRatingGroup = require('./use-rating-group.cjs');
+
+const RatingGroupRoot = react.forwardRef((props, ref) => {
+  const [useRatingProps, localProps] = createSplitProps.createSplitProps()(props, [
+    "allowHalf",
+    "autoFocus",
+    "count",
+    "defaultValue",
+    "dir",
+    "disabled",
+    "form",
+    "getRootNode",
+    "id",
+    "ids",
+    "name",
+    "onHoverChange",
+    "onValueChange",
+    "readOnly",
+    "translations",
+    "value"
+  ]);
+  const api = useRatingGroup.useRatingGroup(useRatingProps);
+  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 }) });
+});
+RatingGroupRoot.displayName = "RatingGroupRoot";
+
+exports.RatingGroupRoot = RatingGroupRoot;

package/rating-group/rating-group-root.d.ts

@@ -0,0 +1,8 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+import { type Assign } from '../types';
+import { type UseRatingGroupProps } from './use-rating-group';
+export interface RatingGroupRootProps extends Assign<HTMLArkProps<'div'>, UseRatingGroupProps> {
+}
+export declare const RatingGroupRoot: ForwardRefExoticComponent<RatingGroupRootProps & RefAttributes<HTMLDivElement>>;

package/rating-group/rating-group-root.mjs

@@ -0,0 +1,35 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { RatingGroupProvider } from './rating-group-context.mjs';
+import { useRatingGroup } from './use-rating-group.mjs';
+
+const RatingGroupRoot = forwardRef((props, ref) => {
+  const [useRatingProps, localProps] = createSplitProps()(props, [
+    "allowHalf",
+    "autoFocus",
+    "count",
+    "defaultValue",
+    "dir",
+    "disabled",
+    "form",
+    "getRootNode",
+    "id",
+    "ids",
+    "name",
+    "onHoverChange",
+    "onValueChange",
+    "readOnly",
+    "translations",
+    "value"
+  ]);
+  const api = useRatingGroup(useRatingProps);
+  const mergedProps = mergeProps(api.rootProps, localProps);
+  return /* @__PURE__ */ jsx(RatingGroupProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+});
+RatingGroupRoot.displayName = "RatingGroupRoot";
+
+export { RatingGroupRoot };

package/rating-group/rating-group.cjs

@@ -1,39 +1,15 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const jsxRuntime = require('react/jsx-runtime');
-const react$1 = require('@zag-js/react');
-const react = require('react');
-const createSplitProps = require('../create-split-props.cjs');
-const factory = require('../factory.cjs');
-const ratingGroupContext = require('./rating-group-context.cjs');
-const useRatingGroup = require('./use-rating-group.cjs');
+const ratingGroupControl = require('./rating-group-control.cjs');
+const ratingGroupItem = require('./rating-group-item.cjs');
+const ratingGroupLabel = require('./rating-group-label.cjs');
+const ratingGroupRoot = require('./rating-group-root.cjs');
 
-const RatingGroup = react.forwardRef((props, ref) => {
-  const [useRatingProps, localProps] = createSplitProps.createSplitProps()(props, [
-    "allowHalf",
-    "autoFocus",
-    "count",
-    "defaultValue",
-    "dir",
-    "disabled",
-    "form",
-    "getRootNode",
-    "id",
-    "ids",
-    "name",
-    "onHoverChange",
-    "onValueChange",
-    "readOnly",
-    "translations",
-    "value"
-  ]);
-  const api = useRatingGroup.useRatingGroup(useRatingProps);
-  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";
 
-exports.RatingGroup = RatingGroup;
+
+exports.Control = ratingGroupControl.RatingGroupControl;
+exports.Item = ratingGroupItem.RatingGroupItem;
+exports.Label = ratingGroupLabel.RatingGroupLabel;
+exports.Root = ratingGroupRoot.RatingGroupRoot;

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

@@ -1,8 +1,5 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="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 declare const RatingGroup: ForwardRefExoticComponent<RatingGroupProps & RefAttributes<HTMLDivElement>>;
+import { RatingGroupControl as Control } from './rating-group-control';
+import { RatingGroupItem as Item } from './rating-group-item';
+import { RatingGroupLabel as Label } from './rating-group-label';
+import { RatingGroupRoot as Root } from './rating-group-root';
+export { Control, Item, Label, Root };

package/rating-group/rating-group.mjs

@@ -1,35 +1,4 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { mergeProps } from '@zag-js/react';
-import { forwardRef } from 'react';
-import { createSplitProps } from '../create-split-props.mjs';
-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 [useRatingProps, localProps] = createSplitProps()(props, [
-    "allowHalf",
-    "autoFocus",
-    "count",
-    "defaultValue",
-    "dir",
-    "disabled",
-    "form",
-    "getRootNode",
-    "id",
-    "ids",
-    "name",
-    "onHoverChange",
-    "onValueChange",
-    "readOnly",
-    "translations",
-    "value"
-  ]);
-  const api = useRatingGroup(useRatingProps);
-  const mergedProps = mergeProps(api.rootProps, localProps);
-  return /* @__PURE__ */ jsx(RatingGroupProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
-});
-RatingGroup.displayName = "RatingGroup";
-
-export { RatingGroup };
+export { RatingGroupControl as Control } from './rating-group-control.mjs';
+export { RatingGroupItem as Item } from './rating-group-item.mjs';
+export { RatingGroupLabel as Label } from './rating-group-label.mjs';
+export { RatingGroupRoot as Root } from './rating-group-root.mjs';

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

@@ -1,9 +1,7 @@
-'use client';
 'use strict';
 
 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 +9,10 @@ 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 = require('./segment-group.cjs');
+
 
-const SegmentGroup = Object.assign(segmentGroup.SegmentGroup, {
-  Root: segmentGroup.SegmentGroup,
-  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 +21,5 @@ exports.useSegmentGroupItemContext = segmentGroupItemContext.useSegmentGroupItem
 exports.SegmentGroupItemControl = segmentGroupItemControl.SegmentGroupItemControl;
 exports.SegmentGroupItemText = segmentGroupItemText.SegmentGroupItemText;
 exports.SegmentGroupLabel = segmentGroupLabel.SegmentGroupLabel;
-exports.SegmentGroup = SegmentGroup;
+exports.SegmentGroupRoot = segmentGroupRoot.SegmentGroupRoot;
+exports.SegmentGroup = segmentGroup;

package/segment-group/index.d.ts

@@ -1,7 +1,4 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="react" />
 import type { ValueChangeDetails as SegmentGroupValueChangeDetails } from '@zag-js/radio-group';
-import { type SegmentGroupProps } from './segment-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';
@@ -9,13 +6,7 @@ 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>>;
-    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, SegmentGroupValueChangeDetails, };
+import { SegmentGroupRoot, type SegmentGroupRootProps } from './segment-group-root';
+export * as SegmentGroup from './segment-group';
+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,20 +1,10 @@
-'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';
+export { SegmentGroupIndicator } from './segment-group-indicator.mjs';
+export { SegmentGroupItem } from './segment-group-item.mjs';
 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';
-
-const SegmentGroup = Object.assign(SegmentGroup$1, {
-  Root: SegmentGroup$1,
-  Indicator: SegmentGroupIndicator,
-  Item: SegmentGroupItem,
-  ItemControl: SegmentGroupItemControl,
-  ItemText: SegmentGroupItemText,
-  Label: SegmentGroupLabel
-});
-
-export { SegmentGroup, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel };
+export { SegmentGroupItemControl } from './segment-group-item-control.mjs';
+export { SegmentGroupItemText } from './segment-group-item-text.mjs';
+export { SegmentGroupLabel } from './segment-group-label.mjs';
+export { SegmentGroupRoot } from './segment-group-root.mjs';
+import * as segmentGroup from './segment-group.mjs';
+export { segmentGroup as SegmentGroup };

package/segment-group/segment-group-root.cjs

@@ -0,0 +1,39 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const anatomy = require('@ark-ui/anatomy');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const segmentGroupContext = require('./segment-group-context.cjs');
+const useSegmentGroup = require('./use-segment-group.cjs');
+
+const SegmentGroupRoot = react.forwardRef((props, ref) => {
+  const [useSegmentGroupProps, localProps] = createSplitProps.createSplitProps()(props, [
+    "defaultValue",
+    "dir",
+    "disabled",
+    "form",
+    "getRootNode",
+    "id",
+    "ids",
+    "name",
+    "onValueChange",
+    "orientation",
+    "value"
+  ]);
+  const api = useSegmentGroup.useSegmentGroup(useSegmentGroupProps);
+  const mergedProps = react$1.mergeProps(
+    api.rootProps,
+    anatomy.segmentGroupAnatomy.build().root.attrs,
+    localProps
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(segmentGroupContext.SegmentGroupProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+});
+SegmentGroupRoot.displayName = "SegmentGroupRoot";
+
+exports.SegmentGroupRoot = SegmentGroupRoot;

package/segment-group/segment-group-root.d.ts

@@ -0,0 +1,8 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+import { type Assign } from '../types';
+import { type UseSegmentGroupProps } from './use-segment-group';
+export interface SegmentGroupRootProps extends Assign<HTMLArkProps<'div'>, UseSegmentGroupProps> {
+}
+export declare const SegmentGroupRoot: ForwardRefExoticComponent<SegmentGroupRootProps & RefAttributes<HTMLDivElement>>;

package/segment-group/segment-group-root.mjs

@@ -0,0 +1,35 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { segmentGroupAnatomy } from '@ark-ui/anatomy';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { SegmentGroupProvider } from './segment-group-context.mjs';
+import { useSegmentGroup } from './use-segment-group.mjs';
+
+const SegmentGroupRoot = forwardRef((props, ref) => {
+  const [useSegmentGroupProps, localProps] = createSplitProps()(props, [
+    "defaultValue",
+    "dir",
+    "disabled",
+    "form",
+    "getRootNode",
+    "id",
+    "ids",
+    "name",
+    "onValueChange",
+    "orientation",
+    "value"
+  ]);
+  const api = useSegmentGroup(useSegmentGroupProps);
+  const mergedProps = mergeProps(
+    api.rootProps,
+    segmentGroupAnatomy.build().root.attrs,
+    localProps
+  );
+  return /* @__PURE__ */ jsx(SegmentGroupProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+});
+SegmentGroupRoot.displayName = "SegmentGroupRoot";
+
+export { SegmentGroupRoot };