feat: support generics

docs/demo/basic.tsx

@@ -1,8 +1,9 @@
-import '../../assets/style.less';
-import React from 'react';
 import Segmented from 'rc-segmented';
+import React from 'react';
 
-export default function App() {
+import '../../assets/style.less';
+
+const Demo = () => {
   return (
     <div>
       <div className="wrapper">
@@ -27,8 +28,11 @@ export default function App() {
             { label: 'Android', value: 'Android', disabled: true },
             'Web',
           ]}
+          onChange={(value) => console.log(value, typeof value)}
         />
       </div>
     </div>
   );
-}
+};
+
+export default Demo;

docs/demo/controlled.tsx

@@ -1,15 +1,9 @@
-import '../../assets/style.less';
-import React from 'react';
 import Segmented from 'rc-segmented';
-import type { SegmentedValue } from 'rc-segmented';
+import React from 'react';
+import '../../assets/style.less';
 
-export default class Demo extends React.Component<
-  unknown,
-  { value: SegmentedValue }
-> {
-  state = {
-    value: 'Web3',
-  };
+export default class Demo extends React.Component<unknown, { value: string }> {
+  state = { value: 'Web3' };
 
   render() {
     return (

docs/demo/refs.tsx

@@ -1,11 +1,11 @@
-import '../../assets/style.less';
-import React from 'react';
 import Segmented from 'rc-segmented';
+import React from 'react';
+import '../../assets/style.less';
 
 class ClassComponentWithStringRef extends React.Component {
   componentDidMount() {
     // eslint-disable-next-line react/no-string-refs
-    console.log(this.refs.segmentedRef, 'ref');
+    console.log(this.refs.segmentedRef, 'ClassComponentWithStringRef');
   }
 
   render() {
@@ -22,7 +22,7 @@ class ClassComponent2 extends React.Component {
   segmentedRef: HTMLDivElement | null = null;
 
   componentDidMount() {
-    console.log(this.segmentedRef, 'ref');
+    console.log(this.segmentedRef, 'ClassComponent2');
   }
 
   render() {
@@ -42,7 +42,7 @@ class ClassComponentWithCreateRef extends React.Component<
   segmentedRef = React.createRef<HTMLDivElement>();
 
   componentDidMount() {
-    console.log(this.segmentedRef.current, 'ref');
+    console.log(this.segmentedRef.current, 'ClassComponentWithCreateRef');
   }
 
   render() {
@@ -55,7 +55,7 @@ class ClassComponentWithCreateRef extends React.Component<
 function FunctionalComponent() {
   const segmentedRef = React.useRef<HTMLDivElement>(null);
   React.useEffect(() => {
-    console.log(segmentedRef.current, 'ref');
+    console.log(segmentedRef.current, 'FunctionalComponent');
   }, []);
   return <Segmented options={['iOS', 'Android', 'Web']} ref={segmentedRef} />;
 }

package.json

@@ -78,7 +78,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.4"
+    "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "react": ">=16.0.0",

src/MotionThumb.tsx

@@ -3,18 +3,17 @@ import CSSMotion from 'rc-motion';
 import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
 import { composeRef } from 'rc-util/lib/ref';
 import * as React from 'react';
-import type { SegmentedValue } from '.';
 
 type ThumbReact = {
   left: number;
   right: number;
   width: number;
 } | null;
 
-export interface MotionThumbInterface {
+export interface MotionThumbInterface<Value = React.Key> {
   containerRef: React.RefObject<HTMLDivElement>;
-  value: SegmentedValue;
-  getValueIndex: (value: SegmentedValue) => number;
+  value: Value;
+  getValueIndex: (value: Value) => number;
   prefixCls: string;
   motionName: string;
   onMotionStart: VoidFunction;
@@ -55,7 +54,7 @@ export default function MotionThumb(props: MotionThumbInterface) {
   const [prevValue, setPrevValue] = React.useState(value);
 
   // =========================== Effect ===========================
-  const findValueElement = (val: SegmentedValue) => {
+  const findValueElement = (val: any) => {
     const index = getValueIndex(val);
 
     const ele = containerRef.current?.querySelectorAll<HTMLDivElement>(