@ark-ui/react 0.15.0 → 1.0.0-beta.0

package/radio-group/index.cjs

@@ -3,31 +3,28 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const radio = require('./radio.cjs');
-const radioContext = require('./radio-context.cjs');
-const radioControl = require('./radio-control.cjs');
 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');
+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 radioLabel = require('./radio-label.cjs');
-const radio$1 = require('@zag-js/radio-group');
 
 const RadioGroup = Object.assign(radioGroup.RadioGroup, {
   Root: radioGroup.RadioGroup,
-  Label: radioGroupLabel.RadioGroupLabel,
-  Radio: radio.Radio,
-  RadioLabel: radioLabel.RadioLabel,
-  RadioControl: radioControl.RadioControl
+  Indicator: radioGroupIndicator.RadioGroupIndicator,
+  Item: radioGroupItem.RadioGroupItem,
+  ItemControl: radioGroupItemControl.RadioGroupItemControl,
+  ItemText: radioGroupItemText.RadioGroupItemText,
+  Label: radioGroupLabel.RadioGroupLabel
 });
 
-exports.Radio = radio.Radio;
-exports.useRadioContext = radioContext.useRadioContext;
-exports.RadioControl = radioControl.RadioControl;
 exports.useRadioGroupContext = radioGroupContext.useRadioGroupContext;
+exports.RadioGroupItem = radioGroupItem.RadioGroupItem;
+exports.useRadioGroupItemContext = radioGroupItemContext.useRadioGroupItemContext;
+exports.RadioGroupItemControl = radioGroupItemControl.RadioGroupItemControl;
+exports.RadioGroupItemText = radioGroupItemText.RadioGroupItemText;
 exports.RadioGroupLabel = radioGroupLabel.RadioGroupLabel;
-exports.RadioLabel = radioLabel.RadioLabel;
-Object.defineProperty(exports, 'radioGroupAnatomy', {
-  enumerable: true,
-  get: () => radio$1.anatomy
-});
 exports.RadioGroup = RadioGroup;

package/radio-group/index.d.ts

