refactor: minor changes here and there (#39)

global.d.ts

@@ -1,4 +1,4 @@
 type DeepPartial<T> = T extends object ? {
-    [P in keyof T]?: DeepPartial<T[P]>
-  } :
+  [P in keyof T]?: DeepPartial<T[P]>
+} :
   T

package.json

@@ -44,6 +44,7 @@
     "ansis": "^3.3.2",
     "ava": "^5.3.1",
     "c8": "^8.0.1",
+    "clsx": "^2.1.1",
     "dprint": "^0.46.0",
     "eslint": "^8.49.0",
     "eslint-config-kagura": "^2.2.1",
@@ -72,7 +73,8 @@
       "object.assign": "npm:@nolyfill/object.assign@^1",
       "object.entries": "npm:@nolyfill/object.entries@^1",
       "object.fromentries": "npm:@nolyfill/object.fromentries@^1",
-      "object.values": "npm:@nolyfill/object.values@^1"
+      "object.values": "npm:@nolyfill/object.values@^1",
+      "es-iterator-helpers": "npm:@nolyfill/es-iterator-helpers@^1"
     },
     "patchedDependencies": {
       "@rollup/plugin-esm-shim@0.1.7": "patches/@rollup__plugin-esm-shim@0.1.7.patch"
@@ -107,5 +109,6 @@
       "@swc-node/register"
     ],
     "timeout": "30s"
-  }
+  },
+  "packageManager": "pnpm@9.11.0+sha512.0a203ffaed5a3f63242cd064c8fb5892366c103e328079318f78062f24ea8c9d50bc6a47aa3567cabefd824d170e78fa2745ed1f16b132e16436146b7688f19b"
 }

src/client/components/button/button.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import * as stylex from '@stylexjs/stylex'
 import { inline } from '@stylex-extend/core'
-import { useClasses, useScale, withScale } from '../../composables'
+import { clsx } from 'clsx'
+import { useScale, withScale } from '../../composables'
 
 interface Props {
   icon?: React.ReactNode
@@ -109,14 +110,12 @@ const ButtonComponent = React.forwardRef<HTMLButtonElement, ButtonProps>(
         lineHeight: SCALES.height(2.5),
         fontSize: SCALES.font(0.875),
         height: SCALES.height(2.5),
-        padding: `${SCALES.pt(0)} ${auto ? SCALES.pr(1.15) : SCALES.pr(1.375)} ${SCALES.pt(0)} ${
-          auto ? SCALES.pl(1.15) : SCALES.pl(1.375)
-        }`,
-        margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${
-          SCALES.ml(
-            0
-          )
-        }`,
+        padding: `${SCALES.pt(0)} ${auto ? SCALES.pr(1.15) : SCALES.pr(1.375)} ${SCALES.pt(0)} ${auto ? SCALES.pl(1.15) : SCALES.pl(1.375)
+          }`,
+        margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(
+          0
+        )
+          }`,
         '--button-height': SCALES.height(2.5),
         '--button-icon-padding': SCALES.pl(0.727),
         ...(auto && { width: 'auto' }),
@@ -128,7 +127,7 @@ const ButtonComponent = React.forwardRef<HTMLButtonElement, ButtonProps>(
       })
     )
 
-    const classes = useClasses('button', className, userClassName)
+    const classes = clsx('button', className, userClassName)
 
     return (
       <button

src/client/components/checkbox/checkbox.tsx

@@ -1,7 +1,8 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import * as stylex from '@stylexjs/stylex'
 import { inline } from '@stylex-extend/core'
-import { useClasses, useScale, withScale } from '../../composables'
+import { clsx } from 'clsx'
+import { useScale, withScale } from '../../composables'
 import { useCheckbox } from './context'
 
 export interface CheckboxEventTarget {
@@ -88,7 +89,7 @@ function CheckboxComponent(props: CheckboxProps) {
     fontSize: 0,
     backgroundColor: 'transparent'
   }))
-  const classes = useClasses(className, userClassName)
+  const classes = clsx(className, userClassName)
   const [selfChecked, setSelfChecked] = useState<boolean>(false)
   const isDisabled = inGroup ? disabledAll || disabled : disabled
 

src/client/components/drawer/backdrop.tsx

@@ -2,8 +2,8 @@ import React, { useRef } from 'react'
 import type { MouseEvent } from 'react'
 import * as stylex from '@stylexjs/stylex'
 import { injectGlobalStyle } from '@stylex-extend/core'
