@ark-ui/react 1.3.0 → 2.0.1

package/popover/use-popover.cjs

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

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

package/portal.cjs

@@ -5,9 +5,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const react = require('react');
 const reactDom = require('react-dom');
-require('./environment/index.cjs');
-const useIsServer = require('./use-is-server.cjs');
 const environmentContext = require('./environment/environment-context.cjs');
+const useIsServer = require('./use-is-server.cjs');
 
 const Portal = (props) => {
   const { children, container, disabled } = props;

package/portal.mjs

@@ -1,9 +1,8 @@
 'use client';
 import { Children } from 'react';
 import { createPortal } from 'react-dom';
-import './environment/index.mjs';
-import { useIsServer } from './use-is-server.mjs';
 import { useEnvironmentContext } from './environment/environment-context.mjs';
+import { useIsServer } from './use-is-server.mjs';
 
 const Portal = (props) => {
   const { children, container, disabled } = props;

package/presence/index.cjs

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -9,14 +8,12 @@ const presencePropsContext = require('./presence-props-context.cjs');
 const splitPresenceProps = require('./split-presence-props.cjs');
 const usePresence = require('./use-presence.cjs');
 
-const Presence = Object.assign(presence.Presence, {
-  Root: presence.Presence
-});
 
+
+exports.Presence = presence.Presence;
 exports.PresenceProvider = presenceContext.PresenceProvider;
 exports.usePresenceContext = presenceContext.usePresenceContext;
 exports.PresencePropsProvider = presencePropsContext.PresencePropsProvider;
 exports.usePresencePropsContext = presencePropsContext.usePresencePropsContext;
 exports.splitPresenceProps = splitPresenceProps.splitPresenceProps;
 exports.usePresence = usePresence.usePresence;
-exports.Presence = Presence;

package/presence/index.d.ts

@@ -1,12 +1,7 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="react" />
-import { type PresenceProps } from './presence';
+import { Presence, type PresenceProps } from './presence';
 import { PresenceProvider, usePresenceContext, type PresenceContext } from './presence-context';
 import { PresencePropsProvider, usePresencePropsContext, type PresencePropsContext } from './presence-props-context';
 import { splitPresenceProps } from './split-presence-props';
 import { usePresence, type UsePresenceProps, type UsePresenceReturn } from './use-presence';
-declare const Presence: ForwardRefExoticComponent<PresenceProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<PresenceProps & RefAttributes<HTMLDivElement>>;
-};
 export { Presence, PresencePropsProvider, PresenceProvider, splitPresenceProps, usePresence, usePresenceContext, usePresencePropsContext, };
 export type { PresenceContext, PresenceProps, PresencePropsContext, UsePresenceProps, UsePresenceReturn, };

package/presence/index.mjs

@@ -1,12 +1,5 @@
-'use client';
-import { Presence as Presence$1 } from './presence.mjs';
+export { Presence } from './presence.mjs';
 export { PresenceProvider, usePresenceContext } from './presence-context.mjs';
 export { PresencePropsProvider, usePresencePropsContext } from './presence-props-context.mjs';
 export { splitPresenceProps } from './split-presence-props.mjs';
 export { usePresence } from './use-presence.mjs';
-
-const Presence = Object.assign(Presence$1, {
-  Root: Presence$1
-});
-
-export { Presence };

package/progress/index.cjs

@@ -1,38 +1,29 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const progress = require('./progress.cjs');
 const progressCircle = require('./progress-circle.cjs');
 const progressCircleRange = require('./progress-circle-range.cjs');
 const progressCircleTrack = require('./progress-circle-track.cjs');
 const progressContext = require('./progress-context.cjs');
-const progressIndicator = require('./progress-indicator.cjs');
 const progressLabel = require('./progress-label.cjs');
 const progressRange = require('./progress-range.cjs');
+const progressRoot = require('./progress-root.cjs');
 const progressTrack = require('./progress-track.cjs');
 const progressValueText = require('./progress-value-text.cjs');
+const progressView = require('./progress-view.cjs');
+const progress = require('./progress.cjs');
+
 
-const Progress = Object.assign(progress.Progress, {
-  Root: progress.Progress,
-  Label: progressLabel.ProgressLabel,
-  Track: progressTrack.ProgressTrack,
-  Range: progressRange.ProgressRange,
-  ValueText: progressValueText.ProgressValueText,
-  Indicator: progressIndicator.ProgressIndicator,
-  Circle: progressCircle.ProgressCircle,
-  CircleTrack: progressCircleTrack.ProgressCircleTrack,
-  CircleRange: progressCircleRange.ProgressCircleRange
-});
 
 exports.ProgressCircle = progressCircle.ProgressCircle;
 exports.ProgressCircleRange = progressCircleRange.ProgressCircleRange;
 exports.ProgressCircleTrack = progressCircleTrack.ProgressCircleTrack;
 exports.useProgressContext = progressContext.useProgressContext;
-exports.ProgressIndicator = progressIndicator.ProgressIndicator;
 exports.ProgressLabel = progressLabel.ProgressLabel;
 exports.ProgressRange = progressRange.ProgressRange;
+exports.ProgressRoot = progressRoot.ProgressRoot;
 exports.ProgressTrack = progressTrack.ProgressTrack;
 exports.ProgressValueText = progressValueText.ProgressValueText;
-exports.Progress = Progress;
+exports.ProgressView = progressView.ProgressView;
+exports.Progress = progress;

package/progress/index.d.ts

@@ -1,35 +1,13 @@
-import { JSX } from 'react/jsx-runtime';
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="react" />
-import { type ProgressProps } from './progress';
 import { ProgressCircle, type ProgressCircleProps } from './progress-circle';
 import { ProgressCircleRange, type ProgressCircleRangeProps } from './progress-circle-range';
 import { ProgressCircleTrack, type ProgressCircleTrackProps } from './progress-circle-track';
 import { useProgressContext, type ProgressContext } from './progress-context';
-import { ProgressIndicator, type ProgressIndicatorProps } from './progress-indicator';
 import { ProgressLabel, type ProgressLabelProps } from './progress-label';
 import { ProgressRange, type ProgressRangeProps } from './progress-range';
+import { ProgressRoot, type ProgressRootProps } from './progress-root';
 import { ProgressTrack, type ProgressTrackProps } from './progress-track';
 import { ProgressValueText, type ProgressValueTextProps } from './progress-value-text';
-declare const Progress: ForwardRefExoticComponent<ProgressProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<ProgressProps & RefAttributes<HTMLDivElement>>;
-    Label: ForwardRefExoticComponent<ProgressLabelProps & RefAttributes<HTMLLabelElement>>;
-    Track: ForwardRefExoticComponent<ProgressTrackProps & RefAttributes<HTMLDivElement>>;
-    Range: ForwardRefExoticComponent<ProgressRangeProps & RefAttributes<HTMLDivElement>>;
-    ValueText: ForwardRefExoticComponent<ProgressValueTextProps & RefAttributes<HTMLSpanElement>>;
-    Indicator: ForwardRefExoticComponent<ProgressIndicatorProps & RefAttributes<HTMLSpanElement>>;
-    Circle: {
-        (props: ProgressCircleProps): JSX.Element;
-        displayName: string;
-    };
-    CircleTrack: {
-        (props: ProgressCircleTrackProps): JSX.Element;
-        displayName: string;
-    };
-    CircleRange: {
-        (props: ProgressCircleRangeProps): JSX.Element;
-        displayName: string;
-    };
-};
-export { Progress, ProgressCircle, ProgressCircleRange, ProgressCircleTrack, ProgressIndicator, ProgressLabel, ProgressRange, ProgressTrack, ProgressValueText, useProgressContext, };
-export type { ProgressCircleProps, ProgressCircleRangeProps, ProgressCircleTrackProps, ProgressContext, ProgressIndicatorProps, ProgressLabelProps, ProgressProps, ProgressRangeProps, ProgressTrackProps, ProgressValueTextProps, };
+import { ProgressView, type ProgressViewProps } from './progress-view';
+export * as Progress from './progress';
+export { ProgressCircle, ProgressCircleRange, ProgressCircleTrack, ProgressLabel, ProgressRange, ProgressRoot, ProgressTrack, ProgressValueText, ProgressView, useProgressContext, };
+export type { ProgressCircleProps, ProgressCircleRangeProps, ProgressCircleTrackProps, ProgressContext, ProgressLabelProps, ProgressRangeProps, ProgressRootProps, ProgressTrackProps, ProgressValueTextProps, ProgressViewProps, };

