web/packages/design-system/lib/components/Stepper/index.tsx

import { IconButton } from '../IconButton'
import { MaterialIcon } from '../Icons/MaterialIcon'
import { Tooltip } from '../Tooltip'
import { Typography } from '../Typography'

import styles from './stepper.module.css'

type StepperProps = {
  count: number
  handleOnIncrease: () => void
  handleOnDecrease: () => void
  disableIncrease: boolean
  disableDecrease: boolean
  disabledMessage?: string
}

export default function Stepper({
  count,
  handleOnIncrease,
  handleOnDecrease,
  disableIncrease,
  disableDecrease,
  disabledMessage,
}: StepperProps) {
  return (
    <div className={styles.counterContainer}>
      <IconButton
        className={styles.counterBtn}
        onPress={handleOnDecrease}
        variant="Elevated"
        isDisabled={disableDecrease}
      >
        <MaterialIcon icon="remove" color="CurrentColor" />
      </IconButton>
      <div className={styles.countDisplay}>
        <Typography variant="Body/Paragraph/mdRegular">
          <p>{count}</p>
        </Typography>
      </div>
      <Tooltip
        text={disabledMessage}
        isVisible={Boolean(disabledMessage && disableIncrease)}
        position="top"
        arrow="right"
        isTouchable
      >
        <IconButton
          className={styles.counterBtn}
          onPress={handleOnIncrease}
          variant="Elevated"
          isDisabled={disableIncrease}
        >
          <MaterialIcon icon="add" color="CurrentColor" />
        </IconButton>
      </Tooltip>
    </div>
  )
}