+import { clsx } from 'clsx'
 import { CSSTransition } from '../css-transition'
-import { useClasses } from '../../composables'
 
 interface Props {
   onClick?: (event: MouseEvent<HTMLElement>) => void
@@ -113,12 +113,12 @@ const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(
       <CSSTransition name="backdrop-wrapper" visible={visible} clearTime={300}>
         <div
           role="presentation"
-          className={useClasses(stylex.props(styles.backdrop).className, backdropClassName, 'backdrop')}
+          className={clsx(stylex.props(styles.backdrop).className, backdropClassName, 'backdrop')}
           onClick={handleClick}
           onMouseUp={handleMouseUp}
           {...props}
         >
-          <div className={useClasses(stylex.props(styles.layer).className, layerClassName, 'layer')} />
+          <div className={clsx(stylex.props(styles.layer).className, layerClassName, 'layer')} />
           <div
             role="presentation"
             onClick={onContentClick}

src/client/components/drawer/wrapper.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
 import * as stylex from '@stylexjs/stylex'
 import { inline } from '@stylex-extend/core'
+import { clsx } from 'clsx'
 import { CSSTransition } from '../css-transition'
-import { useClasses, useScale } from '../../composables'
+import { useScale } from '../../composables'
 
 interface Props {
   visible?: boolean
@@ -59,7 +60,7 @@ function DrawerWrapper(props: React.PropsWithChildren<DrawerWrapperProps>) {
     width: SCALES.width(1, 'auto'),
     height: SCALES.height(1, '100%')
   }))
-  const classes = useClasses(className, 'wrapper')
+  const classes = clsx(className, 'wrapper')
 
   return (
     <CSSTransition name="wrapper" visible={visible} clearTime={300}>

src/client/components/input/input.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import * as stylex from '@stylexjs/stylex'
 import { inline } from '@stylex-extend/core'
-import { useClasses, useScale, withScale } from '../../composables'
+import { clsx } from 'clsx'
+import { useScale, withScale } from '../../composables'
 
 interface Props {
   value?: string
@@ -57,7 +58,7 @@ const InputComponent = React.forwardRef<HTMLInputElement, InputProps>((props, re
 
   useImperativeHandle(ref, () => inputRef.current!)
 
-  const classes = useClasses('input', className, userClassName)
+  const classes = clsx('input', className, userClassName)
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (disabled || readOnly) return

src/client/components/select/dropdown.tsx

@@ -61,11 +61,11 @@ const SelectDropdown = React.forwardRef<
   })
   useEffect(() => {
     if (!ref || !ref.current) return
-    ref.current.addEventListener('mouseenter', updateRect)
+    const internalDropdownEl = ref.current
+    internalDropdownEl.addEventListener('mouseenter', updateRect)
     /* istanbul ignore next */
     return () => {
-      if (!ref || !ref.current) return
-      ref.current.removeEventListener('mouseenter', updateRect)
+      internalDropdownEl.removeEventListener('mouseenter', updateRect)
     }
   }, [ref, updateRect])
 

src/client/components/select/select-multiple.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import * as stylex from '@stylexjs/stylex'
 import { inline } from '@stylex-extend/core'
-import { useClasses } from '../../composables'
+import { clsx } from 'clsx'
 
 interface Props {
   disabled: boolean
@@ -29,7 +29,7 @@ function SelectMultipleValue({
     visibility: 'visible',
     opacity: 1
   }))
-  const classes = useClasses('clear-icon', className)
+  const classes = clsx('clear-icon', className)
 
   const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
     event.preventDefault()

src/client/components/text/child.tsx

@@ -1,7 +1,8 @@
 import React, { useMemo } from 'react'
 import * as stylex from '@stylexjs/stylex'
 import { inline } from '@stylex-extend/core'
-import { useClasses, useScale } from '../../composables'
+import { clsx } from 'clsx'
+import { useScale } from '../../composables'
 
 export interface Props {
   tag: keyof JSX.IntrinsicElements
@@ -63,7 +64,7 @@ function TextChild({
     }
   }))
 
-  const classes = useClasses(className, classNames)
+  const classes = clsx(className, classNames)
 
   return (
     <Component className={classes} style={style} {...props}>

src/client/composables/index.ts

@@ -1,5 +1,4 @@
 export * from './use-body-scroll'
-export * from './use-classes'
 export * from './use-click-anywhere'
 export * from './use-dom-observer'
 export * from './use-portal'