package/progress/index.mjs

@@ -1,25 +1,12 @@
-'use client';
-import { Progress as Progress$1 } from './progress.mjs';
-import { ProgressCircle } from './progress-circle.mjs';
-import { ProgressCircleRange } from './progress-circle-range.mjs';
-import { ProgressCircleTrack } from './progress-circle-track.mjs';
+export { ProgressCircle } from './progress-circle.mjs';
+export { ProgressCircleRange } from './progress-circle-range.mjs';
+export { ProgressCircleTrack } from './progress-circle-track.mjs';
 export { useProgressContext } from './progress-context.mjs';
-import { ProgressIndicator } from './progress-indicator.mjs';
-import { ProgressLabel } from './progress-label.mjs';
-import { ProgressRange } from './progress-range.mjs';
-import { ProgressTrack } from './progress-track.mjs';
-import { ProgressValueText } from './progress-value-text.mjs';
-
-const Progress = Object.assign(Progress$1, {
-  Root: Progress$1,
-  Label: ProgressLabel,
-  Track: ProgressTrack,
-  Range: ProgressRange,
-  ValueText: ProgressValueText,
-  Indicator: ProgressIndicator,
-  Circle: ProgressCircle,
-  CircleTrack: ProgressCircleTrack,
-  CircleRange: ProgressCircleRange
-});
-
-export { Progress, ProgressCircle, ProgressCircleRange, ProgressCircleTrack, ProgressIndicator, ProgressLabel, ProgressRange, ProgressTrack, ProgressValueText };
+export { ProgressLabel } from './progress-label.mjs';
+export { ProgressRange } from './progress-range.mjs';
+export { ProgressRoot } from './progress-root.mjs';
+export { ProgressTrack } from './progress-track.mjs';
+export { ProgressValueText } from './progress-value-text.mjs';
+export { ProgressView } from './progress-view.mjs';
+import * as progress from './progress.mjs';
+export { progress as Progress };