@@ -1,28 +1,20 @@
-import { RadioProps } from '@zag-js/radio-group';
-import { UseRadioGroupProps } from './use-radio-group';
-import { HTMLArkProps } from '..';
-import { ForwardRefExoticComponent, RefAttributes, DetailedHTMLProps, LabelHTMLAttributes, HTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
-import { Radio, type RadioProps } from './radio';
-import { useRadioContext, type RadioContext } from './radio-context';
-import { RadioControl, type RadioControlProps } from './radio-control';
 import { type RadioGroupProps } from './radio-group';
 import { useRadioGroupContext, type RadioGroupContext } from './radio-group-context';
+import { 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';
-import { radioGroupAnatomy } from './radio-group.anatomy';
-import { RadioLabel, type RadioLabelProps } from './radio-label';
-declare const RadioGroup: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseRadioGroupProps> & UseRadioGroupProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseRadioGroupProps> & UseRadioGroupProps & RefAttributes<HTMLDivElement>>;
-    Label: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLLabelElement>>;
-    Radio: ForwardRefExoticComponent<Omit<HTMLArkProps<"label">, keyof RadioProps> & RadioProps & RefAttributes<HTMLLabelElement>>;
-    RadioLabel: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLSpanElement>>;
-    RadioControl: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
+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 { Radio, RadioControl, RadioGroup, RadioGroupLabel, RadioLabel, radioGroupAnatomy, useRadioContext, useRadioGroupContext, };
-export type { RadioContext, RadioControlProps, RadioGroupContext, RadioGroupLabelProps, RadioGroupProps, RadioLabelProps, RadioProps, };
+export { RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel, useRadioGroupContext, useRadioGroupItemContext, };
+export type { RadioGroupContext, RadioGroupIndicatorProps, RadioGroupItemContext, RadioGroupItemControlProps, RadioGroupItemProps, RadioGroupItemTextProps, RadioGroupLabelProps, RadioGroupProps, };

package/radio-group/index.mjs

@@ -1,19 +1,20 @@
 'use client';
-import { Radio } from './radio.mjs';
-export { useRadioContext } from './radio-context.mjs';
-import { RadioControl } from './radio-control.mjs';
 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 { 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';
-import { RadioLabel } from './radio-label.mjs';
-export { anatomy as radioGroupAnatomy } from '@zag-js/radio-group';
 
 const RadioGroup = Object.assign(RadioGroup$1, {
   Root: RadioGroup$1,
-  Label: RadioGroupLabel,
-  Radio,
-  RadioLabel,
-  RadioControl
+  Indicator: RadioGroupIndicator,
+  Item: RadioGroupItem,
+  ItemControl: RadioGroupItemControl,
+  ItemText: RadioGroupItemText,
+  Label: RadioGroupLabel
 });
 
-export { Radio, RadioControl, RadioGroup, RadioGroupLabel, RadioLabel };
+export { RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel };

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

@@ -1,5 +1,6 @@
 import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseRadioGroupReturn } from './use-radio-group';
-export type RadioGroupContext = UseRadioGroupReturn;
-export declare const RadioGroupProvider: Provider<UseRadioGroupReturn>, useRadioGroupContext: () => UseRadioGroupReturn;
+export interface RadioGroupContext extends UseRadioGroupReturn {
+}
+export declare const RadioGroupProvider: Provider<RadioGroupContext>, useRadioGroupContext: () => RadioGroupContext;

package/radio-group/radio-group-indicator.cjs

@@ -0,0 +1,22 @@
+'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 factory = require('../factory.cjs');
+const radioGroupContext = require('./radio-group-context.cjs');
+
+const RadioGroupIndicator = react.forwardRef(
+  (props, ref) => {
+    const api = radioGroupContext.useRadioGroupContext();
+    const mergedProps = react$1.mergeProps(api.indicatorProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ...anatomy.radioGroupAnatomy.build().indicator.attrs, ref });
+  }
+);
+RadioGroupIndicator.displayName = "RadioGroupIndicator";
+
+exports.RadioGroupIndicator = RadioGroupIndicator;

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

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface RadioGroupIndicatorProps extends HTMLArkProps<'div'> {
+}
+export declare const RadioGroupIndicator: ForwardRefExoticComponent<RadioGroupIndicatorProps & RefAttributes<HTMLDivElement>>;

package/radio-group/radio-group-indicator.mjs

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { radioGroupAnatomy } from '@ark-ui/anatomy';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useRadioGroupContext } from './radio-group-context.mjs';
+
+const RadioGroupIndicator = forwardRef(
+  (props, ref) => {
+    const api = useRadioGroupContext();
+    const mergedProps = mergeProps(api.indicatorProps, props);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ...radioGroupAnatomy.build().indicator.attrs, ref });
+  }
+);
+RadioGroupIndicator.displayName = "RadioGroupIndicator";
+
+export { RadioGroupIndicator };

package/radio-group/radio-group-item-context.cjs

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../create-context.cjs');
+
+const [RadioGroupItemProvider, useRadioGroupItemContext] = createContext.createContext({
+  name: "RadioGroupItemContext",
+  hookName: "useRadioGroupItemContext",
+  providerName: "<RadioGroupItemProvider />"
+});
+
+exports.RadioGroupItemProvider = RadioGroupItemProvider;
+exports.useRadioGroupItemContext = useRadioGroupItemContext;

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

@@ -0,0 +1,6 @@
+import { Provider } from 'react';
+/// <reference types="react" />
+import type { ItemProps } from '@zag-js/radio-group';
+export interface RadioGroupItemContext extends ItemProps {
+}
+export declare const RadioGroupItemProvider: Provider<RadioGroupItemContext>, useRadioGroupItemContext: () => RadioGroupItemContext;

package/radio-group/radio-group-item-context.mjs

@@ -0,0 +1,10 @@
+'use client';
+import { createContext } from '../create-context.mjs';
+
+const [RadioGroupItemProvider, useRadioGroupItemContext] = createContext({
+  name: "RadioGroupItemContext",
+  hookName: "useRadioGroupItemContext",
+  providerName: "<RadioGroupItemProvider />"
+});
+
+export { RadioGroupItemProvider, useRadioGroupItemContext };

package/radio-group/radio-group-item-control.cjs

