From 39099e38267e873ff6f81d33a2b1ba118f386cec Mon Sep 17 00:00:00 2001
From: hdy <35fwangdo@gmail.com>
Date: Fri, 12 Sep 2025 11:35:39 +0900
Subject: [PATCH 1/5] feat(label): Add scaffold of label

---
 .../components/src/components/Label/index.tsx | 27 +++++++++++++++++++
 packages/react/src/types/props/index.ts       |  1 -
 2 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 packages/components/src/components/Label/index.tsx

diff --git a/packages/components/src/components/Label/index.tsx b/packages/components/src/components/Label/index.tsx
new file mode 100644
index 00000000..01bac5a7
--- /dev/null
+++ b/packages/components/src/components/Label/index.tsx
@@ -0,0 +1,27 @@
+import {
+    Box, 
+    Button as DevupButton,
+    Text as DevupText, 
+    Center,
+    css, 
+    type DevupThemeTypography
+} from '@devup-ui/react'
+import { clsx } from 'clsx'
+
+type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
+    // our custom properties. 
+}
+
+const lableTextEllipsis = css({
+    // TODO 
+})
+
+export function Label({
+    // TODO 
+}: LabelProps): React.ReactElement {
+    return (
+        <DevupText>
+            TODO 
+        </DevupText>
+    )
+}
\ No newline at end of file
diff --git a/packages/react/src/types/props/index.ts b/packages/react/src/types/props/index.ts
index cb245892..dda80aa5 100644
--- a/packages/react/src/types/props/index.ts
+++ b/packages/react/src/types/props/index.ts
@@ -1,5 +1,4 @@
 import type { Properties } from 'csstype'
-
 import type { ResponsiveValue } from '../responsive-value'
 import type { Merge } from '../utils'
 import type { DevupUiBackgroundProps } from './background'

From cd417c7721b897598ffd6d777783031860c5e27f Mon Sep 17 00:00:00 2001
From: hdy <35fwangdo@gmail.com>
Date: Fri, 12 Sep 2025 11:37:09 +0900
Subject: [PATCH 2/5] chore

---
 packages/react/src/types/props/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react/src/types/props/index.ts b/packages/react/src/types/props/index.ts
index dda80aa5..cb245892 100644
--- a/packages/react/src/types/props/index.ts
+++ b/packages/react/src/types/props/index.ts
@@ -1,4 +1,5 @@
 import type { Properties } from 'csstype'
+
 import type { ResponsiveValue } from '../responsive-value'
 import type { Merge } from '../utils'
 import type { DevupUiBackgroundProps } from './background'

From fbb8c35e718f9700e4dc6474df5d91a5af7b69d2 Mon Sep 17 00:00:00 2001
From: hdy <35fwangdo@gmail.com>
Date: Fri, 12 Sep 2025 13:49:56 +0900
Subject: [PATCH 3/5] chore(label): Add storybook

---
 .../src/components/Button/index.tsx           |  2 +-
 .../src/components/Label/Label.stories.tsx    | 28 +++++++
 .../components/src/components/Label/index.tsx | 76 ++++++++++++++-----
 3 files changed, 84 insertions(+), 22 deletions(-)
 create mode 100644 packages/components/src/components/Label/Label.stories.tsx

diff --git a/packages/components/src/components/Button/index.tsx b/packages/components/src/components/Button/index.tsx
index 299555b5..c65edbf8 100644
--- a/packages/components/src/components/Button/index.tsx
+++ b/packages/components/src/components/Button/index.tsx
@@ -7,7 +7,7 @@ import {
 } from '@devup-ui/react'
 import { clsx } from 'clsx'
 
-type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'default'
   colors?: {
     primary?: string
diff --git a/packages/components/src/components/Label/Label.stories.tsx b/packages/components/src/components/Label/Label.stories.tsx
new file mode 100644
index 00000000..3abc00ea
--- /dev/null
+++ b/packages/components/src/components/Label/Label.stories.tsx
@@ -0,0 +1,28 @@
+import { css } from '@devup-ui/react'
+import { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { Label } from './index' 
+
+type Story = StoryObj<typeof meta>
+
+// use the same blueprint with button.
+const meta: Meta<typeof Label> = {
+    title: 'Devfive/Label', 
+    component: Label, 
+    decorators: [
+        (Story) => (
+            <div style={{ padding: '10px'}}>
+                <Story />
+            </div>
+        )
+    ]
+}
+
+export const Default: Story = {
+    args: {
+        children: 'Label Text',
+        disabled: false,  
+    }
+}
+
+export default meta;
\ No newline at end of file
diff --git a/packages/components/src/components/Label/index.tsx b/packages/components/src/components/Label/index.tsx
index 01bac5a7..bf995ba4 100644
--- a/packages/components/src/components/Label/index.tsx
+++ b/packages/components/src/components/Label/index.tsx
@@ -1,27 +1,61 @@
-import {
-    Box, 
-    Button as DevupButton,
-    Text as DevupText, 
-    Center,
-    css, 
-    type DevupThemeTypography
-} from '@devup-ui/react'
+import { type DevupThemeTypography, Text as DevupText } from '@devup-ui/react'
 import { clsx } from 'clsx'
 
-type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
-    // our custom properties. 
+interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  // our custom properties.
+  colors?: {
+    text?: string
+    error?: string
+    disabled?: string
+  }
+  typography?: keyof DevupThemeTypography
+  ellipsis?: boolean
+  required?: boolean
+  disabled?: boolean
+  tooltip?: string
 }
 
-const lableTextEllipsis = css({
-    // TODO 
-})
-
 export function Label({
-    // TODO 
+  form,
+  htmlFor,
+  colors,
+  typography,
+  ellipsis = false,
+  required = false,
+  disabled = false,
+  tooltip,
+  children,
+  className,
+  ...props
 }: LabelProps): React.ReactElement {
-    return (
-        <DevupText>
-            TODO 
-        </DevupText>
-    )
-}
\ No newline at end of file
+  return (
+    <DevupText
+      as="label"
+      className={clsx(ellipsis, className)}
+      color={
+        disabled
+          ? colors?.disabled || '#999'
+          : colors?.error || colors?.text || 'inherit'
+      }
+      cursor={disabled ? 'not-allowed' : 'default'}
+      form={form}
+      htmlFor={htmlFor}
+      opacity={disabled ? 0.6 : 1}
+      styleVars={{
+        text: colors?.text,
+        error: colors?.error,
+        disabled: colors?.disabled,
+      }}
+      title={tooltip}
+      typography={typography}
+      {...props}
+    >
+      {children}
+      {required && (
+        <span style={{ color: colors?.error || 'red', marginLeft: '2px' }}>
+          *
+        </span>
+      )}
+    </DevupText>
+  )
+}

