From 4b23cd67c4467a2e0779de9985325e020b1a28e7 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Fri, 8 Aug 2025 14:30:01 +0900
Subject: [PATCH 1/9] Init Stepper comp

---
 packages/components/src/components/Stepper/Stepper.stories.tsx | 0
 .../src/components/Stepper/__tests__/index.browser.test.tsx    | 0
 packages/components/src/components/Stepper/index.tsx           | 3 +++
 3 files changed, 3 insertions(+)
 create mode 100644 packages/components/src/components/Stepper/Stepper.stories.tsx
 create mode 100644 packages/components/src/components/Stepper/__tests__/index.browser.test.tsx
 create mode 100644 packages/components/src/components/Stepper/index.tsx

diff --git a/packages/components/src/components/Stepper/Stepper.stories.tsx b/packages/components/src/components/Stepper/Stepper.stories.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/components/src/components/Stepper/__tests__/index.browser.test.tsx b/packages/components/src/components/Stepper/__tests__/index.browser.test.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/components/src/components/Stepper/index.tsx b/packages/components/src/components/Stepper/index.tsx
new file mode 100644
index 00000000..5c77c34d
--- /dev/null
+++ b/packages/components/src/components/Stepper/index.tsx
@@ -0,0 +1,3 @@
+export function Stepper() {
+  return <></>
+}

From ed6203cf1ceceb9754fbbc1b670c0152818684ff Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Fri, 8 Aug 2025 15:35:38 +0900
Subject: [PATCH 2/9] Add Stepper story

---
 .../components/Stepper/Stepper.stories.tsx    | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/packages/components/src/components/Stepper/Stepper.stories.tsx b/packages/components/src/components/Stepper/Stepper.stories.tsx
