@ark-ui/react 4.9.1 → 5.0.0

package/dist/components/radio-group/radio-group.d.cts

@@ -1,5 +1,5 @@
 export type { ValueChangeDetails } from '@zag-js/radio-group';
-export { RadioGroupContext as Context, type RadioGroupContext as ContextProps, } from './radio-group-context';
+export { RadioGroupContext as Context, type RadioGroupContext as ContextProps } from './radio-group-context';
 export { RadioGroupIndicator as Indicator, type RadioGroupIndicatorBaseProps as IndicatorBaseProps, type RadioGroupIndicatorProps as IndicatorProps, } from './radio-group-indicator';
 export { RadioGroupItem as Item, type RadioGroupItemBaseProps as ItemBaseProps, type RadioGroupItemProps as ItemProps, } from './radio-group-item';
 export { RadioGroupItemContext as ItemContext, type RadioGroupItemContext as ItemContextProps, } from './radio-group-item-context';

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

@@ -1,5 +1,5 @@
 export type { ValueChangeDetails } from '@zag-js/radio-group';
-export { RadioGroupContext as Context, type RadioGroupContext as ContextProps, } from './radio-group-context';
+export { RadioGroupContext as Context, type RadioGroupContext as ContextProps } from './radio-group-context';
 export { RadioGroupIndicator as Indicator, type RadioGroupIndicatorBaseProps as IndicatorBaseProps, type RadioGroupIndicatorProps as IndicatorProps, } from './radio-group-indicator';
 export { RadioGroupItem as Item, type RadioGroupItemBaseProps as ItemBaseProps, type RadioGroupItemProps as ItemProps, } from './radio-group-item';
 export { RadioGroupItemContext as ItemContext, type RadioGroupItemContext as ItemContextProps, } from './radio-group-item-context';

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

@@ -8,7 +8,6 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
 const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