@@ -0,0 +1,26 @@
+'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 radioGroupContext = require('./radio-group-context.cjs');
+const radioGroupItemContext = require('./radio-group-item-context.cjs');
+
+const RadioGroupItemControl = react.forwardRef(
+  (props, ref) => {
+    const api = radioGroupContext.useRadioGroupContext();
+    const itemProps = radioGroupItemContext.useRadioGroupItemContext();
+    const mergedProps = react$1.mergeProps(api.getItemControlProps(itemProps), props);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }),
+      /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.getItemHiddenInputProps(itemProps) })
+    ] });
+  }
+);
+RadioGroupItemControl.displayName = "RadioGroupItemControl";
+
+exports.RadioGroupItemControl = RadioGroupItemControl;

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

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface RadioGroupItemControlProps extends HTMLArkProps<'div'> {
+}
+export declare const RadioGroupItemControl: ForwardRefExoticComponent<RadioGroupItemControlProps & RefAttributes<HTMLDivElement>>;

package/radio-group/radio-group-item-control.mjs

@@ -0,0 +1,22 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useRadioGroupContext } from './radio-group-context.mjs';
+import { useRadioGroupItemContext } from './radio-group-item-context.mjs';
+
+const RadioGroupItemControl = forwardRef(
+  (props, ref) => {
+    const api = useRadioGroupContext();
+    const itemProps = useRadioGroupItemContext();
+    const mergedProps = mergeProps(api.getItemControlProps(itemProps), props);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }),
+      /* @__PURE__ */ jsx("input", { ...api.getItemHiddenInputProps(itemProps) })
+    ] });
+  }
+);
+RadioGroupItemControl.displayName = "RadioGroupItemControl";
+
+export { RadioGroupItemControl };

package/radio-group/radio-group-item-text.cjs

@@ -0,0 +1,23 @@
+'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 radioGroupContext = require('./radio-group-context.cjs');
+const radioGroupItemContext = require('./radio-group-item-context.cjs');
+
+const RadioGroupItemText = react.forwardRef(
+  (props, ref) => {
+    const api = radioGroupContext.useRadioGroupContext();
+    const itemProps = radioGroupItemContext.useRadioGroupItemContext();
+    const mergedProps = react$1.mergeProps(api.getItemTextProps(itemProps), props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
+  }
+);
+RadioGroupItemText.displayName = "RadioGroupItemText";
+
+exports.RadioGroupItemText = RadioGroupItemText;

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

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface RadioGroupItemTextProps extends HTMLArkProps<'span'> {
+}
+export declare const RadioGroupItemText: ForwardRefExoticComponent<RadioGroupItemTextProps & RefAttributes<HTMLSpanElement>>;

package/radio-group/radio-group-item-text.mjs

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useRadioGroupContext } from './radio-group-context.mjs';
+import { useRadioGroupItemContext } from './radio-group-item-context.mjs';
+
+const RadioGroupItemText = forwardRef(
+  (props, ref) => {
+    const api = useRadioGroupContext();
+    const itemProps = useRadioGroupItemContext();
+    const mergedProps = mergeProps(api.getItemTextProps(itemProps), props);
+    return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
+  }
+);
+RadioGroupItemText.displayName = "RadioGroupItemText";
+
+export { RadioGroupItemText };

package/radio-group/radio-group-item.cjs

@@ -0,0 +1,29 @@
+'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 radioGroupContext = require('./radio-group-context.cjs');
+const radioGroupItemContext = require('./radio-group-item-context.cjs');
+
+const RadioGroupItem = react.forwardRef((props, ref) => {
+  const [itemProps, { children, ...localProps }] = createSplitProps.createSplitProps()(props, [
+    "value",
+    "disabled",
+    "invalid"
+  ]);
+  const api = radioGroupContext.useRadioGroupContext();
+  const mergedProps = react$1.mergeProps(api.getItemProps(itemProps), localProps);
+  const itemState = api.getItemState(itemProps);
+  const view = runIfFn.runIfFn(children, itemState);
+  return /* @__PURE__ */ jsxRuntime.jsx(radioGroupItemContext.RadioGroupItemProvider, { value: itemProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref, children: view }) });
+});
+RadioGroupItem.displayName = "RadioGroupItem";
+
+exports.RadioGroupItem = RadioGroupItem;

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

