random type/style fixes, introduce AsProp type

components/src/components/atoms/Box/Box.tsx

@@ -1,5 +1,6 @@
 import type {
-  AllHTMLAttributes, FC } from 'react'
+  AllHTMLAttributes, ComponentClass,
+  FunctionComponent } from 'react'
 import React, {
   forwardRef,
 } from 'react'
@@ -15,10 +16,12 @@ type HTMLProperties = Omit<
   'as' | 'width' | 'height' | 'color' | 'translate' | 'transform'
 >
 
+export type AsProp = string | FunctionComponent | ComponentClass
+
 export type BoxProps = Sprinkles &
-  HTMLProperties & { as?: string | FC }
+  HTMLProperties & { as?: AsProp }
 
-export const Box = forwardRef<HTMLElement, BoxProps >(
+export const Box = forwardRef<HTMLElement, BoxProps>(
   (
     { as = 'div', className, children, ...props },
     ref,

components/src/components/atoms/Button/Button.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 
 import { P, match } from 'ts-pattern'
 
-import { scale, translateY } from '@/src/css/utils/common'
+import { scale } from '@/src/css/utils/common'
 
 import { removeNullishProps } from '@/src/utils/removeNullishProps'
 
@@ -12,7 +12,7 @@ import { getValueForSize } from './utils/getValueForSize'
 
 import type { ReactNodeNoStrings } from '../../../types'
 import { Spinner } from '../Spinner/Spinner'
-import type { BoxProps } from '../Box/Box'
+import type { AsProp, BoxProps } from '../Box/Box'
 import { Box } from '../Box/Box'
 import * as styles from './Button.css'
 import clsx from 'clsx'
@@ -31,15 +31,15 @@ type BaseProps = {
   /** If true, prevents user interaction with button. */
   disabled?: NativeButtonProps['disabled']
   /** Insert a ReactNode before the children */
-  prefix?: ReactNodeNoStrings
+  prefix?: AsProp
   /** Shows loading spinner inside button */
   loading?: boolean
   /** Constrains button to specific shape */
   shape?: 'rectangle' | 'square' | 'rounded' | 'circle'
   /** Sets dimensions and layout  */
   size?: Size
   /** Adds ReactNode after children */
-  suffix?: ReactNodeNoStrings
+  suffix?: AsProp
   /** The zIndex attribute for button element. */
   zIndex?: string
   /** If true, sets the style to indicate "on" state. Useful for toggles switches. */

components/src/components/molecules/Dropdown/Dropdown.tsx

@@ -10,17 +10,18 @@ import { breakpoints } from '@/src/tokens'
 
 import { modeVars } from '@/src/css/theme.css'
 
-import type { Color } from '@/src/interfaces/withColor'
+import type { Color } from '@/src/tokens/color'
 
 import { ActionSheet } from './ActionSheet'
-import type { BoxProps } from '../../atoms/Box/Box'
+import type { AsProp, BoxProps } from '../../atoms/Box/Box'
 import { Box } from '../../atoms/Box/Box'
 import type { PopoverProps } from '../../atoms/DynamicPopover/DynamicPopover'
 import { DynamicPopover } from '../../atoms/DynamicPopover/DynamicPopover'
 import { debounce } from '@/src/utils/debounce'
 import { DownChevronSVG } from '@/src/icons'
 import { ScrollBox } from '../../atoms/ScrollBox/ScrollBox'
-import { menu } from './styles.css'
+import * as styles from './styles.css'
+import { clsx } from 'clsx'
 
 type Align = 'left' | 'right'
 type LabelAlign = 'flex-start' | 'flex-end' | 'center'
@@ -30,7 +31,7 @@ export type DropdownItemObject = {
   label: string
   onClick?: (value?: string) => void
   wrapper?: (children: React.ReactNode, key: React.Key) => JSX.Element
-  icon?: React.ReactNode
+  icon?: AsProp
   value?: string
   color?: Color
   disabled?: boolean
@@ -89,12 +90,11 @@ type PropsWithoutIsOpen = {
   setIsOpen?: never
 }
 
-type NativeDivProps = React.HTMLAttributes<HTMLDivElement>
+type NativeDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'height' | 'width' | 'color'>
 
 type DropdownMenuProps = {
   items: DropdownItem[]
   setIsOpen: (isOpen: boolean) => void
-  width?: number | string
   shortThrow: boolean
   labelAlign?: LabelAlign
   direction: Direction
@@ -135,7 +135,7 @@ const DropdownMenuBox = React.forwardRef<
   return (
     <Box
       {...props}
-      className={menu({ transform: transformVariant })}
+      className={styles.menu({ transform: transformVariant })}
       backgroundColor="background"
       borderColor="border"
       borderRadius="2xLarge"
@@ -175,23 +175,23 @@ const DropdownMenuBox = React.forwardRef<
 
 interface MenuButtonProps {
   $color?: Colors
-  $icon?: React.ReactElement
+  $icon?: AsProp
   $showIndicator?: boolean | Colors
 }
 
 const MenuButton = React.forwardRef<HTMLElement, BoxProps & MenuButtonProps>(
-  ({ $color, $icon, $showIndicator, disabled, children, ...props }, ref) => (
+  ({ $color, $icon, $showIndicator, disabled, children, className, ...props }, ref) => (
     <Box
       {...props}
       alignItems="center"
       backgroundColor={{ base: 'backgroundPrimary', hover: 'greySurface' }}
       borderRadius="large"
       color={
-        disabled ? 'textTertiary' : $color ? $color : 'textPrimary'
+        disabled ? 'textDisabled' : $color ? $color : 'textPrimary'
       }
       cursor={disabled ? 'not-allowed' : 'pointer'}
       display="flex"
-      filter={{ base: 'brightness(1)', active: 'brightness(0.9)' }}
+      className={clsx(styles.menuButton, className)}
       fontWeight="normal"
       gap="2"
       height="12"
@@ -200,9 +200,7 @@ const MenuButton = React.forwardRef<HTMLElement, BoxProps & MenuButtonProps>(
       paddingRight={$showIndicator ? '6' : '3'}
       position="relative"
       ref={ref}
-      transform={{ base: 'translateY(0px)', active: 'translateY(0px)' }}
       transitionDuration={150}
-      // transitionProperty="color, transform, filter"
       transitionTimingFunction="ease-in-out"
       width="full"
     >
@@ -230,7 +228,7 @@ const MenuButton = React.forwardRef<HTMLElement, BoxProps & MenuButtonProps>(
           position="absolute"
           right="3"
           top="1/2"
-          transform="translateY(-50%)"
+          className={styles.menuButtonIndicator}
           wh="2"
         />
       )}
@@ -293,7 +291,7 @@ const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(
         href,
       } = item as DropdownItemObject
 
-      const props: React.ComponentProps<any> = {
+      const props = {
         $color: color,
         $showIndicator: showIndicator,
         $icon: icon,

components/src/components/molecules/Dropdown/styles.css.ts

@@ -1,7 +1,8 @@
-import { style, styleVariants } from '@vanilla-extract/css'
+import { style } from '@vanilla-extract/css'
 
 import { commonVars } from '@/src/css/theme.css'
 import { recipe } from '@vanilla-extract/recipes'
+import { brightness } from '@/src/css/utils/common'
 
 export const menu = recipe({
   base: {
@@ -28,6 +29,14 @@ export const menu = recipe({
   },
 })
 
+export const menuButton = style({
+  'filter': brightness(1),
+  'transitionProperty': 'color, transform, filter',
+  ':active': {
+    filter: brightness(0.9),
+  },
+})
+
 export const actionSheeItem = style({
   selectors: {
     '&:first-child': {
@@ -40,3 +49,7 @@ export const actionSheeItem = style({
     },
   },
 })
+
+export const menuButtonIndicator = style({
+  transform: 'translateY(-50%)',
+})

components/src/components/molecules/Input/Input.tsx

@@ -5,8 +5,6 @@ import { statusDot } from '@/src/css/recipes/statusDot.css'
 import { statusBorder } from '@/src/css/recipes/statusBorder.css'
 import { setNativeValue } from '@/src/utils/setNativeValue'
 
-import { scale } from '@/src/css/utils/common'
-
 import * as styles from './styles.css'
 
 import type { FieldBaseProps } from '../../atoms/Field/Field'
@@ -98,6 +96,8 @@ type BaseProps = Omit<FieldBaseProps, 'inline'> & {
   | 'onInput'
   | 'onKeyDown'
   | 'onWheel'
+  | 'height'
+  | 'color'
 >
 
 type WithTypeEmail = {
@@ -210,15 +210,13 @@ const ActionButton = ({
       color={{ base: 'greyPrimary', hover: 'greyBright' }}
       cursor="pointer"
       display="flex"
-      // flexBasis={getValueForSize($size, 'iconPadding')}
       flexGrow={0}
       flexShrink={0}
       justifyContent="flex-start"
-      // marginLeft={`calc(-1 * ${getValueForSize($size, 'iconPadding')})`}
       opacity="1"
-      // paddingRight={getValueForSize($size, 'outerPadding')}
-      transform={scale(1)}
-      transition="all 0.1s ease-in-out"
+      transitionDuration={100}
+      transitionProperty="all"
+      transitionTimingFunction="ease-in-out"
     >
       <Box
         as={Icon}
@@ -242,7 +240,7 @@ type InputComponentProps = {
   $iconWidth?: Space
 }
 
-const InputComponent = React.forwardRef<HTMLElement, BoxProps & InputComponentProps>(
+const InputComponent = React.forwardRef<HTMLInputElement, BoxProps & InputComponentProps>(
   (
     {
       $size,

components/src/components/molecules/Input/styles.css.ts

@@ -117,23 +117,27 @@ globalStyle(`${icon} svg`, {
   color: modeVars.color.greyPrimary,
 })
 
+const actionButtonBase = style({
+  transform: scale(1),
+})
+
 export const actionButton = styleVariants({
-  small: [sprinkles({
+  small: [actionButtonBase, sprinkles({
     flexBasis: '8.5',
     paddingRight: '3.5',
   }), { marginLeft: `calc(-1 * ${commonVars.space['8.5']})` }],
-  medium: [sprinkles({
+  medium: [actionButtonBase, sprinkles({
     flexBasis: '10',
     paddingRight: '4',
   }), { marginLeft: `calc(-1 * ${commonVars.space['10']})` }],
-  large: [
+  large: [actionButtonBase,
     sprinkles({
       flexBasis: '11',
       paddingRight: '4',
     }),
     { marginLeft: `calc(-1 * ${commonVars.space['11']})` },
   ],
-  extraLarge: [sprinkles({
+  extraLarge: [actionButtonBase, sprinkles({
     flexBasis: '14',
     paddingRight: '6',
   }), { marginLeft: `calc(-1 * ${commonVars.space['14']})` }],

components/src/components/molecules/Profile/Profile.tsx

@@ -17,6 +17,7 @@ import { Box } from '../../atoms/Box/Box'
 import { Typography } from '../../atoms/Typography/Typography'
 import * as styles from './styles.css'
 import clsx from 'clsx'
+import { assignInlineVars } from '@vanilla-extract/dynamic'
 export type Size = 'small' | 'medium' | 'large'
 
 type NativeDivProps = React.HTMLAttributes<HTMLDivElement>
@@ -51,31 +52,24 @@ const calculateWidth = (size: Size) => {
 }
 
 const Container = React.forwardRef<HTMLElement, BoxProps & ContainerProps>(
-  ({ $size, $hasDropdown, $open, className, ...props }, ref) => (
+  ({ $size, $hasDropdown, $open, className, style, ...props }, ref) => (
     <Box
       alignItems="center"
       backgroundColor={$open ? 'border' : 'backgroundPrimary'}
       borderRadius="full"
       cursor={$hasDropdown ? 'pointer' : 'unset'}
       display="flex"
-      filter={{
-        base: brightness(1),
-        hover: brightness($hasDropdown ? 1.05 : 1),
-      }}
       flexDirection="row"
       gap="2"
       justifyContent="flex-start"
       position="relative"
       ref={ref}
-      transform={{
-        base: translateY(0),
-        hover: translateY($hasDropdown ? -1 : 0),
-      }}
       transitionDuration={150}
       transitionTimingFunction="inOut"
       zIndex={10}
       {...props}
       className={clsx(styles.variants({ size: $size }), className)}
+      style={{ ...style, ...assignInlineVars({ [styles.hasDropdownBrightness]: brightness($hasDropdown ? 1.05 : 1) }), [styles.hasDropdownTransform]: translateY($hasDropdown ? -1 : 0) }}
     />
   ),
 )

components/src/components/molecules/Profile/styles.css.ts

@@ -1,9 +1,20 @@
 import { sprinkles } from '@/src/css/sprinkles.css'
+import { brightness, translateY } from '@/src/css/utils/common'
+import { createVar } from '@vanilla-extract/css'
 import { recipe } from '@vanilla-extract/recipes'
 
+export const hasDropdownBrightness = createVar()
+export const hasDropdownTransform = createVar()
+
 export const variants = recipe({
   base: {
-    transitionProperty: 'color, border-color, background-color, transform, filter',
+    'transitionProperty': 'color, border-color, background-color, transform, filter',
+    'filter': brightness(1),
+    'transform': translateY(0),
+    ':hover': {
+      filter: hasDropdownBrightness,
+      transform: hasDropdownTransform,
+    },
   },
   variants: {
     size: {

components/src/components/molecules/RadioButtonGroup/RadioButtonGroup.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import type { RadioButton } from '@/src/components/molecules'
+import type { RadioButton, RadioButtonProps } from '@/src/components/molecules'
 
 import { getTestId } from '../../../utils/utils'
 import { createSyntheticEvent } from '../../../utils/createSyntheticEvent'
@@ -102,7 +102,7 @@ export const RadioButtonGroup = React.forwardRef<HTMLDivElement, RadioButtonGrou
         role="radiogroup"
         onFocus={handleFocus}
       >
-        {React.Children.map(children as React.ReactElement<typeof RadioButton>[], (child) => {
+        {React.Children.map(children as unknown as React.ReactElement<RadioButtonProps>[], (child) => {
           if (child.props.checked && !didSetDefault) {
             setDidSetDefault(true)
             if (value !== child.props.value) {
@@ -114,6 +114,7 @@ export const RadioButtonGroup = React.forwardRef<HTMLDivElement, RadioButtonGrou
 
           const isChecked = child.props.value === value
 
+          // eslint-disable-next-line @eslint-react/no-clone-element
           return React.cloneElement(child, {
             ref: isChecked ? checkedRef : undefined,
             checked: isChecked,

components/src/components/molecules/Textarea/Textarea.tsx

@@ -119,6 +119,7 @@ const ActionButton = ({
   ...props
 }: BoxProps & { $size: Size, $icon: React.ReactNode }) => {
   const icon = React.isValidElement($icon) ? $icon : <CrossCircleSVG />
+
   return (
     <Box
       {...props}

components/src/components/organisms/Toast/Toast.tsx

@@ -185,10 +185,10 @@ export const TouchToast = ({
   setPopped,
   ...props
 }: ToastProps &
-InternalProps & {
-  popped: boolean
-  setPopped: (popped: boolean) => void
-}) => {
+  InternalProps & {
+    popped: boolean
+    setPopped: (popped: boolean) => void
+  }) => {
   const ref = React.useRef<HTMLDivElement>(null)
   const [calcTop, setCalcTop] = React.useState(0.025 * window.innerHeight)
   const [touches, setTouches] = React.useState<Array<number | undefined>>([])

components/src/tokens/border.ts

@@ -29,4 +29,5 @@ export const radii = {
   'input': '0.5rem',
   'card': '1rem',
   'checkbox': '0.25rem',
+  'unset': 'unset',
 }