package/progress/progress-root.cjs

@@ -0,0 +1,34 @@
+'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 runIfFn = require('../run-if-fn.cjs');
+const progressContext = require('./progress-context.cjs');
+const useProgress = require('./use-progress.cjs');
+
+const ProgressRoot = react.forwardRef((props, ref) => {
+  const [progressProps, { children, ...localProps }] = createSplitProps.createSplitProps()(props, [
+    "defaultValue",
+    "dir",
+    "getRootNode",
+    "id",
+    "max",
+    "min",
+    "orientation",
+    "translations",
+    "value"
+  ]);
+  const api = useProgress.useProgress(progressProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
+  const view = runIfFn.runIfFn(children, api);
+  return /* @__PURE__ */ jsxRuntime.jsx(progressContext.ProgressProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
+});
+ProgressRoot.displayName = "ProgressRoot";
+
+exports.ProgressRoot = ProgressRoot;

package/progress/progress-root.d.ts

@@ -0,0 +1,9 @@
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
+import { type Assign } from '../types';
+import { type UseProgressProps, type UseProgressReturn } from './use-progress';
+export interface ProgressRootProps extends Assign<Assign<HTMLArkProps<'div'>, {
+    children?: ReactNode | ((api: UseProgressReturn) => ReactNode);
+}>, UseProgressProps> {
+}
+export declare const ProgressRoot: ForwardRefExoticComponent<ProgressRootProps & RefAttributes<HTMLDivElement>>;

package/progress/progress-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 { runIfFn } from '../run-if-fn.mjs';
+import { ProgressProvider } from './progress-context.mjs';
+import { useProgress } from './use-progress.mjs';
+
+const ProgressRoot = forwardRef((props, ref) => {
+  const [progressProps, { children, ...localProps }] = createSplitProps()(props, [
+    "defaultValue",
+    "dir",
+    "getRootNode",
+    "id",
+    "max",
+    "min",
+    "orientation",
+    "translations",
+    "value"
+  ]);
+  const api = useProgress(progressProps);
+  const mergedProps = mergeProps(api.rootProps, localProps);
+  const view = runIfFn(children, api);
+  return /* @__PURE__ */ jsx(ProgressProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
+});
+ProgressRoot.displayName = "ProgressRoot";
+
+export { ProgressRoot };

package/progress/progress-view.cjs

@@ -0,0 +1,20 @@
+'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 factory = require('../factory.cjs');
+const progressContext = require('./progress-context.cjs');
+
+const ProgressView = react.forwardRef((props, ref) => {
+  const { state, ...rest } = props;
+  const api = progressContext.useProgressContext();
+  const mergedProps = react$1.mergeProps(api.getViewProps({ state }), rest);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
+});
+ProgressView.displayName = "ProgressView";
+
+exports.ProgressView = ProgressView;

package/progress/progress-view.d.ts

@@ -0,0 +1,8 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import type { ViewProps } from '@zag-js/progress';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export interface ProgressViewProps extends Assign<HTMLArkProps<'span'>, ViewProps> {
+}
+export declare const ProgressView: ForwardRefExoticComponent<ProgressViewProps & RefAttributes<HTMLSpanElement>>;

package/progress/progress-view.mjs

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useProgressContext } from './progress-context.mjs';
+
+const ProgressView = forwardRef((props, ref) => {
+  const { state, ...rest } = props;
+  const api = useProgressContext();
+  const mergedProps = mergeProps(api.getViewProps({ state }), rest);
+  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
+});
+ProgressView.displayName = "ProgressView";
+
+export { ProgressView };

package/progress/progress.cjs

@@ -1,34 +1,25 @@
-'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 runIfFn = require('../run-if-fn.cjs');
-const progressContext = require('./progress-context.cjs');
-const useProgress = require('./use-progress.cjs');
+const progressCircle = require('./progress-circle.cjs');
+const progressCircleRange = require('./progress-circle-range.cjs');
+const progressCircleTrack = require('./progress-circle-track.cjs');
+const progressLabel = require('./progress-label.cjs');
+const progressRange = require('./progress-range.cjs');
+const progressRoot = require('./progress-root.cjs');
+const progressTrack = require('./progress-track.cjs');
+const progressValueText = require('./progress-value-text.cjs');
+const progressView = require('./progress-view.cjs');
 
-const Progress = react.forwardRef((props, ref) => {
-  const [progressProps, { children, ...localProps }] = createSplitProps.createSplitProps()(props, [
-    "defaultValue",
-    "dir",
-    "getRootNode",
-    "id",
-    "max",
-    "min",
-    "orientation",
-    "translations",
-    "value"
-  ]);
-  const api = useProgress.useProgress(progressProps);
-  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
-  const view = runIfFn.runIfFn(children, api);
-  return /* @__PURE__ */ jsxRuntime.jsx(progressContext.ProgressProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.nav, { ...mergedProps, ref, children: view }) });
-});
-Progress.displayName = "Progress";
 
