From 0f307e257e47b9edf84711c8144884f7d1319d45 Mon Sep 17 00:00:00 2001
From: joyce-foo <joycefooweiwen@gmail.com>
Date: Mon, 16 Dec 2024 18:08:20 +0800
Subject: [PATCH] Chore/add field styles for number input (#823)

* chore: add merge input styles for numberinput

* chore: update NumberINput stores

* chore: fix lint

* chore: remove merge as sx has higher priority
---
 packages/camp/src/NumberInput/NumberInput.stories.tsx | 6 ++++++
 packages/camp/src/NumberInput/NumberInput.tsx         | 9 ++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/camp/src/NumberInput/NumberInput.stories.tsx b/packages/camp/src/NumberInput/NumberInput.stories.tsx
index 86a52e8e..02d948f8 100644
--- a/packages/camp/src/NumberInput/NumberInput.stories.tsx
+++ b/packages/camp/src/NumberInput/NumberInput.stories.tsx
@@ -100,3 +100,9 @@ export const FormInput: StoryFn<NumberInputProps> = (args) => {
     </FormControl>
   )
 }
+
+export const InputStyles = Template.bind({})
+InputStyles.args = {
+  placeholder: 'Pass in input styles',
+  inputStyles: { bgColor: 'gray.100' },
+}
diff --git a/packages/camp/src/NumberInput/NumberInput.tsx b/packages/camp/src/NumberInput/NumberInput.tsx
index 9db09129..26cf122a 100644
--- a/packages/camp/src/NumberInput/NumberInput.tsx
+++ b/packages/camp/src/NumberInput/NumberInput.tsx
@@ -3,10 +3,10 @@ import { useRef } from 'react'
 import {
   Box,
   chakra,
-  ComponentWithAs as _,
   Divider,
   forwardRef,
   NumberInputProps as ChakraNumberInputProps,
+  SystemStyleObject,
   useFormControlProps,
   useMergeRefs,
   useMultiStyleConfig,
@@ -29,6 +29,11 @@ export interface NumberInputProps extends ChakraNumberInputProps {
    * Whether to show the increment and decrement steppers. Defaults to true.
    */
   showSteppers?: boolean
+
+  /**
+   * Merge styles for inner input field
+   */
+  inputStyles?: SystemStyleObject
 }
 
 export const NumberInput = forwardRef<NumberInputProps, 'input'>(
@@ -38,6 +43,7 @@ export const NumberInput = forwardRef<NumberInputProps, 'input'>(
       clampValueOnBlur = false,
       isSuccess,
       isPrefilled,
+      inputStyles,
       ...props
     },
     ref,
@@ -90,6 +96,7 @@ export const NumberInput = forwardRef<NumberInputProps, 'input'>(
           // is this input.
           ref={inputRef}
           __css={styles.field}
+          sx={inputStyles}
         />
         {showSteppers && (
           <Box __css={styles.stepperWrapper} ref={stepperWrapperRef}>