index e69de29b..49b69513 100644
--- a/packages/components/src/components/Stepper/Stepper.stories.tsx
+++ b/packages/components/src/components/Stepper/Stepper.stories.tsx
@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Stepper } from './index'
+
+type Story = StoryObj<typeof meta>
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof Stepper> = {
+  title: 'Devfive/Stepper',
+  component: Stepper,
+  decorators: [
+    (Story) => (
+      <div style={{ padding: '10px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const Default: Story = {
+  args: {
+    value: 1,
+  },
+}
+
+export default meta

From 9dc782881d813290fb9b3f337134f417dbf07fc7 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Fri, 8 Aug 2025 15:58:51 +0900
Subject: [PATCH 3/9] Add Stepper

---
 .../src/components/Stepper/index.tsx          | 167 +++++++++++++++++-
 1 file changed, 165 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/Stepper/index.tsx b/packages/components/src/components/Stepper/index.tsx
index 5c77c34d..2b435d87 100644
--- a/packages/components/src/components/Stepper/index.tsx
+++ b/packages/components/src/components/Stepper/index.tsx
@@ -1,3 +1,166 @@
-export function Stepper() {
-  return <></>
+'use client'
+
+import { css, Flex, Text } from '@devup-ui/react'
+import clsx from 'clsx'
+import { ChangeEvent, useState } from 'react'
+
+import { Button } from '../Button'
+import { Input } from '../Input'
+
+type InputProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  | 'value'
+  | 'onChange'
+  | 'defaultValue'
+  | 'checked'
+  | 'defaultChecked'
+  | 'min'
+  | 'max'
+> & {
+  type?: 'text' | 'input'
+  value?: number
+  onChange?: (value: number) => void
+  defaultValue?: number
+  min?: number | null
+  max?: number | null
+  classNames?: {
+    button?: string
+    container?: string
+    input?: string
+  }
+  styles?: {
+    button?: React.CSSProperties
+    container?: React.CSSProperties
+    input?: React.CSSProperties
+  }
+}
+
+function valid(min: number | null, max: number | null, inp: number): boolean {
+  return !((max !== null && inp > max) || (min !== null && inp < min))
+}
+
+export function Stepper({
+  className,
+  classNames,
+  type = 'input',
+  value,
+  onChange,
+  defaultValue,
+  min = 0,
+  max = 100,
+  disabled = false,
+  styles,
+  ...props
+}: InputProps) {
+  const [internalValue, setInternalValue] = useState(value ?? defaultValue ?? 0)
+  const resultValue = value ?? internalValue
+  function handleChange(_value: number) {
+    onChange?.(_value)
+    setInternalValue(_value)
+  }
+  function handleInputChange(event: ChangeEvent<HTMLInputElement>) {
+    if (!event.target.value.length) {
+      const _value =
+        min !== null && min > 0 ? min : max !== null && max < 0 ? max : 0
+      handleChange(_value)
+      return
+    }
+    const _value = parseInt(event.target.value)
+    if (!valid(min, max, _value)) {
+      return
+    }
+    handleChange(_value)
+  }
+
+  const handleClick = (type: 'add' | 'sub') => {
+    const targetValue = resultValue + (type === 'sub' ? -1 : 1)
+    handleChange(targetValue)
+  }
+
+  return (
+    <Flex
+      alignItems="center"
+      aria-disabled={disabled}
+      gap={5}
+      selectors={{ '&, & *': { boxSizing: 'border-box' } }}
+    >
+      <Button
+        className={clsx(
+          css({
+            boxSize: '28px',
+            p: 0,
+            borderRadius: 1,
+            fontSize: '18px',
+            fontWeight: 500,
+            styleOrder: 2,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }),
+          classNames?.button,
+        )}
+        disabled={disabled || resultValue === min}
+        onClick={() => handleClick('sub')}
+        style={styles?.button}
+      >
+        -
+      </Button>
+      {type === 'text' && (
+        <Text className={className} fontSize="14px">
+          {resultValue}
+        </Text>
+      )}
+      <Input
+        className={clsx(
+          css({
+            textAlign: 'center',
+            color: '$text',
+            p: 0,
+            _placeholder: { fontSize: ['13px', null, '14px'] },
+            _invalid: {
+              borderColor: '$error',
+            },
+            selectors: {
+              '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+                display: 'none',
+              },
+            },
+            styleOrder: 2,
+          }),
+          classNames?.input,
+        )}
+        data-value={resultValue.toString()}
+        disabled={disabled}
+        onChange={handleInputChange}
+        readOnly={type === 'text'}
+        style={{
+          display: type === 'text' ? 'none' : 'block',
+        }}
+        type="number"
+        {...props}
+        value={resultValue.toString()}
+      />
+      <Button
+        className={clsx(
+          css({
+            boxSize: '28px',
+            p: 0,
+            borderRadius: 1,
+            fontSize: '18px',
+            fontWeight: 500,
+            styleOrder: 2,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }),
+          classNames?.button,
+        )}
+        disabled={disabled || resultValue === max}
+        onClick={() => handleClick('add')}
+        style={styles?.button}
+      >
+        +
+      </Button>
+    </Flex>
+  )
 }

From 890e7ab5bd646cb88d644a87ae29b515504f363d Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Fri, 8 Aug 2025 17:30:45 +0900
Subject: [PATCH 4/9] Fix Stepper

---
 .../src/components/Stepper/IconMinus.tsx      |  21 ++
 .../src/components/Stepper/IconPlus.tsx       |  19 ++
 .../components/Stepper/Stepper.stories.tsx    |  21 +-
 .../src/components/Stepper/index.tsx          | 303 ++++++++++--------
 4 files changed, 219 insertions(+), 145 deletions(-)
 create mode 100644 packages/components/src/components/Stepper/IconMinus.tsx
 create mode 100644 packages/components/src/components/Stepper/IconPlus.tsx

diff --git a/packages/components/src/components/Stepper/IconMinus.tsx b/packages/components/src/components/Stepper/IconMinus.tsx
new file mode 100644
index 00000000..e533ea5a
--- /dev/null
+++ b/packages/components/src/components/Stepper/IconMinus.tsx
@@ -0,0 +1,21 @@
+import { SVGProps } from 'react'
+
+export function IconMinus({ ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill="none"
+      height="28"
+      viewBox="0 0 28 28"
+      width="28"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        d="M9 14C9 13.4477 9.3731 13 9.83333 13H18.1667C18.6269 13 19 13.4477 19 14C19 14.5523 18.6269 15 18.1667 15H9.83333C9.3731 15 9 14.5523 9 14Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}
diff --git a/packages/components/src/components/Stepper/IconPlus.tsx b/packages/components/src/components/Stepper/IconPlus.tsx
new file mode 100644
index 00000000..1d08f99c
--- /dev/null
+++ b/packages/components/src/components/Stepper/IconPlus.tsx
@@ -0,0 +1,19 @@
+import { SVGProps } from 'react'
+
+export function IconPlus({ ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill="none"
+      height="28"
+      viewBox="0 0 28 28"
+      width="28"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M14.8333 9.83333C14.8333 9.3731 14.4602 9 14 9C13.5397 9 13.1666 9.3731 13.1666 9.83333V13.1667H9.8333C9.37307 13.1667 8.99997 13.5398 8.99997 14C8.99997 14.4602 9.37307 14.8333 9.8333 14.8333H13.1666V18.1667C13.1666 18.6269 13.5397 19 14 19C14.4602 19 14.8333 18.6269 14.8333 18.1667V14.8333H18.1666C18.6269 14.8333 19 14.4602 19 14C19 13.5398 18.6269 13.1667 18.1666 13.1667H14.8333V9.83333Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/packages/components/src/components/Stepper/Stepper.stories.tsx b/packages/components/src/components/Stepper/Stepper.stories.tsx
index 49b69513..772f6f4d 100644
--- a/packages/components/src/components/Stepper/Stepper.stories.tsx
+++ b/packages/components/src/components/Stepper/Stepper.stories.tsx
@@ -1,6 +1,12 @@
 import { Meta, StoryObj } from '@storybook/react-vite'
 
-import { Stepper } from './index'
+import {
+  Stepper,
+  StepperContainer,
+  StepperDecreaseButton,
+  StepperIncreaseButton,
+  StepperInput,
+} from './index'
 
 type Story = StoryObj<typeof meta>
 
@@ -18,9 +24,16 @@ const meta: Meta<typeof Stepper> = {
 }
 
 export const Default: Story = {
-  args: {
-    value: 1,
-  },
+  args: {},
+  render: (args) => (
+    <Stepper {...args}>
+      <StepperContainer>
+        <StepperDecreaseButton />
+        <StepperInput editable={false} />
+        <StepperIncreaseButton />
+      </StepperContainer>
+    </Stepper>
+  ),
 }
 
 export default meta
diff --git a/packages/components/src/components/Stepper/index.tsx b/packages/components/src/components/Stepper/index.tsx
index 2b435d87..b337e77d 100644
--- a/packages/components/src/components/Stepper/index.tsx
+++ b/packages/components/src/components/Stepper/index.tsx
@@ -1,166 +1,187 @@
 'use client'
 
-import { css, Flex, Text } from '@devup-ui/react'
+import { css, Flex } from '@devup-ui/react'
 import clsx from 'clsx'
-import { ChangeEvent, useState } from 'react'
+import { ComponentProps, createContext, useContext, useState } from 'react'
 
 import { Button } from '../Button'
 import { Input } from '../Input'
+import { IconMinus } from './IconMinus'
+import { IconPlus } from './IconPlus'
 
-type InputProps = Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  | 'value'
-  | 'onChange'
-  | 'defaultValue'
-  | 'checked'
-  | 'defaultChecked'
-  | 'min'
-  | 'max'
-> & {
-  type?: 'text' | 'input'
-  value?: number
-  onChange?: (value: number) => void
-  defaultValue?: number
-  min?: number | null
-  max?: number | null
-  classNames?: {
-    button?: string
-    container?: string
-    input?: string
-  }
-  styles?: {
-    button?: React.CSSProperties
-    container?: React.CSSProperties
-    input?: React.CSSProperties
+type StepperContextType = {
+  value: number
+  setValue: (value: number) => void
+  min: number
+  max: number
+}
+
+const StepperContext = createContext<StepperContextType | null>(null)
+
+export const useStepper = () => {
+  const context = useContext(StepperContext)
+  if (!context) {
+    throw new Error('useStepper must be used within a StepperProvider')
   }
+  return context
 }
 
-function valid(min: number | null, max: number | null, inp: number): boolean {
-  return !((max !== null && inp > max) || (min !== null && inp < min))
+type StepperProps = {
+  children: React.ReactNode
+  defaultValue: number
+  value: number
+  onValueChange: (value: number) => void
+  min?: number
+  max?: number
 }
 
-export function Stepper({
-  className,
-  classNames,
-  type = 'input',
-  value,
-  onChange,
+function Stepper({
+  children,
   defaultValue,
+  value: valueProp,
+  onValueChange,
   min = 0,
   max = 100,
-  disabled = false,
-  styles,
-  ...props
-}: InputProps) {
-  const [internalValue, setInternalValue] = useState(value ?? defaultValue ?? 0)
-  const resultValue = value ?? internalValue
-  function handleChange(_value: number) {
-    onChange?.(_value)
-    setInternalValue(_value)
-  }
-  function handleInputChange(event: ChangeEvent<HTMLInputElement>) {
-    if (!event.target.value.length) {
-      const _value =
-        min !== null && min > 0 ? min : max !== null && max < 0 ? max : 0
-      handleChange(_value)
-      return
-    }
-    const _value = parseInt(event.target.value)
-    if (!valid(min, max, _value)) {
+}: StepperProps) {
+  const [value, setValue] = useState(defaultValue ?? 0)
+
+  const handleChange = (nextValue: number) => {
+    const sanitized = Math.min(Math.max(nextValue, min), max)
+    if (onValueChange) {
+      onValueChange(sanitized)
       return
     }
-    handleChange(_value)
+    setValue(sanitized)
   }
 
-  const handleClick = (type: 'add' | 'sub') => {
-    const targetValue = resultValue + (type === 'sub' ? -1 : 1)
-    handleChange(targetValue)
-  }
+  return (
+    <StepperContext.Provider
+      value={{ value: valueProp ?? value, setValue: handleChange, min, max }}
+    >
+      {children}
+    </StepperContext.Provider>
+  )
+}
 
+function StepperContainer(props: ComponentProps<'div'>) {
+  return <Flex alignItems="center" gap="20px" styleOrder={1} {...props} />
+}
+
+function StepperDecreaseButton({ ...props }: ComponentProps<typeof Button>) {
+  const { value, setValue, min } = useStepper()
+  const disabled = value <= min
   return (
-    <Flex
-      alignItems="center"
-      aria-disabled={disabled}
-      gap={5}
-      selectors={{ '&, & *': { boxSizing: 'border-box' } }}
+    <Button
+      aria-label="Decrease value"
+      className={css({
+        p: '0',
+        boxSize: '28px',
+        borderRadius: '4px',
+        selectors: {
+          '&>div>div': {},
+        },
+      })}
+      disabled={disabled}
+      onClick={() => setValue(value - 1)}
+      {...props}
     >
-      <Button
-        className={clsx(
-          css({
-            boxSize: '28px',
-            p: 0,
-            borderRadius: 1,
-            fontSize: '18px',
-            fontWeight: 500,
-            styleOrder: 2,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }),
-          classNames?.button,
-        )}
-        disabled={disabled || resultValue === min}
-        onClick={() => handleClick('sub')}
-        style={styles?.button}
-      >
-        -
-      </Button>
-      {type === 'text' && (
-        <Text className={className} fontSize="14px">
-          {resultValue}
-        </Text>
-      )}
-      <Input
-        className={clsx(
-          css({
-            textAlign: 'center',
-            color: '$text',
-            p: 0,
-            _placeholder: { fontSize: ['13px', null, '14px'] },
-            _invalid: {
-              borderColor: '$error',
-            },
-            selectors: {
-              '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
-                display: 'none',
-              },
-            },
-            styleOrder: 2,
-          }),
-          classNames?.input,
-        )}
-        data-value={resultValue.toString()}
-        disabled={disabled}
-        onChange={handleInputChange}
-        readOnly={type === 'text'}
-        style={{
-          display: type === 'text' ? 'none' : 'block',
-        }}
-        type="number"
-        {...props}
-        value={resultValue.toString()}
+      <IconMinus
+        className={css({
+          color: disabled
+            ? 'var(--base10, light-dark(#0000001A,#FFFFFF1A))'
+            : 'var(--text, light-dark(#272727, #F6F6F6))',
+        })}
       />
-      <Button
-        className={clsx(
-          css({
-            boxSize: '28px',
-            p: 0,
-            borderRadius: 1,
-            fontSize: '18px',
-            fontWeight: 500,
-            styleOrder: 2,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }),
-          classNames?.button,
-        )}
-        disabled={disabled || resultValue === max}
-        onClick={() => handleClick('add')}
-        style={styles?.button}
-      >
-        +
-      </Button>
-    </Flex>
+    </Button>
   )
 }
+
+function StepperIncreaseButton({ ...props }: ComponentProps<typeof Button>) {
+  const { value, setValue, max } = useStepper()
+  const disabled = value >= max
+  return (
+    <Button
+      aria-label="Increase value"
+      className={css({
+        p: '0',
+        boxSize: '28px',
+        borderRadius: '4px',
+        selectors: {
+          '&>div>div': {},
+        },
+      })}
+      disabled={disabled}
+      onClick={() => setValue(value + 1)}
+      {...props}
+    >
+      <IconPlus
+        className={css({
+          color: disabled
+            ? 'var(--base10, light-dark(#0000001A,#FFFFFF1A))'
+            : 'var(--text, light-dark(#272727, #F6F6F6))',
+        })}
+      />
+    </Button>
+  )
+}
+
+interface StepperInputProps extends ComponentProps<typeof Input> {
+  editable?: boolean
+}
+
+function StepperInput({
+  editable = true,
+  className,
+  ...props
+}: StepperInputProps) {
+  const { value, setValue } = useStepper()
+  const notEditableClass = css({
+    p: '0',
+    border: 'none',
+    w: 'fit-content',
+    h: 'fit-content',
+    styleOrder: 3,
+  })
+
+  const Comp = editable ? Input : 'div'
+
+  return (
+    <Comp
+      allowClear={false}
+      className={clsx(
+        css({
+          styleOrder: 2,
+          w: '80px',
+          h: '50px',
+          textAlign: 'center',
+          py: '10px',
+          px: '12px',
+          borderRadius: '6px',
+          selectors: {
+            '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+              display: 'none',
+            },
+          },
+        }),
+        !editable && notEditableClass,
+        className,
+      )}
+      dangerouslySetInnerHTML={
+        editable ? undefined : { __html: Number(value).toString() }
+      }
+      onChange={(e) => setValue(Number(e.target.value))}
+      readOnly={!editable}
+      type="number"
+      value={value}
+      {...props}
+    />
+  )
+}
+
+export {
+  Stepper,
+  StepperContainer,
+  StepperDecreaseButton,
+  StepperIncreaseButton,
+  StepperInput,
+}

From f125cadd78d52e81a6ce97624383a6115fb7c0df Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Fri, 8 Aug 2025 17:32:13 +0900
Subject: [PATCH 5/9] Fix Stepper prop types

---
 packages/components/src/components/Stepper/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/components/Stepper/index.tsx b/packages/components/src/components/Stepper/index.tsx
index b337e77d..b0b62396 100644
--- a/packages/components/src/components/Stepper/index.tsx
+++ b/packages/components/src/components/Stepper/index.tsx
@@ -27,10 +27,10 @@ export const useStepper = () => {
 }
 
 type StepperProps = {
-  children: React.ReactNode
-  defaultValue: number
-  value: number
-  onValueChange: (value: number) => void
+  children?: React.ReactNode
+  defaultValue?: number
+  value?: number
+  onValueChange?: (value: number) => void
   min?: number
   max?: number
 }

From 507326949a0d5cd218acd03161935025db6391a7 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Fri, 8 Aug 2025 17:49:10 +0900
Subject: [PATCH 6/9] Export Stepper

---
 packages/components/src/__tests__/index.browser.test.ts | 1 +
 packages/components/src/index.ts                        | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/components/src/__tests__/index.browser.test.ts b/packages/components/src/__tests__/index.browser.test.ts
index e19fbb2f..483b8f2c 100644
--- a/packages/components/src/__tests__/index.browser.test.ts
+++ b/packages/components/src/__tests__/index.browser.test.ts
@@ -4,6 +4,7 @@ describe('export', () => {
     expect({ ...index }).toEqual({
       Button: expect.any(Function),
       Input: expect.any(Function),
+      Stepper: expect.any(Function),
     })
   })
 })
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 819f4919..d7d1663e 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -1,2 +1,3 @@
 export { Button } from './components/Button'
 export { Input } from './components/Input'
+export { Stepper } from './components/Stepper'

From 3fc373c261da494588724ae76cda49f75c2d8fc3 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Fri, 8 Aug 2025 17:49:18 +0900
Subject: [PATCH 7/9] Add test cases

---
 .../__snapshots__/index.browser.test.tsx.snap |  79 ++++++++++++++
 .../Stepper/__tests__/index.browser.test.tsx  | 103 ++++++++++++++++++
 .../src/components/Stepper/index.tsx          |   6 +-
 3 files changed, 186 insertions(+), 2 deletions(-)
 create mode 100644 packages/components/src/components/Stepper/__tests__/__snapshots__/index.browser.test.tsx.snap

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
new file mode 100644
index 00000000..045b35b7
--- /dev/null
+++ b/packages/components/src/components/Stepper/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -0,0 +1,79 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Stepper > should render 1`] = `
+<div>
+  <div
+    class="display-0-flex--0 align-items-0-center--1 gap-0-20px--1 "
+  >
+    <button
+      aria-disabled="true"
+      aria-label="Decrease button"
+      class="padding-0-0--255 height-0-28px--255 width-0-28px--255 border-radius-0-4px--255 outline-0-2px solid-17005923944751620165-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-var(--text,#272727)-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 background-color-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 border-color-0-var(--border,#E4E4E4)-14172363753176421546-1 outline-color-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 border-color-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 background-color-0-#47474A-878116160589243838-1 border-color-0-transparent-878116160589243838-1 border-color-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outline-color-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 border-radius-0-10px--1 color-0-var(--text,#272727)--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--.02em--1 letter-spacing-4--.03em--1 padding-right-0-16px--1 padding-left-0-16px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 "
+      disabled=""
+      type="button"
+    >
+      <div
+        class="max-width-0-100%--255 margin-right-0-auto--255 margin-left-0-auto--255 position-0-relative--255 width-0-fit-content--255"
+      >
+        <div
+          class=" line-height-0-1.2--255 min-height-0-1.2em--255 "
+        >
+          <svg
+            class="color-0-var(--base10,light-dark(#0000001A,#FFFFFF1A))--255"
+            fill="none"
+            height="28"
+            viewBox="0 0 28 28"
+            width="28"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M9 14C9 13.4477 9.3731 13 9.83333 13H18.1667C18.6269 13 19 13.4477 19 14C19 14.5523 18.6269 15 18.1667 15H9.83333C9.3731 15 9 14.5523 9 14Z"
+              fill="currentColor"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </div>
+      </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"
+    >
+      0
+    </div>
+    <button
+      aria-disabled="false"
+      aria-label="Increase button"
+      class="padding-0-0--255 height-0-28px--255 width-0-28px--255 border-radius-0-4px--255 outline-0-2px solid-17005923944751620165-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-var(--text,#272727)-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 background-color-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 border-color-0-var(--border,#E4E4E4)-14172363753176421546-1 outline-color-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 border-color-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 background-color-0-#47474A-878116160589243838-1 border-color-0-transparent-878116160589243838-1 border-color-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outline-color-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 border-radius-0-10px--1 color-0-var(--text,#272727)--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--.02em--1 letter-spacing-4--.03em--1 padding-right-0-16px--1 padding-left-0-16px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 "
+      type="button"
+    >
+      <div
+        class="max-width-0-100%--255 margin-right-0-auto--255 margin-left-0-auto--255 position-0-relative--255 width-0-fit-content--255"
+      >
+        <div
+          class=" line-height-0-1.2--255 min-height-0-1.2em--255 "
+        >
+          <svg
+            class="color-0-var(--text,light-dark(#272727,#F6F6F6))--255"
+            fill="none"
+            height="28"
+            viewBox="0 0 28 28"
+            width="28"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M14.8333 9.83333C14.8333 9.3731 14.4602 9 14 9C13.5397 9 13.1666 9.3731 13.1666 9.83333V13.1667H9.8333C9.37307 13.1667 8.99997 13.5398 8.99997 14C8.99997 14.4602 9.37307 14.8333 9.8333 14.8333H13.1666V18.1667C13.1666 18.6269 13.5397 19 14 19C14.4602 19 14.8333 18.6269 14.8333 18.1667V14.8333H18.1666C18.6269 14.8333 19 14.4602 19 14C19 13.5398 18.6269 13.1667 18.1666 13.1667H14.8333V9.83333Z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+      </div>
+    </button>
+  </div>
+</div>
+`;
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 e69de29b..8c1b62e0 100644
--- a/packages/components/src/components/Stepper/__tests__/index.browser.test.tsx
+++ b/packages/components/src/components/Stepper/__tests__/index.browser.test.tsx
@@ -0,0 +1,103 @@
+import { fireEvent, render } from '@testing-library/react'
+
+import {
+  Stepper,
+  StepperContainer,
+  StepperDecreaseButton,
+  StepperIncreaseButton,
+  StepperInput,
+} from '..'
+
+describe('Stepper', () => {
+  it('should render', () => {
+    const { container } = render(
+      <Stepper>
+        <StepperContainer>
+          <StepperDecreaseButton />
+          <StepperInput editable={false} />
+          <StepperIncreaseButton />
+        </StepperContainer>
+      </Stepper>,
+    )
+    expect(container).toMatchSnapshot()
+  })
+
+  it('should throw error if children are used outside of StepperProvider', () => {
+    expect(() => {
+      render(<StepperInput editable={false} />)
+    }).toThrow('useStepper must be used within a StepperProvider')
+  })
+
+  it('should call onValueChange when value is changed', () => {
+    const onValueChange = vi.fn()
+    const { container } = render(
+      <Stepper onValueChange={onValueChange}>
+        <StepperInput />
+      </Stepper>,
+    )
+    const input = container.querySelector('[aria-label="Stepper value"]')
+    fireEvent.change(input!, { target: { value: '10' } })
+    expect(onValueChange).toHaveBeenCalledWith(10)
+  })
+
+  it('should change inner value when onValueChange is not provided', () => {
+    const { container } = render(
+      <Stepper>
+        <StepperInput />
+      </Stepper>,
+    )
+    const input = container.querySelector('[aria-label="Stepper value"]')
+    fireEvent.change(input!, { target: { value: '10' } })
+    expect(input).toHaveAttribute('data-value', '10')
+  })
+
+  it('should have disabled decrease button when value is at min', () => {
+    const { container } = render(
+      <Stepper>
+        <StepperDecreaseButton />
+        <StepperInput />
+        <StepperIncreaseButton />
+      </Stepper>,
+    )
+    const decreaseButton = container.querySelector(
+      '[aria-label="Decrease button"] svg',
+    )
+    fireEvent.change(container.querySelector('[aria-label="Stepper value"]')!, {
+      target: { value: '0' },
+    })
+    expect(decreaseButton).toHaveClass(
+      'color-0-var(--base10,light-dark(#0000001A,#FFFFFF1A))--255',
+    )
+  })
+
+  it('should have disabled increase button when value is at max', () => {
+    const { container } = render(
+      <Stepper>
+        <StepperDecreaseButton />
+        <StepperInput />
+        <StepperIncreaseButton />
+      </Stepper>,
+    )
+    const increaseButton = container.querySelector(
+      '[aria-label="Increase button"] svg',
+    )
+    fireEvent.change(container.querySelector('[aria-label="Stepper value"]')!, {
+      target: { value: '100' },
+    })
+    expect(increaseButton).toHaveClass(
+      'color-0-var(--base10,light-dark(#0000001A,#FFFFFF1A))--255',
+    )
+  })
+
+  it('should export components', async () => {
+    const index = await import('../index')
+    expect({ ...index }).toEqual({
+      Stepper: expect.any(Function),
+      StepperContainer: expect.any(Function),
+      StepperDecreaseButton: expect.any(Function),
+      StepperIncreaseButton: expect.any(Function),
+      StepperInput: expect.any(Function),
+      useStepper: expect.any(Function),
+    })
+  })
+})
diff --git a/packages/components/src/components/Stepper/index.tsx b/packages/components/src/components/Stepper/index.tsx
index b0b62396..f7f427bf 100644
--- a/packages/components/src/components/Stepper/index.tsx
+++ b/packages/components/src/components/Stepper/index.tsx
@@ -72,7 +72,7 @@ function StepperDecreaseButton({ ...props }: ComponentProps<typeof Button>) {
   const disabled = value <= min
   return (
     <Button
-      aria-label="Decrease value"
+      aria-label="Decrease button"
       className={css({
         p: '0',
         boxSize: '28px',
@@ -101,7 +101,7 @@ function StepperIncreaseButton({ ...props }: ComponentProps<typeof Button>) {
   const disabled = value >= max
   return (
     <Button
-      aria-label="Increase value"
+      aria-label="Increase button"
       className={css({
         p: '0',
         boxSize: '28px',
@@ -148,6 +148,7 @@ function StepperInput({
   return (
     <Comp
       allowClear={false}
+      aria-label="Stepper value"
       className={clsx(
         css({
           styleOrder: 2,
@@ -169,6 +170,7 @@ function StepperInput({
       dangerouslySetInnerHTML={
         editable ? undefined : { __html: Number(value).toString() }
       }
+      data-value={value}
       onChange={(e) => setValue(Number(e.target.value))}
       readOnly={!editable}
       type="number"

From 39b49eac2458b81f79bee7950cb0d9e8f75ef0d2 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Mon, 11 Aug 2025 20:05:52 +0900
Subject: [PATCH 8/9] Add test case

---
 .../Stepper/__tests__/index.browser.test.tsx  | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

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 8c1b62e0..ffaa03b2 100644
--- a/packages/components/src/components/Stepper/__tests__/index.browser.test.tsx
+++ b/packages/components/src/components/Stepper/__tests__/index.browser.test.tsx
@@ -100,4 +100,38 @@ describe('Stepper', () => {
       useStepper: expect.any(Function),
     })
   })
+
+  it('should increase value when increase button is clicked', () => {
+    const { container } = render(
+      <Stepper>
+        <StepperDecreaseButton />
+        <StepperInput />
+        <StepperIncreaseButton />
+      </Stepper>,
+    )
+    const increaseButton = container.querySelector(
+      '[aria-label="Increase button"]',
+    )
+    fireEvent.click(increaseButton!)
+    expect(
+      container.querySelector('[aria-label="Stepper value"]'),
+    ).toHaveAttribute('data-value', '1')
+  })
+
+  it('should decrease value when decrease button is clicked', () => {
+    const { container } = render(
+      <Stepper defaultValue={1}>
+        <StepperDecreaseButton />
+        <StepperInput />
+        <StepperIncreaseButton />
+      </Stepper>,
+    )
+    const decreaseButton = container.querySelector(
+      '[aria-label="Decrease button"]',
+    )
+    fireEvent.click(decreaseButton!)
+    expect(
+      container.querySelector('[aria-label="Stepper value"]'),
+    ).toHaveAttribute('data-value', '0')
+  })
 })

From 6948495917dcd0c60cb7a76acafcd95f5bafaa93 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Mon, 11 Aug 2025 20:25:23 +0900
Subject: [PATCH 9/9] Run changeset

---
 .changeset/free-bats-create.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/free-bats-create.md

diff --git a/.changeset/free-bats-create.md b/.changeset/free-bats-create.md
new file mode 100644
index 00000000..0c921be7
--- /dev/null
+++ b/.changeset/free-bats-create.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/components": patch
+---
+
+Add Stepper component