-exports.Progress = Progress;
+
+exports.Circle = progressCircle.ProgressCircle;
+exports.CircleRange = progressCircleRange.ProgressCircleRange;
+exports.CircleTrack = progressCircleTrack.ProgressCircleTrack;
+exports.Label = progressLabel.ProgressLabel;
+exports.Range = progressRange.ProgressRange;
+exports.Root = progressRoot.ProgressRoot;
+exports.Track = progressTrack.ProgressTrack;
+exports.ValueText = progressValueText.ProgressValueText;
+exports.View = progressView.ProgressView;

package/progress/progress.d.ts

@@ -1,9 +1,10 @@
-import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
-import { type HTMLArkProps } from '../factory';
-import { type Assign } from '../types';
-import { type UseProgressProps, type UseProgressReturn } from './use-progress';
-export interface ProgressProps extends Assign<Assign<HTMLArkProps<'div'>, {
-    children?: ReactNode | ((api: UseProgressReturn) => ReactNode);
-}>, UseProgressProps> {
-}
-export declare const Progress: ForwardRefExoticComponent<ProgressProps & RefAttributes<HTMLDivElement>>;
+import { ProgressCircle as Circle } from './progress-circle';
+import { ProgressCircleRange as CircleRange } from './progress-circle-range';
+import { ProgressCircleTrack as CircleTrack } from './progress-circle-track';
+import { ProgressLabel as Label } from './progress-label';
+import { ProgressRange as Range } from './progress-range';
+import { ProgressRoot as Root } from './progress-root';
+import { ProgressTrack as Track } from './progress-track';
+import { ProgressValueText as ValueText } from './progress-value-text';
+import { ProgressView as View } from './progress-view';
+export { Circle, CircleRange, CircleTrack, Label, Range, Root, Track, ValueText, View };