@@ -0,0 +1,10 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import type { ItemProps, ItemState } from '@zag-js/radio-group';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export interface RadioGroupItemProps extends Assign<HTMLArkProps<'label'>, {
+    children?: React.ReactNode | ((props: ItemState) => React.ReactNode);
+}>, ItemProps {
+}
+export declare const RadioGroupItem: ForwardRefExoticComponent<RadioGroupItemProps & RefAttributes<HTMLLabelElement>>;

package/radio-group/radio-group-item.mjs

@@ -0,0 +1,25 @@
+'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 { useRadioGroupContext } from './radio-group-context.mjs';
+import { RadioGroupItemProvider } from './radio-group-item-context.mjs';
+
+const RadioGroupItem = forwardRef((props, ref) => {
+  const [itemProps, { children, ...localProps }] = createSplitProps()(props, [
+    "value",
+    "disabled",
+    "invalid"
+  ]);
+  const api = useRadioGroupContext();
+  const mergedProps = mergeProps(api.getItemProps(itemProps), localProps);
+  const itemState = api.getItemState(itemProps);
+  const view = runIfFn(children, itemState);
+  return /* @__PURE__ */ jsx(RadioGroupItemProvider, { value: itemProps, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref, children: view }) });
+});
+RadioGroupItem.displayName = "RadioGroupItem";
+
+export { RadioGroupItem };

