@limonify/zest-ui 0.1.5 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limonify/zest-ui",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "Base UI for React Native — headless, unstyled, accessible primitive components.",
   "license": "MIT",
   "repository": {
@@ -21,6 +21,176 @@
       "types": "./lib/index.d.ts",
       "react-native": "./src/index.ts",
       "default": "./lib/index.js"
+    },
+    "./accordion": {
+      "types": "./lib/accordion/index.d.ts",
+      "react-native": "./src/accordion/index.ts",
+      "default": "./lib/accordion/index.js"
+    },
+    "./alert-dialog": {
+      "types": "./lib/alert-dialog/index.d.ts",
+      "react-native": "./src/alert-dialog/index.ts",
+      "default": "./lib/alert-dialog/index.js"
+    },
+    "./autocomplete": {
+      "types": "./lib/autocomplete/index.d.ts",
+      "react-native": "./src/autocomplete/index.ts",
+      "default": "./lib/autocomplete/index.js"
+    },
+    "./avatar": {
+      "types": "./lib/avatar/index.d.ts",
+      "react-native": "./src/avatar/index.ts",
+      "default": "./lib/avatar/index.js"
+    },
+    "./button": {
+      "types": "./lib/button/index.d.ts",
+      "react-native": "./src/button/index.ts",
+      "default": "./lib/button/index.js"
+    },
+    "./checkbox": {
+      "types": "./lib/checkbox/index.d.ts",
+      "react-native": "./src/checkbox/index.ts",
+      "default": "./lib/checkbox/index.js"
+    },
+    "./checkbox-group": {
+      "types": "./lib/checkbox-group/index.d.ts",
+      "react-native": "./src/checkbox-group/index.ts",
+      "default": "./lib/checkbox-group/index.js"
+    },
+    "./collapsible": {
+      "types": "./lib/collapsible/index.d.ts",
+      "react-native": "./src/collapsible/index.ts",
+      "default": "./lib/collapsible/index.js"
+    },
+    "./combobox": {
+      "types": "./lib/combobox/index.d.ts",
+      "react-native": "./src/combobox/index.ts",
+      "default": "./lib/combobox/index.js"
+    },
+    "./context-menu": {
+      "types": "./lib/context-menu/index.d.ts",
+      "react-native": "./src/context-menu/index.ts",
+      "default": "./lib/context-menu/index.js"
+    },
+    "./dialog": {
+      "types": "./lib/dialog/index.d.ts",
+      "react-native": "./src/dialog/index.ts",
+      "default": "./lib/dialog/index.js"
+    },
+    "./drawer": {
+      "types": "./lib/drawer/index.d.ts",
+      "react-native": "./src/drawer/index.ts",
+      "default": "./lib/drawer/index.js"
+    },
+    "./field": {
+      "types": "./lib/field/index.d.ts",
+      "react-native": "./src/field/index.ts",
+      "default": "./lib/field/index.js"
+    },
+    "./fieldset": {
+      "types": "./lib/fieldset/index.d.ts",
+      "react-native": "./src/fieldset/index.ts",
+      "default": "./lib/fieldset/index.js"
+    },
+    "./input": {
+      "types": "./lib/input/index.d.ts",
+      "react-native": "./src/input/index.ts",
+      "default": "./lib/input/index.js"
+    },
+    "./menu": {
+      "types": "./lib/menu/index.d.ts",
+      "react-native": "./src/menu/index.ts",
+      "default": "./lib/menu/index.js"
+    },
+    "./meter": {
+      "types": "./lib/meter/index.d.ts",
+      "react-native": "./src/meter/index.ts",
+      "default": "./lib/meter/index.js"
+    },
+    "./number-field": {
+      "types": "./lib/number-field/index.d.ts",
+      "react-native": "./src/number-field/index.ts",
+      "default": "./lib/number-field/index.js"
+    },
+    "./otp-field": {
+      "types": "./lib/otp-field/index.d.ts",
+      "react-native": "./src/otp-field/index.ts",
+      "default": "./lib/otp-field/index.js"
+    },
+    "./popover": {
+      "types": "./lib/popover/index.d.ts",
+      "react-native": "./src/popover/index.ts",
+      "default": "./lib/popover/index.js"
+    },
+    "./progress": {
+      "types": "./lib/progress/index.d.ts",
+      "react-native": "./src/progress/index.ts",
+      "default": "./lib/progress/index.js"
+    },
+    "./radio": {
+      "types": "./lib/radio/index.d.ts",
+      "react-native": "./src/radio/index.ts",
+      "default": "./lib/radio/index.js"
+    },
+    "./radio-group": {
+      "types": "./lib/radio-group/index.d.ts",
+      "react-native": "./src/radio-group/index.ts",
+      "default": "./lib/radio-group/index.js"
+    },
+    "./select": {
+      "types": "./lib/select/index.d.ts",
+      "react-native": "./src/select/index.ts",
+      "default": "./lib/select/index.js"
+    },
+    "./separator": {
+      "types": "./lib/separator/index.d.ts",
+      "react-native": "./src/separator/index.ts",
+      "default": "./lib/separator/index.js"
+    },
+    "./slider": {
+      "types": "./lib/slider/index.d.ts",
+      "react-native": "./src/slider/index.ts",
+      "default": "./lib/slider/index.js"
+    },
+    "./switch": {
+      "types": "./lib/switch/index.d.ts",
+      "react-native": "./src/switch/index.ts",
+      "default": "./lib/switch/index.js"
+    },
+    "./tabs": {
+      "types": "./lib/tabs/index.d.ts",
+      "react-native": "./src/tabs/index.ts",
+      "default": "./lib/tabs/index.js"
+    },
+    "./toast": {
+      "types": "./lib/toast/index.d.ts",
+      "react-native": "./src/toast/index.ts",
+      "default": "./lib/toast/index.js"
+    },
+    "./toggle": {
+      "types": "./lib/toggle/index.d.ts",
+      "react-native": "./src/toggle/index.ts",
+      "default": "./lib/toggle/index.js"
+    },
+    "./toggle-group": {
+      "types": "./lib/toggle-group/index.d.ts",
+      "react-native": "./src/toggle-group/index.ts",
+      "default": "./lib/toggle-group/index.js"
+    },
+    "./tooltip": {
+      "types": "./lib/tooltip/index.d.ts",
+      "react-native": "./src/tooltip/index.ts",
+      "default": "./lib/tooltip/index.js"
+    },
+    "./hooks": {
+      "types": "./lib/hooks/index.d.ts",
+      "react-native": "./src/hooks/index.ts",
+      "default": "./lib/hooks/index.js"
+    },
+    "./store": {
+      "types": "./lib/store/index.d.ts",
+      "react-native": "./src/store/index.ts",
+      "default": "./lib/store/index.js"
     }
   },
   "files": [
@@ -34,6 +204,7 @@
   "scripts": {
     "typecheck": "tsc --noEmit",
     "test": "jest",
+    "test:coverage": "jest --coverage",
     "lint": "eslint src",
     "build": "tsc -p tsconfig.build.json",
     "clean": "rm -rf lib",
@@ -46,6 +217,7 @@
   },
   "devDependencies": {
     "@babel/runtime": "^8.0.0",
+    "@size-limit/preset-small-lib": "^12.1.0",
     "@testing-library/react-native": "^14.0.1",
     "@types/jest": "^29.5.14",
     "@types/react": "~19.2.2",
@@ -55,6 +227,7 @@
     "react": "19.2.3",
     "react-native": "0.86.0",
     "react-native-gesture-handler": "~3.1.0",
+    "size-limit": "^12.1.0",
     "typescript": "~6.0.3"
   },
   "dependencies": {
@@ -64,5 +237,12 @@
     "react-native-gesture-handler": {
       "optional": true
     }
-  }
+  },
+  "size-limit": [
+    {
+      "name": "full",
+      "path": "lib/index.js",
+      "limit": "500 KB"
+    }
+  ]
 }

