refactor: add styled component props

Author: gmolki

src/components/common/Button/types.ts

@@ -1,11 +1,13 @@
 import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react'
 import { DefaultTheme } from 'styled-components'
+import { WithStyledProps } from '../../../types'
 
 export type ButtonSize = 'sm' | 'md' | 'lg'
 export type ButtonTag = 'button' | 'a'
 
 export type ButtonProps = AnchorHTMLAttributes<HTMLAnchorElement> &
-  ButtonHTMLAttributes<HTMLButtonElement> & {
+  ButtonHTMLAttributes<HTMLButtonElement> &
+  WithStyledProps<ButtonTag> & {
     children: ReactNode
     kind?: string
     variant?: string
@@ -18,7 +20,6 @@ export type ButtonProps = AnchorHTMLAttributes<HTMLAnchorElement> &
     focus?: boolean
     disabled?: boolean
 
-    as?: ButtonTag
     className?: string
 
     animation?:

src/components/common/TextGradient/types.ts

@@ -1,5 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react'
 import { Typo, TypoKind } from '../../../themes/types'
+import { WithStyledProps } from '../../../types'
 
 export type TypeElements =
   | 'h1'
@@ -17,14 +18,14 @@ export type TypeElements =
   | 'span'
   | 'strong'
 
-export type TextGradientProps = HTMLAttributes<HTMLElement> & {
-  children: ReactNode
-  size?: number | string
-  color?: string
-  type?: TypoKind
-  className?: string
-  as?: TypeElements
-}
+export type TextGradientProps = HTMLAttributes<HTMLElement> &
+  WithStyledProps<TypeElements> & {
+    children: ReactNode
+    size?: number | string
+    color?: string
+    type?: TypoKind
+    className?: string
+  }
 
 export type StyledTextGradientProps = {
   size?: number | string

src/components/common/Tooltip/cmp.tsx

@@ -32,6 +32,10 @@ export const Tooltip = ({
   onClose,
   onCloseClick,
   closeDelay = 200,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  forwardedAs: _forwardedAs,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  as: _as,
   ...rest
 }: TooltipProps) => {
   const tooltipRef = useRef<any>()

src/components/common/Tooltip/types.ts

@@ -1,11 +1,12 @@
 import { ReactNode, RefObject } from 'react'
 import { FloatPosition, FloatPositionType } from '../../../hooks'
+import { WithStyledProps } from '../../../types'
 
 export type TooltipPositionType = FloatPositionType
 export type TooltipPosition = FloatPosition
 export type TooltipVariant = 1 | 2
 
-export type TooltipProps = {
+export type TooltipProps = WithStyledProps & {
   my: TooltipPositionType
   at: TooltipPositionType
   margin?: TooltipPosition
@@ -22,12 +23,12 @@ export type TooltipProps = {
   onClose?: () => void
   onCloseClick?: () => void
 } & (
-  | {
-      children: ReactNode & { ref?: RefObject<any> }
-      targetRef?: RefObject<any>
-    }
-  | {
-      children?: ReactNode & { ref?: RefObject<any> }
-      targetRef: RefObject<any>
-    }
-)
+    | {
+        children: ReactNode & { ref?: RefObject<any> }
+        targetRef?: RefObject<any>
+      }
+    | {
+        children?: ReactNode & { ref?: RefObject<any> }
+        targetRef: RefObject<any>
+      }
+  )

src/components/forms/CompositeTitle/cmp.tsx

@@ -11,6 +11,7 @@ export const CompositeTitle = ({
   numberColor = 'text',
   labelColor = 'text',
   label,
+  forwardedAs: _forwardedAs, // eslint-disable-line @typescript-eslint/no-unused-vars
   ...rest
 }: CompositeTitleProps) => {
   return (

src/types.ts

@@ -1,6 +1,27 @@
 import { AnchorHTMLAttributes, ComponentType, ImgHTMLAttributes } from 'react'
+import type { CSSProp } from 'styled-components'
 import type { IconName } from './components/common/Icon'
 
+/**
+ * Utility type for adding styled-components props to component types.
+ * Provides `as`, `forwardedAs`, and `css` props with optional type constraints.
+ *
+ * @template TAs - Type constraint for `as` and `forwardedAs` props (defaults to string | Element)
+ *
+ * @example
+ * // With type constraint
+ * type ButtonProps = WithStyledProps<'button' | 'a'> & { ... }
+ *
+ * @example
+ * // Without constraint (accepts any element)
+ * type GenericProps = WithStyledProps & { ... }
+ */
+export type WithStyledProps<TAs = string | Element> = {
+  as?: TAs
+  forwardedAs?: TAs
+  css?: CSSProp
+}
+
 export type Route = {
   href: string
   external?: boolean