package/progress/progress.mjs

@@ -1,30 +1,9 @@
-'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 { runIfFn } from '../run-if-fn.mjs';
-import { ProgressProvider } from './progress-context.mjs';
-import { useProgress } from './use-progress.mjs';
-
-const Progress = forwardRef((props, ref) => {
-  const [progressProps, { children, ...localProps }] = createSplitProps()(props, [
-    "defaultValue",
-    "dir",
-    "getRootNode",
-    "id",
-    "max",
-    "min",
-    "orientation",
-    "translations",
-    "value"
-  ]);
-  const api = useProgress(progressProps);
-  const mergedProps = mergeProps(api.rootProps, localProps);
-  const view = runIfFn(children, api);
-  return /* @__PURE__ */ jsx(ProgressProvider, { value: api, children: /* @__PURE__ */ jsx(ark.nav, { ...mergedProps, ref, children: view }) });
-});
-Progress.displayName = "Progress";
-
-export { Progress };
+export { ProgressCircle as Circle } from './progress-circle.mjs';
+export { ProgressCircleRange as CircleRange } from './progress-circle-range.mjs';
+export { ProgressCircleTrack as CircleTrack } from './progress-circle-track.mjs';
+export { ProgressLabel as Label } from './progress-label.mjs';
+export { ProgressRange as Range } from './progress-range.mjs';
+export { ProgressRoot as Root } from './progress-root.mjs';
+export { ProgressTrack as Track } from './progress-track.mjs';
+export { ProgressValueText as ValueText } from './progress-value-text.mjs';
+export { ProgressView as View } from './progress-view.mjs';

package/progress/use-progress.cjs

@@ -6,7 +6,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const progress = require('@zag-js/progress');
 const react$1 = require('@zag-js/react');
 const react = require('react');