package/src/avatar/root/AvatarRoot.tsx

@@ -14,7 +14,10 @@ export function AvatarRoot(componentProps: AvatarRoot.Props) {
 
   const [imageLoadingStatus, setImageLoadingStatus] = React.useState<ImageLoadingStatus>('idle');
 
-  const state: AvatarRootState = { imageLoadingStatus };
+  const state: AvatarRootState = React.useMemo(
+    () => ({ imageLoadingStatus }),
+    [imageLoadingStatus],
+  );
 
   const contextValue: AvatarRootContext = React.useMemo(
     () => ({ imageLoadingStatus, setImageLoadingStatus }),

package/src/button/Button.tsx

@@ -19,7 +19,10 @@ export function Button(componentProps: Button.Props) {
 
   const { getButtonProps } = useButton({ disabled });
 
-  const state: ButtonState = { disabled, pressed };
+  const state: ButtonState = React.useMemo(
+    () => ({ disabled, pressed }),
+    [disabled, pressed],
+  );
 
   return useRenderElement(Pressable, componentProps, {
     state,

package/src/checkbox-group/CheckboxGroup.tsx

@@ -52,7 +52,10 @@ export function CheckboxGroup(componentProps: CheckboxGroup.Props) {
 
   const parent = useCheckboxGroupParent({ allValues, value, onValueChange: setValue });
 
-  const state: CheckboxGroupState = { disabled };
+  const state: CheckboxGroupState = React.useMemo(
+    () => ({ disabled }),
+    [disabled],
+  );
 
   const contextValue: CheckboxGroupContext = React.useMemo(
     () => ({

package/src/collapsible/panel/useCollapsiblePanel.tsx

@@ -35,6 +35,7 @@ export function useCollapsiblePanel(parameters: UseCollapsiblePanelParameters) {
 
   const handleContentLayout = React.useCallback((event: LayoutChangeEvent) => {
     const { height, width } = event.nativeEvent.layout;
+    if (height <= 0) return;
     setDimensions((previous) =>
       previous.height === height && previous.width === width ? previous : { height, width },
     );

package/src/dialog/popup/DialogPopup.tsx

@@ -2,6 +2,7 @@
 import { View } from 'react-native';
 import { useRenderElement } from '../../use-render/useRenderElement';
 import type { ZestUIComponentProps } from '../../types';
+import type { TransitionStatus } from '../../internals/useTransitionStatus';
 import { useDialogPopupProps } from './useDialogPopupProps';
 
 /**
@@ -11,9 +12,9 @@ import { useDialogPopupProps } from './useDialogPopupProps';
 export function DialogPopup(componentProps: DialogPopup.Props) {
   const { render, className, style, ref, ...elementProps } = componentProps;
 
-  const { open, props } = useDialogPopupProps();
+  const { open, transitionStatus, props } = useDialogPopupProps();
 
-  const state: DialogPopupState = { open };
+  const state: DialogPopupState = { open, transitionStatus };
 
   return useRenderElement(View, componentProps, {
     state,
@@ -27,6 +28,11 @@ export interface DialogPopupState {
    * Whether the dialog is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the dialog: `'starting'` as it opens (auto-clears
+   * to `undefined` after one frame), `'ending'` once it is closing.
+   */
+  transitionStatus: TransitionStatus;
 }
 
 export interface DialogPopupProps extends ZestUIComponentProps<typeof View, DialogPopupState> {}

package/src/dialog/popup/useDialogPopupProps.ts

@@ -1,6 +1,7 @@
 'use client';
 import { useDialogRootContext } from '../root/DialogRootContext';
 import { useDialogPortalContext } from '../portal/DialogPortalContext';
+import { useDialogTransitionContext } from '../root/DialogTransitionContext';
 
 /**
  * The state and element props shared by every popup built on the dialog store —
@@ -9,6 +10,7 @@ import { useDialogPortalContext } from '../portal/DialogPortalContext';
 export function useDialogPopupProps() {
   useDialogPortalContext();
   const store = useDialogRootContext();
+  const transitionContext = useDialogTransitionContext();
 
   const open = store.useState('open');
   const titleElementId = store.useState('titleElementId');
@@ -18,6 +20,7 @@ export function useDialogPopupProps() {
   return {
     store,
     open,
+    transitionStatus: transitionContext?.transitionStatus,
     props: {
       role,
       accessibilityViewIsModal: true,

package/src/dialog/root/DialogTransitionContext.ts

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import type { TransitionStatus } from '../../internals/useTransitionStatus';
+
+export interface DialogTransitionContext {
+  transitionStatus: TransitionStatus;
+}
+
+export const DialogTransitionContext = React.createContext<DialogTransitionContext | undefined>(
+  undefined,
+);
+
+export function useDialogTransitionContext() {
+  return React.useContext(DialogTransitionContext);
+}

package/src/dialog/root/useRenderDialogRoot.tsx

@@ -1,10 +1,12 @@
 'use client';
 import * as React from 'react';
 import { useRefWithInit } from '../../hooks/useRefWithInit';
+import { useTransitionStatus } from '../../internals/useTransitionStatus';
 import { usePopupRootHandle } from '../../utils/popups/usePopupRootHandle';
 import { DialogStore } from '../store/DialogStore';
 import type { DialogRootProps } from './DialogRoot';
 import { DialogRootContext } from './DialogRootContext';
+import { DialogTransitionContext } from './DialogTransitionContext';
 
 export type DialogRootMode = 'dialog' | 'alert-dialog';
 
@@ -53,11 +55,21 @@ export function useRenderDialogRoot<Payload = unknown>(
 
   usePopupRootHandle({ store, handle, actionsRef });
 
+  const resolvedOpen = store.useState('open');
+  const { transitionStatus } = useTransitionStatus(resolvedOpen, false, true);
+
   const payload = store.useState('payload') as Payload;
 
+  const transitionContextValue = React.useMemo(
+    () => ({ transitionStatus }),
+    [transitionStatus],
+  );
+
   return (
     <DialogRootContext.Provider value={store}>
-      {typeof children === 'function' ? children(payload) : children}
+      <DialogTransitionContext.Provider value={transitionContextValue}>
+        {typeof children === 'function' ? children(payload) : children}
+      </DialogTransitionContext.Provider>
     </DialogRootContext.Provider>
   );
 }

package/src/drawer/popup/DrawerPopup.tsx

@@ -6,6 +6,7 @@ import { useDialogPopupProps } from '../../dialog/popup/useDialogPopupProps';
 import { useRenderElement } from '../../use-render/useRenderElement';
 import { useStableCallback } from '../../hooks/useStableCallback';
 import type { ZestUIComponentProps } from '../../types';
+import type { TransitionStatus } from '../../internals/useTransitionStatus';
 import { createChangeEventDetails } from '../../utils/createChangeEventDetails';
 import { REASONS } from '../../utils/reasons';
 import { useDrawerRootContext, type DrawerSnapPoint, type DrawerSwipeDirection } from '../root/DrawerRootContext';
@@ -59,7 +60,7 @@ export function DrawerPopup(componentProps: DrawerPopup.Props) {
     setActiveSnapPoint,
     snapToSequentialPoints,
   } = useDrawerSnapPoints();
-  const { store, open, props } = useDialogPopupProps();
+  const { store, open, transitionStatus, props } = useDialogPopupProps();
 
   const [swiping, setSwiping] = React.useState(false);
   const [swipeMovement, setSwipeMovement] = React.useState(0);
@@ -157,6 +158,7 @@ export function DrawerPopup(componentProps: DrawerPopup.Props) {
 
   const state: DrawerPopupState = {
     open,
+    transitionStatus,
     swiping,
     swipeMovement,
     swipeDirection,
@@ -192,6 +194,11 @@ export interface DrawerPopupState {
    * Whether the drawer is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the drawer: `'starting'` as it opens (auto-clears
+   * to `undefined` after one frame), `'ending'` once it is closing.
+   */
+  transitionStatus: TransitionStatus;
   /**
    * Whether a swipe is currently in progress.
    */

package/src/input/Input.tsx

@@ -1,4 +1,5 @@
 'use client';
+import * as React from 'react';
 import { TextInput } from 'react-native';
 import { useRenderElement } from '../use-render/useRenderElement';
 import { useFieldControl } from '../field/control/useFieldControl';
@@ -32,7 +33,10 @@ export function Input(componentProps: Input.Props) {
     requireField: false,
   });
 
-  const state: Input.State = { disabled: field?.disabled ?? false };
+  const state: Input.State = React.useMemo(
+    () => ({ disabled: field?.disabled ?? false }),
+    [field?.disabled],
+  );
 
   return useRenderElement(TextInput, componentProps, {
     state,

package/src/menu/item/MenuItem.tsx

@@ -43,7 +43,10 @@ export function MenuItem(componentProps: MenuItem.Props) {
 
   const { getButtonProps } = useButton({ disabled });
 
-  const state: MenuItemState = { disabled, pressed, index };
+  const state: MenuItemState = React.useMemo(
+    () => ({ disabled, pressed, index }),
+    [disabled, pressed, index],
+  );
 
   return useRenderElement(Pressable, componentProps, {
     state,

package/src/menu/popup/MenuPopup.tsx

@@ -2,9 +2,11 @@
 import { View } from 'react-native';
 import { useMenuRootContext } from '../root/MenuRootContext';
 import { useMenuPositionerContext } from '../positioner/MenuPositionerContext';
+import { useMenuTransitionContext } from '../root/MenuTransitionContext';
 import { useRenderElement } from '../../use-render/useRenderElement';
 import { CompositeList } from '../../internals/composite/list/CompositeList';
 import type { Align, Side } from '../../utils/useAnchorPositioning';
+import type { TransitionStatus } from '../../internals/useTransitionStatus';
 import type { ZestUIComponentProps } from '../../types';
 
 /**
@@ -16,10 +18,11 @@ export function MenuPopup(componentProps: MenuPopup.Props) {
 
   const store = useMenuRootContext();
   const { side, align } = useMenuPositionerContext();
+  const { transitionStatus } = useMenuTransitionContext() ?? { transitionStatus: undefined };
 
   const open = store.useState('open');
 
-  const state: MenuPopupState = { open, side, align };
+  const state: MenuPopupState = { open, transitionStatus, side, align };
 
   const element = useRenderElement(View, componentProps, {
     state,
@@ -40,8 +43,22 @@ export function MenuPopup(componentProps: MenuPopup.Props) {
 }
 
 export interface MenuPopupState {
+  /**
+   * Whether the menu is currently open.
+   */
   open: boolean;
+  /**
+   * The transition status of the menu: `'starting'` as it opens (auto-clears
+   * to `undefined` after one frame), `'ending'` once it is closing.
+   */
+  transitionStatus: TransitionStatus;
+  /**
+   * The side the popup was actually placed on, after collision handling.
+   */
   side: Side;
+  /**
+   * The alignment the popup was actually placed with.
+   */
   align: Align;
 }
 

package/src/menu/root/MenuRoot.tsx

@@ -1,12 +1,14 @@
 'use client';
-import type * as React from 'react';
+import * as React from 'react';
 import { useRefWithInit } from '../../hooks/useRefWithInit';
+import { useTransitionStatus } from '../../internals/useTransitionStatus';
 import { usePopupRootHandle } from '../../utils/popups/usePopupRootHandle';
 import type { ZestChangeEventDetails } from '../../utils/createChangeEventDetails';
 import type { REASONS } from '../../utils/reasons';
 import { MenuStore } from '../store/MenuStore';
 import type { MenuHandle } from '../store/MenuHandle';
 import { MenuRootContext } from './MenuRootContext';
+import { MenuTransitionContext } from './MenuTransitionContext';
 
 /**
  * Groups all parts of the menu.
@@ -49,11 +51,21 @@ export function MenuRoot<Payload = unknown>(props: MenuRoot.Props<Payload>) {
 
   usePopupRootHandle({ store, handle, actionsRef });
 
+  const resolvedOpen = store.useState('open');
+  const { transitionStatus } = useTransitionStatus(resolvedOpen, false, true);
+
   const payload = store.useState('payload') as Payload;
 
+  const transitionContextValue = React.useMemo(
+    () => ({ transitionStatus }),
+    [transitionStatus],
+  );
+
   return (
     <MenuRootContext.Provider value={store}>
-      {typeof children === 'function' ? children(payload) : children}
+      <MenuTransitionContext.Provider value={transitionContextValue}>
+        {typeof children === 'function' ? children(payload) : children}
+      </MenuTransitionContext.Provider>
     </MenuRootContext.Provider>
   );
 }

package/src/menu/root/MenuTransitionContext.ts

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import type { TransitionStatus } from '../../internals/useTransitionStatus';
+
+export interface MenuTransitionContext {
+  transitionStatus: TransitionStatus;
+}
+
+export const MenuTransitionContext = React.createContext<MenuTransitionContext | undefined>(
+  undefined,
+);
+
+export function useMenuTransitionContext() {
+  return React.useContext(MenuTransitionContext);
+}

package/src/popover/popup/PopoverPopup.tsx

@@ -2,8 +2,10 @@
 import { View } from 'react-native';
 import { usePopoverRootContext } from '../root/PopoverRootContext';
 import { usePopoverPositionerContext } from '../positioner/PopoverPositionerContext';
+import { usePopoverTransitionContext } from '../root/PopoverTransitionContext';
 import { useRenderElement } from '../../use-render/useRenderElement';
 import type { Align, Side } from '../../utils/useAnchorPositioning';
+import type { TransitionStatus } from '../../internals/useTransitionStatus';
 import type { ZestUIComponentProps } from '../../types';
 
 /**
@@ -15,12 +17,13 @@ export function PopoverPopup(componentProps: PopoverPopup.Props) {
 
   const store = usePopoverRootContext();
   const { side, align } = usePopoverPositionerContext();
+  const { transitionStatus } = usePopoverTransitionContext() ?? { transitionStatus: undefined };
 
   const open = store.useState('open');
   const titleElementId = store.useState('titleElementId');
   const descriptionElementId = store.useState('descriptionElementId');
 
-  const state: PopoverPopupState = { open, side, align };
+  const state: PopoverPopupState = { open, transitionStatus, side, align };
 
   return useRenderElement(View, componentProps, {
     state,
@@ -45,6 +48,11 @@ export interface PopoverPopupState {
    * Whether the popover is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the popover: `'starting'` as it opens (auto-clears
+   * to `undefined` after one frame), `'ending'` once it is closing.
+   */
+  transitionStatus: TransitionStatus;
   /**
    * The side the popup was actually placed on, after collision handling.
    */

package/src/popover/root/PopoverRoot.tsx

@@ -1,12 +1,14 @@
 'use client';
-import type * as React from 'react';
+import * as React from 'react';
 import { useRefWithInit } from '../../hooks/useRefWithInit';
+import { useTransitionStatus } from '../../internals/useTransitionStatus';
 import { usePopupRootHandle } from '../../utils/popups/usePopupRootHandle';
 import type { ZestChangeEventDetails } from '../../utils/createChangeEventDetails';
 import type { REASONS } from '../../utils/reasons';
 import { PopoverStore } from '../store/PopoverStore';
 import type { PopoverHandle } from '../store/PopoverHandle';
 import { PopoverRootContext } from './PopoverRootContext';
+import { PopoverTransitionContext } from './PopoverTransitionContext';
 
 /**
  * Groups all parts of the popover.
@@ -43,11 +45,21 @@ export function PopoverRoot<Payload = unknown>(props: PopoverRoot.Props<Payload>
 
   usePopupRootHandle({ store, handle, actionsRef });
 
+  const resolvedOpen = store.useState('open');
+  const { transitionStatus } = useTransitionStatus(resolvedOpen, false, true);
+
   const payload = store.useState('payload') as Payload;
 
+  const transitionContextValue = React.useMemo(
+    () => ({ transitionStatus }),
+    [transitionStatus],
+  );
+
   return (
     <PopoverRootContext.Provider value={store}>
-      {typeof children === 'function' ? children(payload) : children}
+      <PopoverTransitionContext.Provider value={transitionContextValue}>
+        {typeof children === 'function' ? children(payload) : children}
+      </PopoverTransitionContext.Provider>
     </PopoverRootContext.Provider>
   );
 }

package/src/popover/root/PopoverTransitionContext.ts

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import type { TransitionStatus } from '../../internals/useTransitionStatus';
+
+export interface PopoverTransitionContext {
+  transitionStatus: TransitionStatus;
+}
+
+export const PopoverTransitionContext = React.createContext<PopoverTransitionContext | undefined>(
+  undefined,
+);
+
+export function usePopoverTransitionContext() {
+  return React.useContext(PopoverTransitionContext);
+}

package/src/radio-group/RadioGroup.tsx

@@ -53,7 +53,10 @@ export function RadioGroup<Value = any>(componentProps: RadioGroup.Props<Value>)
     },
   );
 
-  const state: RadioGroupState = { disabled, readOnly, required };
+  const state: RadioGroupState = React.useMemo(
+    () => ({ disabled, readOnly, required }),
+    [disabled, readOnly, required],
+  );
 
   const contextValue: RadioGroupContext<Value> = React.useMemo(
     () => ({