From 363ce1ff4d7df4e6c5a9e1a0135214672f5fdd79 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Tue, 12 Aug 2025 14:49:40 +0900
Subject: [PATCH 1/5] Add type prop to Stepper

---
 .../components/Stepper/Stepper.stories.tsx    |  2 +-
 .../__snapshots__/index.browser.test.tsx.snap | 15 ++++++-------
 .../Stepper/__tests__/index.browser.test.tsx  | 11 ++++++++++
 .../src/components/Stepper/index.tsx          | 21 ++++++++++++-------
 4 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/packages/components/src/components/Stepper/Stepper.stories.tsx b/packages/components/src/components/Stepper/Stepper.stories.tsx
index 772f6f4d..9d77535b 100644
--- a/packages/components/src/components/Stepper/Stepper.stories.tsx
+++ b/packages/components/src/components/Stepper/Stepper.stories.tsx
@@ -29,7 +29,7 @@ export const Default: Story = {
     <Stepper {...args}>
       <StepperContainer>
         <StepperDecreaseButton />
-        <StepperInput editable={false} />
+        <StepperInput />
         <StepperIncreaseButton />
       </StepperContainer>
     </Stepper>
diff --git a/packages/components/src/components/Stepper/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Stepper/__tests__/__snapshots__/index.browser.test.tsx.snap
index 045b35b7..07a91280 100644
--- a/packages/components/src/components/Stepper/__tests__/__snapshots__/index.browser.test.tsx.snap
+++ b/packages/components/src/components/Stepper/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -37,14 +37,15 @@ exports[`Stepper > should render 1`] = `
       </div>
     </button>
     <div
-      aria-label="Stepper value"
-      class="width-0-80px--2 height-0-50px--2 text-align-0-center--2 padding-bottom-0-10px--2 padding-top-0-10px--2 padding-right-0-12px--2 padding-left-0-12px--2 border-radius-0-6px--2 display-0-none-1599573265477977541-2 padding-0-0--3 border-0-none--3 width-0-fit-content--3 height-0-fit-content--3"
-      data-value="0"
-      readonly=""
-      type="number"
-      value="0"
+      class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
     >
-      0
+      <input
+        aria-label="Stepper value"
+        class="width-0-80px--2 height-0-50px--2 text-align-0-center--2 padding-bottom-0-10px--2 padding-top-0-10px--2 padding-right-0-12px--2 padding-left-0-12px--2 border-radius-0-6px--2 display-0-none-1599573265477977541-2 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-7704306251139592248-1 background-0-var(--inputDisabledBg,light-dark(#F0F0F3,#414244))-14172363753176421546-1 border-0-1px solid var(--border,light-dark(#E4E4E4,#434343))-14172363753176421546-1 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-14172363753176421546-1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-16231282139879731451-1 outline-0-none-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-8380715471663921674-1 color-0-var(--inputPlaceholder,light-dark(#A9A8AB,#CBCBCB))-15878565022192187906-1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 transition-0-all .1s ease-in-out--1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))--1 padding-left-0-12px--1 padding-right-0-12px--1 "
+        data-value="0"
+        type="number"
+        value="0"
+      />
     </div>
     <button
       aria-disabled="false"
diff --git a/packages/components/src/components/Stepper/__tests__/index.browser.test.tsx b/packages/components/src/components/Stepper/__tests__/index.browser.test.tsx
index ffaa03b2..3e9335b0 100644
--- a/packages/components/src/components/Stepper/__tests__/index.browser.test.tsx
+++ b/packages/components/src/components/Stepper/__tests__/index.browser.test.tsx
@@ -51,6 +51,17 @@ describe('Stepper', () => {
     expect(input).toHaveAttribute('data-value', '10')
   })
 
+  it('should not change inner value by clicking the number when type is text', () => {
+    const { container } = render(
+      <Stepper type="text">
+        <StepperInput />
+      </Stepper>,
+    )
+    const input = container.querySelector('[aria-label="Stepper value"]')
+    expect(input?.nodeName).toBe('DIV')
+    expect(input).toHaveAttribute('data-value', '0')
+  })
+
   it('should have disabled decrease button when value is at min', () => {
     const { container } = render(
       <Stepper>
diff --git a/packages/components/src/components/Stepper/index.tsx b/packages/components/src/components/Stepper/index.tsx
index bcfb81d7..15a4c484 100644
--- a/packages/components/src/components/Stepper/index.tsx
+++ b/packages/components/src/components/Stepper/index.tsx
@@ -14,6 +14,7 @@ type StepperContextType = {
   setValue: (value: number) => void
   min: number
   max: number
+  type: 'input' | 'text'
 }
 
 const StepperContext = createContext<StepperContextType | null>(null)
@@ -33,6 +34,7 @@ type StepperProps = {
   onValueChange?: (value: number) => void
   min?: number
   max?: number
+  type?: 'input' | 'text'
 }
 
 function Stepper({
@@ -42,6 +44,7 @@ function Stepper({
   onValueChange,
   min = 0,
   max = 100,
+  type = 'input',
 }: StepperProps) {
   const [value, setValue] = useState(defaultValue ?? 0)
 
@@ -56,7 +59,13 @@ function Stepper({
 
   return (
     <StepperContext.Provider
-      value={{ value: valueProp ?? value, setValue: handleChange, min, max }}
+      value={{
+        value: valueProp ?? value,
+        setValue: handleChange,
+        min,
+        max,
+        type,
+      }}
     >
       {children}
     </StepperContext.Provider>
@@ -126,12 +135,8 @@ interface StepperInputProps extends ComponentProps<typeof Input> {
   editable?: boolean
 }
 
-function StepperInput({
-  editable = true,
-  className,
-  ...props
-}: StepperInputProps) {
-  const { value, setValue } = useStepper()
+function StepperInput({ className, ...props }: StepperInputProps) {
+  const { value, setValue, type } = useStepper()
   const notEditableClass = css({
     p: '0',
     border: 'none',
@@ -139,7 +144,7 @@ function StepperInput({
     h: 'fit-content',
     styleOrder: 3,
   })
-
+  const editable = type === 'input'
   const Comp = editable ? Input : 'div'
 
   return (

From 4e71b0e591946e84e9e40195773902e69e83c847 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Tue, 12 Aug 2025 14:52:20 +0900
Subject: [PATCH 2/5] Fix Input error display

---
 packages/components/src/components/Input/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/Input/index.tsx b/packages/components/src/components/Input/index.tsx
index e848e367..5d12ceee 100644
--- a/packages/components/src/components/Input/index.tsx
+++ b/packages/components/src/components/Input/index.tsx
@@ -146,7 +146,7 @@ export function Input({
         {...props}
       />
       {clearButtonVisible && <ClearButton onClick={handleClear} />}
-      {errorMessage && (
+      {error && errorMessage && (
         <Text
           aria-label="error-message"
           bottom="-8px"

From e7b4c07e629b16633a22b9fea3fdc6e8b3b5fd20 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Tue, 12 Aug 2025 14:54:44 +0900
Subject: [PATCH 3/5] Add confirmButtonText prop

---
 packages/components/src/components/Select/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx
index 0390aaa3..1420bed7 100644
--- a/packages/components/src/components/Select/index.tsx
+++ b/packages/components/src/components/Select/index.tsx
@@ -193,10 +193,12 @@ export function SelectTrigger({
 
 interface SelectContainerProps extends ComponentProps<'div'> {
   showConfirmButton?: boolean
+  confirmButtonText?: string
 }
 export function SelectContainer({
   children,
   showConfirmButton,
+  confirmButtonText = '완료',
   ...props
 }: SelectContainerProps) {
   const { open, setOpen, type } = useSelect()
@@ -238,7 +240,7 @@ export function SelectContainer({
             onClick={() => setOpen(false)}
             variant="primary"
           >
-            완료
+            {confirmButtonText}
           </Button>
         </Flex>
       )}

From ef9f2f6bfd5972ba45376e7120bc62885245c2d7 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Tue, 12 Aug 2025 15:22:25 +0900
Subject: [PATCH 4/5] Fix disabled checkbox color in Select

---
 .../__snapshots__/index.browser.test.tsx.snap |  2 +-
 .../Input/__tests__/index.browser.test.tsx    |  3 ++-
 .../src/components/Select/IconCheck.tsx       |  1 -
 .../src/components/Select/Select.stories.tsx  |  2 +-
 .../Select/__tests__/index.browser.test.tsx   | 19 +++++++++++++++++++
 .../src/components/Select/index.tsx           | 17 +++++++++++++----
 6 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/components/Input/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Input/__tests__/__snapshots__/index.browser.test.tsx.snap
index 69300a8e..40c27c14 100644
--- a/packages/components/src/components/Input/__tests__/__snapshots__/index.browser.test.tsx.snap
+++ b/packages/components/src/components/Input/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -63,7 +63,7 @@ exports[`Input > should pass className prop to error message component 1`] = `
   >
     <input
       aria-label="input"
-      class=" color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-7704306251139592248-1 background-0-var(--inputDisabledBg,light-dark(#F0F0F3,#414244))-14172363753176421546-1 border-0-1px solid var(--border,light-dark(#E4E4E4,#434343))-14172363753176421546-1 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-14172363753176421546-1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-16231282139879731451-1 outline-0-none-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-8380715471663921674-1 color-0-var(--inputPlaceholder,light-dark(#A9A8AB,#CBCBCB))-15878565022192187906-1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 transition-0-all .1s ease-in-out--1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))--1 padding-left-0-12px--1 padding-right-0-36px--1 "
+      class=" color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-7704306251139592248-1 background-0-var(--inputDisabledBg,light-dark(#F0F0F3,#414244))-14172363753176421546-1 border-0-1px solid var(--border,light-dark(#E4E4E4,#434343))-14172363753176421546-1 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-14172363753176421546-1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-16231282139879731451-1 outline-0-none-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-8380715471663921674-1 color-0-var(--inputPlaceholder,light-dark(#A9A8AB,#CBCBCB))-15878565022192187906-1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 transition-0-all .1s ease-in-out--1 border-color-0-var(--error,light-dark(#D52B2E,#FF5B5E))--1 padding-left-0-12px--1 padding-right-0-36px--1 "
       value=""
     />
     <span
diff --git a/packages/components/src/components/Input/__tests__/index.browser.test.tsx b/packages/components/src/components/Input/__tests__/index.browser.test.tsx
index 63a8dee8..f965069b 100644
--- a/packages/components/src/components/Input/__tests__/index.browser.test.tsx
+++ b/packages/components/src/components/Input/__tests__/index.browser.test.tsx
@@ -72,7 +72,7 @@ describe('Input', () => {
   })
 
   it('should be able to render with error message', () => {
-    const { container } = render(<Input errorMessage="Error message" />)
+    const { container } = render(<Input error errorMessage="Error message" />)
     expect(
       container.querySelector('[aria-label="error-message"]'),
     ).toBeInTheDocument()
@@ -110,6 +110,7 @@ describe('Input', () => {
         classNames={{
           errorMessage: 'error-message',
         }}
+        error
         errorMessage="Error message"
       />,
     )
diff --git a/packages/components/src/components/Select/IconCheck.tsx b/packages/components/src/components/Select/IconCheck.tsx
index fd2e2395..3c4e183b 100644
--- a/packages/components/src/components/Select/IconCheck.tsx
+++ b/packages/components/src/components/Select/IconCheck.tsx
@@ -3,7 +3,6 @@ import { ComponentProps } from 'react'
 export function IconCheck({ ...props }: ComponentProps<'svg'>) {
   return (
     <svg
-      color="white"
       fill="none"
       height="10"
       viewBox="0 0 12 10"
diff --git a/packages/components/src/components/Select/Select.stories.tsx b/packages/components/src/components/Select/Select.stories.tsx
index 7f6e0064..fd8dfa1a 100644
--- a/packages/components/src/components/Select/Select.stories.tsx
+++ b/packages/components/src/components/Select/Select.stories.tsx
@@ -49,7 +49,7 @@ function DefaultComponent(
   props: Omit<ComponentProps<typeof Select>, 'children'>,
 ) {
   return (
-    <Select {...props} onValueChange={() => {}}>
+    <Select {...props} defaultValue={['Option 1']} onValueChange={() => {}}>
       <SelectTrigger>Select</SelectTrigger>
       <SelectContainer>
         <SelectOption disabled value="Option 1">
diff --git a/packages/components/src/components/Select/__tests__/index.browser.test.tsx b/packages/components/src/components/Select/__tests__/index.browser.test.tsx
index 48b28e19..3fd9c35d 100644
--- a/packages/components/src/components/Select/__tests__/index.browser.test.tsx
+++ b/packages/components/src/components/Select/__tests__/index.browser.test.tsx
@@ -260,6 +260,25 @@ describe('Select', () => {
     })
   })
 
+  it('should have disabled check color when type is checkbox and the option is disabled', () => {
+    const { container } = render(
+      <Select defaultValue={['Option 1']} type="checkbox">
+        <SelectTrigger>Select</SelectTrigger>
+        <SelectContainer>
+          <SelectOption disabled value="Option 1">
+            Option 1
+          </SelectOption>
+        </SelectContainer>
+      </Select>,
+    )
+    const selectToggle = container.querySelector('[aria-label="Select toggle"]')
+    fireEvent.click(selectToggle!)
+    const option1 = container.querySelector('[data-value="Option 1"]')
+    expect(option1?.querySelector('svg')).toHaveClass(
+      'color-0-var(--inputDisabledText,light-dark(#E5E5E5,#373737))--255',
+    )
+  })
+
   it('should show confirm button when type is checkbox and showConfirmButton is true', () => {
     const { container } = render(
       <Select type="checkbox">
diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx
index 1420bed7..1aa50543 100644
--- a/packages/components/src/components/Select/index.tsx
+++ b/packages/components/src/components/Select/index.tsx
@@ -50,6 +50,8 @@ interface SelectProps extends ComponentProps<'div'> {
     primary?: string
     border?: string
     inputBackground?: string
+    inputDisabledBackground?: string
+    inputDisabledText?: string
     base10?: string
     title?: string
     selectDisabled?: string
@@ -134,6 +136,8 @@ export function Select({
           title: colors?.title,
           selectDisabled: colors?.selectDisabled,
           primaryBg: colors?.primaryBg,
+          inputDisabledBackground: colors?.inputDisabledBackground,
+          inputDisabledText: colors?.inputDisabledText,
         }}
         typography={typography}
         {...props}
@@ -302,7 +306,7 @@ export function SelectOption({
         }
       }
       alignItems="center"
-      borderRadius="8px"
+      borderRadius="6px"
       color={
         disabled
           ? 'var(--selectDisabled, light-dark(#C4C5D1, #45464D))'
@@ -332,9 +336,11 @@ export function SelectOption({
           checkbox: (
             <Box
               bg={
-                isSelected
-                  ? 'var(--primary, light-dark(#674DC7, #8163E1)'
-                  : 'var(--border, light-dark(#E4E4E4, #434343))'
+                disabled
+                  ? 'var(--inputDisabledBackground, light-dark(#F0F0F3, #414244))'
+                  : isSelected
+                    ? 'var(--primary, light-dark(#674DC7, #8163E1)'
+                    : 'var(--border, light-dark(#E4E4E4, #434343))'
               }
               borderRadius="4px"
               boxSize="18px"
@@ -344,6 +350,9 @@ export function SelectOption({
               {isSelected && (
                 <IconCheck
                   className={css({
+                    color: disabled
+                      ? 'var(--inputDisabledText, light-dark(#E5E5E5, #373737))'
+                      : '#FFF',
                     position: 'absolute',
                     top: '55%',
                     left: '50%',

From 0ef7821f502540bff913252a0ac0fe87f50324af Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Tue, 12 Aug 2025 15:24:42 +0900
Subject: [PATCH 5/5] Run changeset

---
 .changeset/rotten-bananas-send.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/rotten-bananas-send.md

diff --git a/.changeset/rotten-bananas-send.md b/.changeset/rotten-bananas-send.md
new file mode 100644
index 00000000..ba368ef9
--- /dev/null
+++ b/.changeset/rotten-bananas-send.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/components": patch
+---
+
+Fix Input, Select, Stepper