refactor: add NONE state for styleReady to distinguish initial mount

On initial mount when status is STATUS_NONE, return 'NONE' instead of
true to prevent rendering children until style is ready. This improves
the appear animation behavior by ensuring style synchronization.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: zombieJ

src/CSSMotion.tsx

@@ -190,6 +190,10 @@ export function genCSSMotion(config: CSSMotionConfig) {
 
       // We should render children when motionStyle is sync with stepStatus
       return React.useMemo(() => {
+        if (styleReady === 'NONE') {
+          return null;
+        }
+
         let motionChildren: React.ReactNode;
         const mergedProps = { ...eventProps, visible };
 

src/hooks/useStatus.ts

@@ -53,7 +53,7 @@ export default function useStatus(
   stepStatus: StepStatus,
   style: React.CSSProperties,
   visible: boolean,
-  styleReady: boolean,
+  styleReady: 'NONE' | boolean,
 ] {
   // Used for outer render usage to avoid `visible: false & status: none` to render nothing
   const [asyncVisible, setAsyncVisible] = React.useState<boolean>();
@@ -311,6 +311,13 @@ export default function useStatus(
     step,
     mergedStyle,
     asyncVisible ?? visible,
-    step === STEP_START || step === STEP_ACTIVE ? styleStep === step : true,
+
+    !mountedRef.current && currentStatus === STATUS_NONE
+      ? // Appear
+        'NONE'
+      : // Enter or Leave
+      step === STEP_START || step === STEP_ACTIVE
+      ? styleStep === step
+      : true,
   ];
 }

tests/CSSMotion.spec.tsx

@@ -492,6 +492,24 @@ describe('CSSMotion', () => {
     expect(activeBoxNode).toHaveClass(`animation-leave-active`);
   });
 
+  it('styleReady returns NONE on first mount when status is STATUS_NONE', () => {
+    const mockRender = jest.fn(() => null);
+
+    render(
+      <CSSMotion visible motionAppear motionName="test">
+        {mockRender}
+      </CSSMotion>,
+    );
+
+    expect(mockRender).toHaveBeenCalledTimes(1);
+    expect(mockRender).toHaveBeenCalledWith(
+      expect.objectContaining({
+        // TODO: update with correct className
+        className: '',
+      }),
+    );
+  });
+
   describe('immediately', () => {
     it('motionLeaveImmediately', async () => {
       const { container } = render(