fix linter complain

src/components/dialog/Dialog.tsx

@@ -6,7 +6,7 @@ import { ExtendProps } from '@/utils/type'
 /**
  * @specs https://m3.material.io/components/dialogs/specs
  */
-export const Dialog = forwardRef<
+const _Dialog = forwardRef<
     HTMLDivElement,
     ExtendProps<{
         headline?: React.ReactNode
@@ -39,3 +39,10 @@ export const Dialog = forwardRef<
         </div>
     )
 })
+
+const methods = {}
+
+export const Dialog: typeof _Dialog & typeof methods = Object.assign(
+    _Dialog,
+    methods,
+)

src/components/list/List.tsx

@@ -54,6 +54,7 @@ export const List = forwardRef<
     },
     ref,
 ) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const As: any = as || 'div'
     return (
         <As

src/composition/Scrim/Scrim.scss

@@ -3,20 +3,23 @@
     width: 100%;
     height: 100%;
 
-    background: rgb(0 0 0 / 0.1);
+    background: rgb(0 0 0 / 0.3);
     transition-property: opacity, display;
-    transition-duration: 200ms;
     transition-behavior: allow-discrete;
     overflow: hidden;
     overscroll-behavior: contain;
 
     &:not(.sd-scrim-open) {
+        transition-duration: 250ms;
+        transition-timing-function: ease-in;
         display: none;
         opacity: 0;
     }
 }
 
 .sd-scrim-open {
+    transition-duration: 200ms;
+    transition-timing-function: ease-out;
     opacity: 1;
     @starting-style {
         opacity: 0;

src/composition/Select/Select.stories.tsx

@@ -29,9 +29,6 @@ const meta: Meta<typeof Select> = {
     title: 'composition/Select',
     component: Select,
     tags: ['autodocs'],
-    parameters: {
-        layout: 'centered',
-    },
     args: {
         options: fruits.map((fruit) => ({ value: fruit })),
         defaultValue: fruits[3],

src/composition/SodaTransition/SodaTransition.tsx

@@ -80,20 +80,21 @@ export const SodaTransition = forwardRef<
         if (isIn === false) setShow(false)
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const As: any = as || 'div'
 
-    const component = (
-        <As
-            {...props}
-            ref={ref}
-            style={{ ...style, ...transitionStyle }}
-            onTransitionEnd={onTransitionEnd}
-        >
-            {children}
-        </As>
+    return (
+        show && (
+            <As
+                {...props}
+                ref={ref}
+                style={{ ...style, ...transitionStyle }}
+                onTransitionEnd={onTransitionEnd}
+            >
+                {children}
+            </As>
+        )
     )
-
-    return show && component
 })
 
 /**

src/ripple/Ripple.tsx

@@ -1,33 +1,20 @@
 import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
-import { ExtendProps, TagNameString } from '@/utils/type'
+import { AsOrChildrenProps, ExtendProps } from '@/utils/type'
 import { ripple } from './ripple-effect'
 
-interface RippleProps {
-    disabled?: boolean
-    /**
-     * In ms
-     */
-    rippleDuration?: number
-    /**
-     * Any css color string
-     */
-    rippleColor?: string
-}
-
-interface RippleRefProps extends RippleProps {
-    /**
-     * HTML tag name, div by default
-     */
-    as: TagNameString
-    children?: React.ReactNode
-}
-
-interface RippleFnProps extends RippleProps {
-    as?: undefined
-    children: (ref: React.Ref<HTMLElement>) => React.ReactNode
-}
-
-type Props = ExtendProps<RippleRefProps | RippleFnProps>
+type Props = ExtendProps<
+    {
+        disabled?: boolean
+        /**
+         * In ms
+         */
+        rippleDuration?: number
+        /**
+         * Any css color string
+         */
+        rippleColor?: string
+    } & AsOrChildrenProps
+>
 
 type RippleAt = (
     rippleX: number,
@@ -56,6 +43,7 @@ export const Ripple = forwardRef<RippleHandle, Props>(
         })
 
         if (as) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const As = as as any
             return (
                 <As {...props} ref={eRef} disabled={disabled}>

src/utils/render.ts

@@ -0,0 +1,19 @@
+import { createRoot } from 'react-dom/client'
+
+export function renderWithinDiv(
+    children: React.ReactNode | ((div: HTMLElement) => React.ReactNode),
+    divAttrs?: Partial<Record<keyof HTMLIFrameElement, string>>,
+    parentNode: ParentNode = document.body,
+) {
+    const div = document.createElement('div')
+    if (divAttrs) {
+        for (const [k, v] of Object.entries(divAttrs)) {
+            div.setAttribute(k, v)
+        }
+    }
+    parentNode.append(div)
+    createRoot(div).render(
+        typeof children === 'function' ? children(div) : children,
+    )
+    return div
+}

src/utils/type.ts

@@ -8,8 +8,22 @@ export type ExtendProps<
 
 export type TagNameString = keyof JSX.IntrinsicElements
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type As<Props = any> = React.ElementType<Props>
 
 export type PropsOf<T extends As> = React.ComponentPropsWithoutRef<T> & {
     as?: As
 }
+
+export type AsOrChildrenProps =
+    | {
+          as?: undefined
+          children: (ref: React.Ref<HTMLElement>) => React.ReactNode
+      }
+    | {
+          /**
+           * HTML tag name, div by default
+           */
+          as: TagNameString
+          children?: React.ReactNode
+      }