-require('../environment/index.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {

package/progress/use-progress.mjs

@@ -2,7 +2,6 @@
 import * as progress from '@zag-js/progress';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
-import '../environment/index.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useProgress = (props) => {

package/radio-group/index.cjs

@@ -1,9 +1,7 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const radioGroup = require('./radio-group.cjs');
 const radioGroupContext = require('./radio-group-context.cjs');
 const radioGroupIndicator = require('./radio-group-indicator.cjs');
 const radioGroupItem = require('./radio-group-item.cjs');
@@ -11,20 +9,17 @@ const radioGroupItemContext = require('./radio-group-item-context.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 = require('./radio-group.cjs');
+
 
-const RadioGroup = Object.assign(radioGroup.RadioGroup, {
-  Root: radioGroup.RadioGroup,
-  Indicator: radioGroupIndicator.RadioGroupIndicator,
-  Item: radioGroupItem.RadioGroupItem,
-  ItemControl: radioGroupItemControl.RadioGroupItemControl,
-  ItemText: radioGroupItemText.RadioGroupItemText,
-  Label: radioGroupLabel.RadioGroupLabel
-});
 
 exports.useRadioGroupContext = radioGroupContext.useRadioGroupContext;
+exports.RadioGroupIndicator = radioGroupIndicator.RadioGroupIndicator;
 exports.RadioGroupItem = radioGroupItem.RadioGroupItem;
 exports.useRadioGroupItemContext = radioGroupItemContext.useRadioGroupItemContext;
 exports.RadioGroupItemControl = radioGroupItemControl.RadioGroupItemControl;
 exports.RadioGroupItemText = radioGroupItemText.RadioGroupItemText;
 exports.RadioGroupLabel = radioGroupLabel.RadioGroupLabel;
-exports.RadioGroup = RadioGroup;
+exports.RadioGroupRoot = radioGroupRoot.RadioGroupRoot;
+exports.RadioGroup = radioGroup;

package/radio-group/index.d.ts

@@ -1,21 +1,12 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="react" />
 import type { ValueChangeDetails as RadioGroupValueChangeDetails } from '@zag-js/radio-group';
-import { type RadioGroupProps } from './radio-group';
 import { useRadioGroupContext, type RadioGroupContext } from './radio-group-context';
-import { type RadioGroupIndicatorProps } from './radio-group-indicator';
+import { RadioGroupIndicator, type RadioGroupIndicatorProps } from './radio-group-indicator';
 import { RadioGroupItem, type RadioGroupItemProps } from './radio-group-item';
 import { useRadioGroupItemContext, type RadioGroupItemContext } from './radio-group-item-context';
 import { RadioGroupItemControl, type RadioGroupItemControlProps } from './radio-group-item-control';
 import { RadioGroupItemText, type RadioGroupItemTextProps } from './radio-group-item-text';
 import { RadioGroupLabel, type RadioGroupLabelProps } from './radio-group-label';
-declare const RadioGroup: ForwardRefExoticComponent<RadioGroupProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<RadioGroupProps & RefAttributes<HTMLDivElement>>;
-    Indicator: ForwardRefExoticComponent<RadioGroupIndicatorProps & RefAttributes<HTMLDivElement>>;
-    Item: ForwardRefExoticComponent<RadioGroupItemProps & RefAttributes<HTMLLabelElement>>;
-    ItemControl: ForwardRefExoticComponent<RadioGroupItemControlProps & RefAttributes<HTMLDivElement>>;
-    ItemText: ForwardRefExoticComponent<RadioGroupItemTextProps & RefAttributes<HTMLSpanElement>>;
-    Label: ForwardRefExoticComponent<RadioGroupLabelProps & RefAttributes<HTMLLabelElement>>;
-};
-export { RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel, useRadioGroupContext, useRadioGroupItemContext, };
-export type { RadioGroupContext, RadioGroupIndicatorProps, RadioGroupItemContext, RadioGroupItemControlProps, RadioGroupItemProps, RadioGroupItemTextProps, RadioGroupLabelProps, RadioGroupProps, RadioGroupValueChangeDetails, };
+import { RadioGroupRoot, type RadioGroupRootProps } from './radio-group-root';
+export * as RadioGroup from './radio-group';
+export { RadioGroupIndicator, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel, RadioGroupRoot, useRadioGroupContext, useRadioGroupItemContext, };
+export type { RadioGroupContext, RadioGroupIndicatorProps, RadioGroupItemContext, RadioGroupItemControlProps, RadioGroupItemProps, RadioGroupItemTextProps, RadioGroupLabelProps, RadioGroupRootProps, RadioGroupValueChangeDetails, };

package/radio-group/index.mjs

@@ -1,20 +1,10 @@
-'use client';
-import { RadioGroup as RadioGroup$1 } from './radio-group.mjs';
 export { useRadioGroupContext } from './radio-group-context.mjs';
-import { RadioGroupIndicator } from './radio-group-indicator.mjs';
-import { RadioGroupItem } from './radio-group-item.mjs';
+export { RadioGroupIndicator } from './radio-group-indicator.mjs';
+export { RadioGroupItem } from './radio-group-item.mjs';
 export { useRadioGroupItemContext } from './radio-group-item-context.mjs';
-import { RadioGroupItemControl } from './radio-group-item-control.mjs';
-import { RadioGroupItemText } from './radio-group-item-text.mjs';
-import { RadioGroupLabel } from './radio-group-label.mjs';
-
-const RadioGroup = Object.assign(RadioGroup$1, {
-  Root: RadioGroup$1,
-  Indicator: RadioGroupIndicator,
-  Item: RadioGroupItem,
-  ItemControl: RadioGroupItemControl,
-  ItemText: RadioGroupItemText,
-  Label: RadioGroupLabel
-});
-
-export { RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel };
+export { RadioGroupItemControl } from './radio-group-item-control.mjs';
+export { RadioGroupItemText } from './radio-group-item-text.mjs';
+export { RadioGroupLabel } from './radio-group-label.mjs';
+export { RadioGroupRoot } from './radio-group-root.mjs';
+import * as radioGroup from './radio-group.mjs';
+export { radioGroup as RadioGroup };

package/radio-group/radio-group-root.cjs

@@ -0,0 +1,34 @@
+'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 RadioGroupRoot = 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 }) });
+});
+RadioGroupRoot.displayName = "RadioGroupRoot";
+
+exports.RadioGroupRoot = RadioGroupRoot;

package/radio-group/radio-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 UseRadioGroupProps } from './use-radio-group';
+export interface RadioGroupRootProps extends Assign<HTMLArkProps<'div'>, UseRadioGroupProps> {
+}
+export declare const RadioGroupRoot: ForwardRefExoticComponent<RadioGroupRootProps & RefAttributes<HTMLDivElement>>;