-const useEvent = require('../../utils/use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -30,24 +29,17 @@ function _interopNamespaceDefault(e) {
 const radio__namespace = /*#__PURE__*/_interopNamespaceDefault(radio);
 
 const useRadioGroup = (props = {}) => {
+  const id = react.useId();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
-  const initialContext = {
-    id: react.useId(),
+  const machineProps = {
+    id,
     dir,
     getRootNode,
-    value: props.defaultValue,
     ...props
   };
-  const context = {
-    ...initialContext,
-    value: props.value,
-    onValueChange: useEvent.useEvent(props.onValueChange, { sync: true })
-  };
-  const [state, send] = react$1.useMachine(radio__namespace.machine(initialContext), {
-    context
-  });
-  return radio__namespace.connect(state, send, react$1.normalizeProps);
+  const service = react$1.useMachine(radio__namespace.machine, machineProps);
+  return radio__namespace.connect(service, react$1.normalizeProps);
 };
 
 exports.useRadioGroup = useRadioGroup;

package/dist/components/radio-group/use-radio-group.d.cts

@@ -1,12 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as radio from '@zag-js/radio-group';
-export interface UseRadioGroupProps extends Optional<Omit<radio.Context, 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The initial value of the radio group when it is first rendered.
-     * Use when you do not need to control the state of the radio group.
-     */
-    defaultValue?: radio.Context['value'];
+export interface UseRadioGroupProps extends Optional<Omit<radio.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseRadioGroupReturn extends radio.Api<PropTypes> {
 }

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

@@ -1,12 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as radio from '@zag-js/radio-group';
-export interface UseRadioGroupProps extends Optional<Omit<radio.Context, 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The initial value of the radio group when it is first rendered.
-     * Use when you do not need to control the state of the radio group.
-     */
-    defaultValue?: radio.Context['value'];
+export interface UseRadioGroupProps extends Optional<Omit<radio.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseRadioGroupReturn extends radio.Api<PropTypes> {
 }

package/dist/components/radio-group/use-radio-group.js

@@ -4,27 +4,19 @@ import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
-import { useEvent } from '../../utils/use-event.js';
 
 const useRadioGroup = (props = {}) => {
+  const id = useId();
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
-  const initialContext = {
-    id: useId(),
+  const machineProps = {
+    id,
     dir,
     getRootNode,
-    value: props.defaultValue,
     ...props
   };
-  const context = {
-    ...initialContext,
-    value: props.value,
-    onValueChange: useEvent(props.onValueChange, { sync: true })
-  };
-  const [state, send] = useMachine(radio.machine(initialContext), {
-    context
-  });
-  return radio.connect(state, send, normalizeProps);
+  const service = useMachine(radio.machine, machineProps);
+  return radio.connect(service, normalizeProps);
 };
 
 export { useRadioGroup };

package/dist/components/rating-group/index.d.cts

@@ -2,13 +2,13 @@ export type { HoverChangeDetails as RatingGroupHoverChangeDetails, ValueChangeDe
 export { RatingGroupContext, type RatingGroupContextProps } from './rating-group-context';
 export { RatingGroupControl, type RatingGroupControlBaseProps, type RatingGroupControlProps, } from './rating-group-control';
 export { RatingGroupHiddenInput, type RatingGroupHiddenInputBaseProps, type RatingGroupHiddenInputProps, } from './rating-group-hidden-input';
-export { RatingGroupItem, type RatingGroupItemBaseProps, type RatingGroupItemProps, } from './rating-group-item';
-export { RatingGroupItemContext, type RatingGroupItemContextProps, } from './rating-group-item-context';
-export { RatingGroupLabel, type RatingGroupLabelBaseProps, type RatingGroupLabelProps, } from './rating-group-label';
-export { RatingGroupRoot, type RatingGroupRootBaseProps, type RatingGroupRootProps, } from './rating-group-root';
+export { RatingGroupItem, type RatingGroupItemBaseProps, type RatingGroupItemProps } from './rating-group-item';
+export { RatingGroupItemContext, type RatingGroupItemContextProps } from './rating-group-item-context';
+export { RatingGroupLabel, type RatingGroupLabelBaseProps, type RatingGroupLabelProps } from './rating-group-label';
+export { RatingGroupRoot, type RatingGroupRootBaseProps, type RatingGroupRootProps } from './rating-group-root';
 export { RatingGroupRootProvider, type RatingGroupRootProviderBaseProps, type RatingGroupRootProviderProps, } from './rating-group-root-provider';
 export { ratingGroupAnatomy } from './rating-group.anatomy';
-export { useRatingGroup, type UseRatingGroupProps, type UseRatingGroupReturn, } from './use-rating-group';
+export { useRatingGroup, type UseRatingGroupProps, type UseRatingGroupReturn } from './use-rating-group';
 export { useRatingGroupContext, type UseRatingGroupContext } from './use-rating-group-context';
-export { useRatingGroupItemContext, type UseRatingGroupItemContext, } from './use-rating-group-item-context';
+export { useRatingGroupItemContext, type UseRatingGroupItemContext } from './use-rating-group-item-context';
 export * as RatingGroup from './rating-group';

package/dist/components/rating-group/index.d.ts

@@ -2,13 +2,13 @@ export type { HoverChangeDetails as RatingGroupHoverChangeDetails, ValueChangeDe
 export { RatingGroupContext, type RatingGroupContextProps } from './rating-group-context';
 export { RatingGroupControl, type RatingGroupControlBaseProps, type RatingGroupControlProps, } from './rating-group-control';
 export { RatingGroupHiddenInput, type RatingGroupHiddenInputBaseProps, type RatingGroupHiddenInputProps, } from './rating-group-hidden-input';
-export { RatingGroupItem, type RatingGroupItemBaseProps, type RatingGroupItemProps, } from './rating-group-item';
-export { RatingGroupItemContext, type RatingGroupItemContextProps, } from './rating-group-item-context';
-export { RatingGroupLabel, type RatingGroupLabelBaseProps, type RatingGroupLabelProps, } from './rating-group-label';
-export { RatingGroupRoot, type RatingGroupRootBaseProps, type RatingGroupRootProps, } from './rating-group-root';
+export { RatingGroupItem, type RatingGroupItemBaseProps, type RatingGroupItemProps } from './rating-group-item';
+export { RatingGroupItemContext, type RatingGroupItemContextProps } from './rating-group-item-context';
+export { RatingGroupLabel, type RatingGroupLabelBaseProps, type RatingGroupLabelProps } from './rating-group-label';
+export { RatingGroupRoot, type RatingGroupRootBaseProps, type RatingGroupRootProps } from './rating-group-root';
 export { RatingGroupRootProvider, type RatingGroupRootProviderBaseProps, type RatingGroupRootProviderProps, } from './rating-group-root-provider';
 export { ratingGroupAnatomy } from './rating-group.anatomy';
-export { useRatingGroup, type UseRatingGroupProps, type UseRatingGroupReturn, } from './use-rating-group';
+export { useRatingGroup, type UseRatingGroupProps, type UseRatingGroupReturn } from './use-rating-group';
 export { useRatingGroupContext, type UseRatingGroupContext } from './use-rating-group-context';
-export { useRatingGroupItemContext, type UseRatingGroupItemContext, } from './use-rating-group-item-context';
+export { useRatingGroupItemContext, type UseRatingGroupItemContext } from './use-rating-group-item-context';
 export * as RatingGroup from './rating-group';

package/dist/components/rating-group/rating-group-control.cjs

@@ -9,13 +9,11 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const useRatingGroupContext = require('./use-rating-group-context.cjs');
 
-const RatingGroupControl = react.forwardRef(
-  (props, ref) => {
-    const ratingGroup = useRatingGroupContext.useRatingGroupContext();
-    const mergedProps = react$1.mergeProps(ratingGroup.getControlProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
+const RatingGroupControl = react.forwardRef((props, ref) => {
+  const ratingGroup = useRatingGroupContext.useRatingGroupContext();
+  const mergedProps = react$1.mergeProps(ratingGroup.getControlProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
 RatingGroupControl.displayName = "RatingGroupControl";
 
 exports.RatingGroupControl = RatingGroupControl;

package/dist/components/rating-group/rating-group-control.js

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useRatingGroupContext } from './use-rating-group-context.js';
 
-const RatingGroupControl = forwardRef(
-  (props, ref) => {
-    const ratingGroup = useRatingGroupContext();
-    const mergedProps = mergeProps(ratingGroup.getControlProps(), props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
+const RatingGroupControl = forwardRef((props, ref) => {
+  const ratingGroup = useRatingGroupContext();
+  const mergedProps = mergeProps(ratingGroup.getControlProps(), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 RatingGroupControl.displayName = "RatingGroupControl";
 
 export { RatingGroupControl };

package/dist/components/rating-group/rating-group-hidden-input.cjs

@@ -10,14 +10,12 @@ const factory = require('../factory.cjs');
 const useFieldContext = require('../field/use-field-context.cjs');
 const useRatingGroupContext = require('./use-rating-group-context.cjs');
 
-const RatingGroupHiddenInput = react.forwardRef(
-  (props, ref) => {
-    const ratingGroup = useRatingGroupContext.useRatingGroupContext();
-    const mergedProps = react$1.mergeProps(ratingGroup.getHiddenInputProps(), props);
-    const field = useFieldContext.useFieldContext();
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
-  }
-);
+const RatingGroupHiddenInput = react.forwardRef((props, ref) => {
+  const ratingGroup = useRatingGroupContext.useRatingGroupContext();
+  const mergedProps = react$1.mergeProps(ratingGroup.getHiddenInputProps(), props);
+  const field = useFieldContext.useFieldContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
+});
 RatingGroupHiddenInput.displayName = "RatingGroupHiddenInput";
 
 exports.RatingGroupHiddenInput = RatingGroupHiddenInput;

package/dist/components/rating-group/rating-group-hidden-input.js

@@ -6,14 +6,12 @@ import { ark } from '../factory.js';
 import { useFieldContext } from '../field/use-field-context.js';
 import { useRatingGroupContext } from './use-rating-group-context.js';
 
-const RatingGroupHiddenInput = forwardRef(
-  (props, ref) => {
-    const ratingGroup = useRatingGroupContext();
-    const mergedProps = mergeProps(ratingGroup.getHiddenInputProps(), props);
-    const field = useFieldContext();
-    return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
-  }
-);
+const RatingGroupHiddenInput = forwardRef((props, ref) => {
+  const ratingGroup = useRatingGroupContext();
+  const mergedProps = mergeProps(ratingGroup.getHiddenInputProps(), props);
+  const field = useFieldContext();
+  return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
+});
 RatingGroupHiddenInput.displayName = "RatingGroupHiddenInput";
 
 export { RatingGroupHiddenInput };

package/dist/components/rating-group/rating-group-label.cjs

@@ -9,13 +9,11 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const useRatingGroupContext = require('./use-rating-group-context.cjs');
 
-const RatingGroupLabel = react.forwardRef(
-  (props, ref) => {
-    const ratingGroup = useRatingGroupContext.useRatingGroupContext();
-    const mergedProps = react$1.mergeProps(ratingGroup.getLabelProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
-  }
-);
+const RatingGroupLabel = react.forwardRef((props, ref) => {
+  const ratingGroup = useRatingGroupContext.useRatingGroupContext();
+  const mergedProps = react$1.mergeProps(ratingGroup.getLabelProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
+});
 RatingGroupLabel.displayName = "RatingGroupLabel";
 
 exports.RatingGroupLabel = RatingGroupLabel;

package/dist/components/rating-group/rating-group-label.js

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useRatingGroupContext } from './use-rating-group-context.js';
 
-const RatingGroupLabel = forwardRef(
-  (props, ref) => {
-    const ratingGroup = useRatingGroupContext();
-    const mergedProps = mergeProps(ratingGroup.getLabelProps(), props);
-    return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
-  }
-);
+const RatingGroupLabel = forwardRef((props, ref) => {
+  const ratingGroup = useRatingGroupContext();
+  const mergedProps = mergeProps(ratingGroup.getLabelProps(), props);
+  return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
+});
 RatingGroupLabel.displayName = "RatingGroupLabel";
 
 export { RatingGroupLabel };

package/dist/components/rating-group/rating-group-root-provider.cjs

@@ -10,15 +10,11 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useRatingGroupContext = require('./use-rating-group-context.cjs');
 
-const RatingGroupRootProvider = react.forwardRef(
-  (props, ref) => {
-    const [{ value: ratingGroup }, localProps] = createSplitProps.createSplitProps()(props, [
-      "value"
-    ]);
-    const mergedProps = react$1.mergeProps(ratingGroup.getRootProps(), localProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(useRatingGroupContext.RatingGroupProvider, { value: ratingGroup, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
-  }
-);
+const RatingGroupRootProvider = react.forwardRef((props, ref) => {
+  const [{ value: ratingGroup }, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+  const mergedProps = react$1.mergeProps(ratingGroup.getRootProps(), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useRatingGroupContext.RatingGroupProvider, { value: ratingGroup, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+});
 RatingGroupRootProvider.displayName = "RatingGroupRootProvider";
 
 exports.RatingGroupRootProvider = RatingGroupRootProvider;

package/dist/components/rating-group/rating-group-root-provider.js

@@ -6,15 +6,11 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { RatingGroupProvider } from './use-rating-group-context.js';
 
-const RatingGroupRootProvider = forwardRef(
-  (props, ref) => {
-    const [{ value: ratingGroup }, localProps] = createSplitProps()(props, [
-      "value"
-    ]);
-    const mergedProps = mergeProps(ratingGroup.getRootProps(), localProps);
-    return /* @__PURE__ */ jsx(RatingGroupProvider, { value: ratingGroup, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
-  }
-);
+const RatingGroupRootProvider = forwardRef((props, ref) => {
+  const [{ value: ratingGroup }, localProps] = createSplitProps()(props, ["value"]);
+  const mergedProps = mergeProps(ratingGroup.getRootProps(), localProps);
+  return /* @__PURE__ */ jsx(RatingGroupProvider, { value: ratingGroup, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+});
 RatingGroupRootProvider.displayName = "RatingGroupRootProvider";
 
 export { RatingGroupRootProvider };

package/dist/components/rating-group/rating-group.d.cts

@@ -1,5 +1,5 @@
 export type { HoverChangeDetails, ValueChangeDetails } from '@zag-js/rating-group';
-export { RatingGroupContext as Context, type RatingGroupContextProps as ContextProps, } from './rating-group-context';
+export { RatingGroupContext as Context, type RatingGroupContextProps as ContextProps } from './rating-group-context';
 export { RatingGroupControl as Control, type RatingGroupControlBaseProps as ControlBaseProps, type RatingGroupControlProps as ControlProps, } from './rating-group-control';
 export { RatingGroupHiddenInput as HiddenInput, type RatingGroupHiddenInputBaseProps as HiddenInputBaseProps, type RatingGroupHiddenInputProps as HiddenInputProps, } from './rating-group-hidden-input';
 export { RatingGroupItem as Item, type RatingGroupItemBaseProps as ItemBaseProps, type RatingGroupItemProps as ItemProps, } from './rating-group-item';

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

@@ -1,5 +1,5 @@
 export type { HoverChangeDetails, ValueChangeDetails } from '@zag-js/rating-group';
-export { RatingGroupContext as Context, type RatingGroupContextProps as ContextProps, } from './rating-group-context';
+export { RatingGroupContext as Context, type RatingGroupContextProps as ContextProps } from './rating-group-context';
 export { RatingGroupControl as Control, type RatingGroupControlBaseProps as ControlBaseProps, type RatingGroupControlProps as ControlProps, } from './rating-group-control';
 export { RatingGroupHiddenInput as HiddenInput, type RatingGroupHiddenInputBaseProps as HiddenInputBaseProps, type RatingGroupHiddenInputProps as HiddenInputProps, } from './rating-group-hidden-input';
 export { RatingGroupItem as Item, type RatingGroupItemBaseProps as ItemBaseProps, type RatingGroupItemProps as ItemProps, } from './rating-group-item';

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

@@ -8,7 +8,6 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
 const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
-const useEvent = require('../../utils/use-event.cjs');
 const useFieldContext = require('../field/use-field-context.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -31,11 +30,12 @@ function _interopNamespaceDefault(e) {
 const rating__namespace = /*#__PURE__*/_interopNamespaceDefault(rating);
 
 const useRatingGroup = (props = {}) => {
+  const id = react.useId();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
   const field = useFieldContext.useFieldContext();
-  const initialContext = {
-    id: react.useId(),
+  const machineProps = {
+    id,
     ids: {
       label: field?.ids.label,
       hiddenInput: field?.ids.control
@@ -45,19 +45,10 @@ const useRatingGroup = (props = {}) => {
     readOnly: field?.readOnly,
     required: field?.required,
     getRootNode,
-    value: props.defaultValue,
     ...props
   };
-  const context = {
-    ...initialContext,
-    value: props.value,
-    onValueChange: useEvent.useEvent(props.onValueChange, { sync: true }),
-    onHoverChange: useEvent.useEvent(props.onHoverChange)
-  };
-  const [state, send] = react$1.useMachine(rating__namespace.machine(initialContext), {
-    context
-  });
-  return rating__namespace.connect(state, send, react$1.normalizeProps);
+  const service = react$1.useMachine(rating__namespace.machine, machineProps);
+  return rating__namespace.connect(service, react$1.normalizeProps);
 };
 
 exports.useRatingGroup = useRatingGroup;

package/dist/components/rating-group/use-rating-group.d.cts

@@ -1,12 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as rating from '@zag-js/rating-group';
-export interface UseRatingGroupProps extends Optional<Omit<rating.Context, 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The initial value of the rating group when it is first rendered.
-     * Use when you do not need to control the state of the rating group.
-     */
-    defaultValue?: rating.Context['value'];
+export interface UseRatingGroupProps extends Optional<Omit<rating.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseRatingGroupReturn extends rating.Api<PropTypes> {
 }

package/dist/components/rating-group/use-rating-group.d.ts

@@ -1,12 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as rating from '@zag-js/rating-group';
-export interface UseRatingGroupProps extends Optional<Omit<rating.Context, 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The initial value of the rating group when it is first rendered.
-     * Use when you do not need to control the state of the rating group.
-     */
-    defaultValue?: rating.Context['value'];
+export interface UseRatingGroupProps extends Optional<Omit<rating.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseRatingGroupReturn extends rating.Api<PropTypes> {
 }

package/dist/components/rating-group/use-rating-group.js

@@ -4,15 +4,15 @@ import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
-import { useEvent } from '../../utils/use-event.js';
 import { useFieldContext } from '../field/use-field-context.js';
 
 const useRatingGroup = (props = {}) => {
+  const id = useId();
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
   const field = useFieldContext();
-  const initialContext = {
-    id: useId(),
+  const machineProps = {
+    id,
     ids: {
       label: field?.ids.label,
       hiddenInput: field?.ids.control
@@ -22,19 +22,10 @@ const useRatingGroup = (props = {}) => {
     readOnly: field?.readOnly,
     required: field?.required,
     getRootNode,
-    value: props.defaultValue,
     ...props
   };
-  const context = {
-    ...initialContext,
-    value: props.value,
-    onValueChange: useEvent(props.onValueChange, { sync: true }),
-    onHoverChange: useEvent(props.onHoverChange)
-  };
-  const [state, send] = useMachine(rating.machine(initialContext), {
-    context
-  });
-  return rating.connect(state, send, normalizeProps);
+  const service = useMachine(rating.machine, machineProps);
+  return rating.connect(service, normalizeProps);
 };
 
 export { useRatingGroup };

package/dist/components/segment-group/index.d.cts

@@ -1,16 +1,16 @@
 export type { ValueChangeDetails as SegmentGroupValueChangeDetails } from '@zag-js/radio-group';
 export { SegmentGroupContext, type SegmentGroupContextProps } from './segment-group-context';
 export { SegmentGroupIndicator, type SegmentGroupIndicatorBaseProps, type SegmentGroupIndicatorProps, } from './segment-group-indicator';
-export { SegmentGroupItem, type SegmentGroupItemBaseProps, type SegmentGroupItemProps, } from './segment-group-item';
-export { SegmentGroupItemContext, type SegmentGroupItemContextProps, } from './segment-group-item-context';
+export { SegmentGroupItem, type SegmentGroupItemBaseProps, type SegmentGroupItemProps } from './segment-group-item';
+export { SegmentGroupItemContext, type SegmentGroupItemContextProps } from './segment-group-item-context';
 export { SegmentGroupItemControl, type SegmentGroupItemControlBaseProps, type SegmentGroupItemControlProps, } from './segment-group-item-control';
 export { SegmentGroupItemHiddenInput, type SegmentGroupItemHiddenInputBaseProps, type SegmentGroupItemHiddenInputProps, } from './segment-group-item-hidden-input';
 export { SegmentGroupItemText, type SegmentGroupItemTextBaseProps, type SegmentGroupItemTextProps, } from './segment-group-item-text';
-export { SegmentGroupLabel, type SegmentGroupLabelBaseProps, type SegmentGroupLabelProps, } from './segment-group-label';
-export { SegmentGroupRoot, type SegmentGroupRootBaseProps, type SegmentGroupRootProps, } from './segment-group-root';
+export { SegmentGroupLabel, type SegmentGroupLabelBaseProps, type SegmentGroupLabelProps } from './segment-group-label';
+export { SegmentGroupRoot, type SegmentGroupRootBaseProps, type SegmentGroupRootProps } from './segment-group-root';
 export { SegmentGroupRootProvider, type SegmentGroupRootProviderBaseProps, type SegmentGroupRootProviderProps, } from './segment-group-root-provider';
 export { segmentGroupAnatomy } from './segment-group.anatomy';
-export { useSegmentGroup, type UseSegmentGroupProps, type UseSegmentGroupReturn, } from './use-segment-group';
+export { useSegmentGroup, type UseSegmentGroupProps, type UseSegmentGroupReturn } from './use-segment-group';
 export { useSegmentGroupContext, type UseSegmentGroupContext } from './use-segment-group-context';
-export { useSegmentGroupItemContext, type UseSegmentGroupItemContext, } from './use-segment-group-item-context';
+export { useSegmentGroupItemContext, type UseSegmentGroupItemContext } from './use-segment-group-item-context';
 export * as SegmentGroup from './segment-group';

package/dist/components/segment-group/index.d.ts

@@ -1,16 +1,16 @@
 export type { ValueChangeDetails as SegmentGroupValueChangeDetails } from '@zag-js/radio-group';
 export { SegmentGroupContext, type SegmentGroupContextProps } from './segment-group-context';
 export { SegmentGroupIndicator, type SegmentGroupIndicatorBaseProps, type SegmentGroupIndicatorProps, } from './segment-group-indicator';
-export { SegmentGroupItem, type SegmentGroupItemBaseProps, type SegmentGroupItemProps, } from './segment-group-item';
-export { SegmentGroupItemContext, type SegmentGroupItemContextProps, } from './segment-group-item-context';
+export { SegmentGroupItem, type SegmentGroupItemBaseProps, type SegmentGroupItemProps } from './segment-group-item';
+export { SegmentGroupItemContext, type SegmentGroupItemContextProps } from './segment-group-item-context';
 export { SegmentGroupItemControl, type SegmentGroupItemControlBaseProps, type SegmentGroupItemControlProps, } from './segment-group-item-control';
 export { SegmentGroupItemHiddenInput, type SegmentGroupItemHiddenInputBaseProps, type SegmentGroupItemHiddenInputProps, } from './segment-group-item-hidden-input';
 export { SegmentGroupItemText, type SegmentGroupItemTextBaseProps, type SegmentGroupItemTextProps, } from './segment-group-item-text';
-export { SegmentGroupLabel, type SegmentGroupLabelBaseProps, type SegmentGroupLabelProps, } from './segment-group-label';
-export { SegmentGroupRoot, type SegmentGroupRootBaseProps, type SegmentGroupRootProps, } from './segment-group-root';
+export { SegmentGroupLabel, type SegmentGroupLabelBaseProps, type SegmentGroupLabelProps } from './segment-group-label';
+export { SegmentGroupRoot, type SegmentGroupRootBaseProps, type SegmentGroupRootProps } from './segment-group-root';
 export { SegmentGroupRootProvider, type SegmentGroupRootProviderBaseProps, type SegmentGroupRootProviderProps, } from './segment-group-root-provider';
 export { segmentGroupAnatomy } from './segment-group.anatomy';
-export { useSegmentGroup, type UseSegmentGroupProps, type UseSegmentGroupReturn, } from './use-segment-group';
+export { useSegmentGroup, type UseSegmentGroupProps, type UseSegmentGroupReturn } from './use-segment-group';
 export { useSegmentGroupContext, type UseSegmentGroupContext } from './use-segment-group-context';
-export { useSegmentGroupItemContext, type UseSegmentGroupItemContext, } from './use-segment-group-item-context';
+export { useSegmentGroupItemContext, type UseSegmentGroupItemContext } from './use-segment-group-item-context';
 export * as SegmentGroup from './segment-group';

package/dist/components/segment-group/segment-group-indicator.cjs

@@ -10,17 +10,15 @@ const factory = require('../factory.cjs');
 const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 const useSegmentGroupContext = require('./use-segment-group-context.cjs');
 
-const SegmentGroupIndicator = react.forwardRef(
-  (props, ref) => {
-    const segmentGroup = useSegmentGroupContext.useSegmentGroupContext();
-    const mergedProps = react$1.mergeProps(
-      segmentGroup.getIndicatorProps(),
-      segmentGroup_anatomy.parts.indicator.attrs,
-      props
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
+const SegmentGroupIndicator = react.forwardRef((props, ref) => {
+  const segmentGroup = useSegmentGroupContext.useSegmentGroupContext();
+  const mergedProps = react$1.mergeProps(
+    segmentGroup.getIndicatorProps(),
+    segmentGroup_anatomy.parts.indicator.attrs,
+    props
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
 SegmentGroupIndicator.displayName = "SegmentGroupIndicator";
 
 exports.SegmentGroupIndicator = SegmentGroupIndicator;

package/dist/components/segment-group/segment-group-indicator.js

@@ -6,17 +6,15 @@ import { ark } from '../factory.js';
 import { parts } from './segment-group.anatomy.js';
 import { useSegmentGroupContext } from './use-segment-group-context.js';
 
-const SegmentGroupIndicator = forwardRef(
-  (props, ref) => {
-    const segmentGroup = useSegmentGroupContext();
-    const mergedProps = mergeProps(
-      segmentGroup.getIndicatorProps(),
-      parts.indicator.attrs,
-      props
-    );
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
+const SegmentGroupIndicator = forwardRef((props, ref) => {
+  const segmentGroup = useSegmentGroupContext();
+  const mergedProps = mergeProps(
+    segmentGroup.getIndicatorProps(),
+    parts.indicator.attrs,
+    props
+  );
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 SegmentGroupIndicator.displayName = "SegmentGroupIndicator";
 
 export { SegmentGroupIndicator };

package/dist/components/segment-group/segment-group-item-control.cjs

@@ -11,18 +11,16 @@ const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 const useSegmentGroupContext = require('./use-segment-group-context.cjs');
 const useSegmentGroupItemPropsContext = require('./use-segment-group-item-props-context.cjs');
 
-const SegmentGroupItemControl = react.forwardRef(
-  (props, ref) => {
-    const segmentGroup = useSegmentGroupContext.useSegmentGroupContext();
-    const itemProps = useSegmentGroupItemPropsContext.useSegmentGroupItemPropsContext();
-    const mergedProps = react$1.mergeProps(
-      segmentGroup.getItemControlProps(itemProps),
-      segmentGroup_anatomy.parts.itemControl.attrs,
-      props
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
+const SegmentGroupItemControl = react.forwardRef((props, ref) => {
+  const segmentGroup = useSegmentGroupContext.useSegmentGroupContext();
+  const itemProps = useSegmentGroupItemPropsContext.useSegmentGroupItemPropsContext();
+  const mergedProps = react$1.mergeProps(
+    segmentGroup.getItemControlProps(itemProps),
+    segmentGroup_anatomy.parts.itemControl.attrs,
+    props
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
 SegmentGroupItemControl.displayName = "SegmentGroupItemControl";
 
 exports.SegmentGroupItemControl = SegmentGroupItemControl;