package/radio-group/radio-group-label.cjs

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const radioGroupContext = require('./radio-group-context.cjs');
 
 const RadioGroupLabel = react.forwardRef((props, ref) => {
-  const { labelProps } = radioGroupContext.useRadioGroupContext();
-  const mergedProps = react$1.mergeProps(labelProps, props);
+  const api = radioGroupContext.useRadioGroupContext();
+  const mergedProps = react$1.mergeProps(api.labelProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
 });
 RadioGroupLabel.displayName = "RadioGroupLabel";

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

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type RadioGroupLabelProps = HTMLArkProps<'label'>;
-export declare const RadioGroupLabel: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLLabelElement>>;
+export interface RadioGroupLabelProps extends HTMLArkProps<'label'> {
+}
+export declare const RadioGroupLabel: ForwardRefExoticComponent<RadioGroupLabelProps & RefAttributes<HTMLLabelElement>>;

package/radio-group/radio-group-label.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { useRadioGroupContext } from './radio-group-context.mjs';
 
 const RadioGroupLabel = forwardRef((props, ref) => {
-  const { labelProps } = useRadioGroupContext();
-  const mergedProps = mergeProps(labelProps, props);
+  const api = useRadioGroupContext();
+  const mergedProps = mergeProps(api.labelProps, props);
   return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
 });
 RadioGroupLabel.displayName = "RadioGroupLabel";

package/radio-group/radio-group.cjs

@@ -21,13 +21,13 @@ const RadioGroup = react.forwardRef((props, ref) => {
     "id",
     "ids",
     "name",
-    "onChange",
+    "onValueChange",
     "orientation",
     "value"
   ]);
-  const radioGroup = useRadioGroup.useRadioGroup(useRadioGroupProps);
-  const mergedProps = react$1.mergeProps(radioGroup.rootProps, divProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(radioGroupContext.RadioGroupProvider, { value: radioGroup, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+  const api = useRadioGroup.useRadioGroup(useRadioGroupProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, divProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(radioGroupContext.RadioGroupProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });
 RadioGroup.displayName = "RadioGroup";
 

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

@@ -3,5 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 import { type UseRadioGroupProps } from './use-radio-group';
-export type RadioGroupProps = Assign<HTMLArkProps<'div'>, UseRadioGroupProps>;
-export declare const RadioGroup: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseRadioGroupProps> & UseRadioGroupProps & RefAttributes<HTMLDivElement>>;
+export interface RadioGroupProps extends Assign<HTMLArkProps<'div'>, UseRadioGroupProps> {
+}
+export declare const RadioGroup: ForwardRefExoticComponent<RadioGroupProps & RefAttributes<HTMLDivElement>>;

package/radio-group/radio-group.mjs

@@ -17,13 +17,13 @@ const RadioGroup = forwardRef((props, ref) => {
     "id",
     "ids",
     "name",
-    "onChange",
+    "onValueChange",
     "orientation",
     "value"
   ]);
-  const radioGroup = useRadioGroup(useRadioGroupProps);
-  const mergedProps = mergeProps(radioGroup.rootProps, divProps);
-  return /* @__PURE__ */ jsx(RadioGroupProvider, { value: radioGroup, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+  const api = useRadioGroup(useRadioGroupProps);
+  const mergedProps = mergeProps(api.rootProps, divProps);
+  return /* @__PURE__ */ jsx(RadioGroupProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });
 RadioGroup.displayName = "RadioGroup";
 

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

@@ -5,4 +5,3 @@ type RadioGroupType = typeof RadioGroup;
 declare const meta: Meta<RadioGroupType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
-export declare const Disabled: () => JSX.Element;

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

@@ -7,6 +7,7 @@ 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');
 
 function _interopNamespaceDefault(e) {
@@ -29,16 +30,16 @@ function _interopNamespaceDefault(e) {
 const radio__namespace = /*#__PURE__*/_interopNamespaceDefault(radio);
 
 const useRadioGroup = (props) => {
-  const getRootNode = environmentContext.useEnvironmentContext();
   const initialContext = {
     id: react.useId(),
-    getRootNode,
+    getRootNode: environmentContext.useEnvironmentContext(),
     ...props,
     value: props.defaultValue
   };
   const context = {
     ...initialContext,
-    value: props.value
+    value: props.value,
+    onValueChange: useEvent.useEvent(props.onValueChange, { sync: true })
   };
   const [state, send] = react$1.useMachine(radio__namespace.machine(initialContext), {
     context

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

@@ -1,7 +1,12 @@
 import * as radio from '@zag-js/radio-group';
+import { type PropTypes } from '@zag-js/react';
 import { type Optional } from '../types';
 export interface UseRadioGroupProps extends Optional<radio.Context, 'id'> {
+    /**
+     * The initial value of the radio group.
+     */
     defaultValue?: radio.Context['value'];
 }
-export type UseRadioGroupReturn = radio.Api;
+export interface UseRadioGroupReturn extends radio.Api<PropTypes> {
+}
 export declare const useRadioGroup: (props: UseRadioGroupProps) => UseRadioGroupReturn;

package/radio-group/use-radio-group.mjs

@@ -3,19 +3,20 @@ 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';
 
 const useRadioGroup = (props) => {
-  const getRootNode = useEnvironmentContext();
   const initialContext = {
     id: useId(),
-    getRootNode,
+    getRootNode: useEnvironmentContext(),
     ...props,
     value: props.defaultValue
   };
   const context = {
     ...initialContext,
-    value: props.value
+    value: props.value,
+    onValueChange: useEvent(props.onValueChange, { sync: true })
   };
   const [state, send] = useMachine(radio.machine(initialContext), {
     context

package/rating-group/index.cjs

@@ -3,28 +3,23 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const rating = require('./rating.cjs');
-const ratingContext = require('./rating-context.cjs');
-const ratingGroup$1 = require('./rating-group.cjs');
+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 ratingGroup = require('@zag-js/rating-group');
 
-const RatingGroup = Object.assign(ratingGroup$1.RatingGroup, {
-  Root: ratingGroup$1.RatingGroup,
+const RatingGroup = Object.assign(ratingGroup.RatingGroup, {
+  Root: ratingGroup.RatingGroup,
   Control: ratingGroupControl.RatingGroupControl,
   Label: ratingGroupLabel.RatingGroupLabel,
-  Rating: rating.Rating
+  Item: ratingGroupItem.RatingGroupItem
 });
 
-exports.Rating = rating.Rating;
-exports.useRatingContext = ratingContext.useRatingContext;
 exports.useRatingGroupContext = ratingGroupContext.useRatingGroupContext;
 exports.RatingGroupControl = ratingGroupControl.RatingGroupControl;
+exports.RatingGroupItem = ratingGroupItem.RatingGroupItem;
+exports.useRatingGroupItemContext = ratingGroupItemContext.useRatingGroupItemContext;
 exports.RatingGroupLabel = ratingGroupLabel.RatingGroupLabel;
-Object.defineProperty(exports, 'ratingGroupAnatomy', {
-  enumerable: true,
-  get: () => ratingGroup.anatomy
-});
 exports.RatingGroup = RatingGroup;