diff --git a/packages/wow-ui/src/components/Toggle/index.tsx b/packages/wow-ui/src/components/Toggle/index.tsx index 2e771550..16b1e9fc 100644 --- a/packages/wow-ui/src/components/Toggle/index.tsx +++ b/packages/wow-ui/src/components/Toggle/index.tsx @@ -3,14 +3,19 @@ import { cva } from "@styled-system/css"; import { Flex, styled } from "@styled-system/jsx"; import type { - ComponentPropsWithoutRef, - ComponentPropsWithRef, ElementType, KeyboardEvent, + NamedExoticComponent, ReactNode, } from "react"; import { forwardRef, useEffect, useState } from "react"; +import type { + AsProps, + PolymorphicComponentProps, + PolymorphicRef, +} from "@/types/Polymorphic"; + /** * @template T 렌더링할 요소 또는 컴포넌트 타입 * @@ -25,8 +30,7 @@ import { forwardRef, useEffect, useState } from "react"; * @param {ComponentPropsWithoutRef} rest 렌더링된 요소 또는 컴포넌트에 전달할 추가 props. * @param {ComponentPropsWithRef["ref"]} ref 렌더링된 요소 또는 컴포넌트에 연결할 ref. */ -export interface ToggleProps { - as?: T; +export interface ToggleProps extends AsProps { defaultChecked?: boolean; isDisabled?: boolean; isChecked?: boolean; @@ -52,8 +56,12 @@ const ToggleIcon = ({ ); }; -const Toggle = forwardRef( - ( +type ToggleComponent = ( + props: ToggleProps +) => ReactNode | null; + +const Toggle: ToggleComponent = forwardRef( + ( { as, defaultChecked = false, @@ -64,8 +72,8 @@ const Toggle = forwardRef( onKeyDown, onChange, ...rest - }: ToggleProps & ComponentPropsWithoutRef, - ref: ComponentPropsWithRef["ref"] + }: PolymorphicComponentProps>, + ref: PolymorphicRef ) => { const [isActive, setIsActive] = useState(() => defaultChecked); @@ -178,6 +186,6 @@ const toggle = cva({ }, }); -Toggle.displayName = "Toggle"; +(Toggle as NamedExoticComponent).displayName = "Toggle"; export default Toggle; diff --git a/packages/wow-ui/src/types/Polymorphic.ts b/packages/wow-ui/src/types/Polymorphic.ts new file mode 100644 index 00000000..ae92de33 --- /dev/null +++ b/packages/wow-ui/src/types/Polymorphic.ts @@ -0,0 +1,21 @@ +import type { + ComponentPropsWithoutRef, + ComponentPropsWithRef, + ElementType, +} from "react"; + +export interface AsProps { + as?: T; +} + +export type PolymorphicRef = + ComponentPropsWithRef["ref"]; + +export type PolymorphicComponentProps< + T extends ElementType, + Props = {}, +> = AsProps & + ComponentPropsWithoutRef & + Props & { + ref?: PolymorphicRef; + };