From ada408b70857f9896119322582bb0d5b04787652 Mon Sep 17 00:00:00 2001
From: hdy <fwangdo35@gmail.com>
Date: Fri, 12 Sep 2025 15:30:18 +0900
Subject: [PATCH 4/5] chore(README): Add how to contribute in korean

---
 README_ko.md                                        | 11 +++++++++++
 packages/components/src/components/Button/index.tsx |  1 +
 2 files changed, 12 insertions(+)

diff --git a/README_ko.md b/README_ko.md
index 900e52e5..90a5d9f3 100644
--- a/README_ko.md
+++ b/README_ko.md
@@ -144,3 +144,14 @@ const box = <Box _hover={{bg: ["red", "blue"]}}/>
 // Same
 const box = <Box _hover={[{bg: "red"}, {bg: "blue"}]}/>
 ```
+
+## 기여 방법 
+
+rust compiler는 설치되어있다고 가정합니다.
+```sh
+pnpm i
+pnpm build
+cargo install cargo-tarpaulin
+cargo install wasm-pack
+```
+설치 후 `pnpm test` 실행하여 문제가 없는지 확인합니다.
\ No newline at end of file
diff --git a/packages/components/src/components/Button/index.tsx b/packages/components/src/components/Button/index.tsx
index c65edbf8..4115cc1a 100644
--- a/packages/components/src/components/Button/index.tsx
+++ b/packages/components/src/components/Button/index.tsx
@@ -105,6 +105,7 @@ export function Button({
           },
         }[variant]
       }
+      // Q. how to use dark theme?
       _themeDark={{
         _active: {
           primary: {

From 41ef0b0010557186ed7ede83b6c0a975fb090285 Mon Sep 17 00:00:00 2001
From: hdy <fwangdo35@gmail.com>
Date: Fri, 12 Sep 2025 15:36:23 +0900
Subject: [PATCH 5/5] chore(README): Add how to contribute in Korean and
 English both

---
 README.md    | 16 ++++++++++++++++
 README_ko.md | 11 ++++++++---
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index ff8cfbe4..71f42573 100644
--- a/README.md
+++ b/README.md
@@ -150,3 +150,19 @@ const box = <Box _hover={{bg: ["red", "blue"]}}/>
 // Same
 const box = <Box _hover={[{bg: "red"}, {bg: "blue"}]}/>
 ```
+
+## How to Contribute
+
+### Requirements
+- Rust compiler installed
+- pnpm package manager installed
+
+### Development Setup
+To set up the development environment, install the following packages:
+```sh
+pnpm i
+pnpm build
+cargo install cargo-tarpaulin
+cargo install wasm-pack
+```
+After installation, run pnpm test to ensure everything works correctly.
\ No newline at end of file
diff --git a/README_ko.md b/README_ko.md
index 90a5d9f3..5bacbeee 100644
--- a/README_ko.md
+++ b/README_ko.md
@@ -145,13 +145,18 @@ const box = <Box _hover={{bg: ["red", "blue"]}}/>
 const box = <Box _hover={[{bg: "red"}, {bg: "blue"}]}/>
 ```
 
-## 기여 방법 
+## 기여 방법
 
-rust compiler는 설치되어있다고 가정합니다.
+### 요구 사항
+- Rust 컴파일러 설치
+- pnpm 패키지 매니저 설치
+
+### 개발용 설치
+개발 환경을 위해 아래 패키지들을 설치합니다.
 ```sh
 pnpm i
 pnpm build
 cargo install cargo-tarpaulin
 cargo install wasm-pack
 ```
-설치 후 `pnpm test` 실행하여 문제가 없는지 확인합니다.
\ No newline at end of file
+설치 후 pnpm test를 실행하여 문제가 없는지 확인합니다.
\ No newline at end of file