@ceed/cds 1.13.4 → 1.14.0-next.2

package/dist/components/inputs/DatePicker.md

@@ -0,0 +1,67 @@
+# DatePicker
+
+## Introduction
+
+```tsx
+<DatePicker onChange={fn()} />
+```
+
+| Field           | Description | Default |
+| --------------- | ----------- | ------- |
+| size            | —           | —       |
+| name            | —           | —       |
+| required        | —           | —       |
+| format          | —           | —       |
+| displayFormat   | —           | —       |
+| label           | —           | —       |
+| helperText      | —           | —       |
+| error           | —           | —       |
+| inputReadOnly   | —           | —       |
+| readOnly        | —           | —       |
+| hideClearButton | —           | —       |
+| value           | —           | —       |
+| defaultValue    | —           | —       |
+| minDate         | —           | —       |
+| maxDate         | —           | —       |
+| disableFuture   | —           | —       |
+| disablePast     | —           | —       |
+
+### Sizes
+
+```tsx
+<Stack gap={2}>
+  <DatePicker {...args} size="sm" />
+  <DatePicker {...args} size="md" />
+  <DatePicker {...args} size="lg" />
+</Stack>
+```
+
+### WithLabel
+
+```tsx
+<DatePicker
+  onChange={fn()}
+  label="Date"
+/>
+```
+
+### WithHelperText
+
+```tsx
+<DatePicker
+  onChange={fn()}
+  label="Date"
+  helperText="Please select a date"
+/>
+```
+
+### Error
+
+```tsx
+<DatePicker
+  onChange={fn()}
+  label="Date"
+  helperText="Please select a date"
+  error
+/>
+```

package/dist/components/inputs/DateRangePicker.md

@@ -0,0 +1,55 @@
+# DateRangePicker
+
+## Introduction
+
+```tsx
+<DateRangePicker onChange={onChange} />
+```
+
+| Field           | Description | Default |
+| --------------- | ----------- | ------- |
+| name            | —           | —       |
+| value           | —           | —       |
+| defaultValue    | —           | —       |
+| disabled        | —           | —       |
+| required        | —           | —       |
+| label           | —           | —       |
+| error           | —           | —       |
+| helperText      | —           | —       |
+| minDate         | —           | —       |
+| maxDate         | —           | —       |
+| disableFuture   | —           | —       |
+| disablePast     | —           | —       |
+| format          | —           | —       |
+| displayFormat   | —           | —       |
+| inputReadOnly   | —           | —       |
+| hideClearButton | —           | —       |
+| size            | —           | —       |
+
+### Sizes
+
+```tsx
+<Stack gap={2}>
+  <DateRangePicker size="sm" />
+  <DateRangePicker size="md" />
+  <DateRangePicker size="lg" />
+</Stack>
+```
+
+### Disabled
+
+```tsx
+<DateRangePicker
+  onChange={onChange}
+  disabled
+/>
+```
+
+### WithLabel
+
+```tsx
+<DateRangePicker
+  onChange={onChange}
+  label="Date Range"
+/>
+```

package/dist/components/inputs/IconButton.md

@@ -0,0 +1,361 @@
+# IconButton
+
+## Introduction
+
+IconButton 컴포넌트는 아이콘만으로 구성된 버튼입니다. 공간 효율적이며, 직관적인 액션을 제공하는 UI 요소로 주로 툴바, 헤더, 카드 등에서 사용됩니다. 텍스트 없이도 의미를 전달할 수 있는 명확한 아이콘과 함께 사용하세요.
+
+```tsx
+<IconButton {...args} />
+```
+
+| Field    | Description | Default   |
+| -------- | ----------- | --------- |
+| children | 아이콘 요소      | \<Add />  |
+| color    | 버튼 색상       | "primary" |
+| variant  | 버튼 스타일 변형   | "solid"   |
+| size     | 버튼 크기       | "md"      |
+| disabled | 비활성화 상태     | —         |
+| loading  | 로딩 상태       | —         |
+
+## Usage
+
+```tsx
+import { IconButton } from '@ceed/cds';
+import AddIcon from '@mui/icons-material/Add';
+
+function MyComponent() {
+  return (
+    <div>
+      <IconButton onClick={() => console.log('clicked')}>
+        <AddIcon />
+      </IconButton>
+
+      <IconButton color="danger" onClick={() => console.log('delete')}>
+        <DeleteIcon />
+      </IconButton>
+
+      <IconButton disabled>
+        <EditIcon />
+      </IconButton>
+    </div>
+  );
+}
+```
+
+## Examples
+
+### Basic Usage
+
+기본적인 IconButton 사용법입니다.
+
+```tsx
+<div style={{
+  display: 'flex',
+  gap: '1rem',
+  alignItems: 'center'
+}}>
+<IconButton>
+  <Add />
+</IconButton>
+<IconButton>
+  <Edit />
+</IconButton>
+<IconButton>
+  <Delete />
+</IconButton>
+<IconButton>
+  <Settings />
+</IconButton>
+</div>
+```
+
+### Colors
+
+다양한 색상을 적용할 수 있습니다.
+
+```tsx
+<div style={{
+  display: 'flex',
+  gap: '1rem',
+  alignItems: 'center'
+}}>
+<IconButton color="primary">
+  <Add />
+</IconButton>
+<IconButton color="neutral">
+  <Edit />
+</IconButton>
+<IconButton color="danger">
+  <Delete />
+</IconButton>
+<IconButton color="success">
+  <FavoriteIcon />
+</IconButton>
+<IconButton color="warning">
+  <Settings />
+</IconButton>
+</div>
+```
+
+### Variants
+
+다양한 스타일 변형을 제공합니다.
+
+```tsx
+<div style={{
+  display: 'flex',
+  gap: '1rem',
+  alignItems: 'center'
+}}>
+<IconButton variant="solid">
+  <Add />
+</IconButton>
+<IconButton variant="soft">
+  <Add />
+</IconButton>
+<IconButton variant="outlined">
+  <Add />
+</IconButton>
+<IconButton variant="plain">
+  <Add />
+</IconButton>
+</div>
+```
+
+### Sizes
+
+크기를 조절할 수 있습니다.
+
+```tsx
+<div style={{
+  display: 'flex',
+  gap: '1rem',
+  alignItems: 'center'
+}}>
+<IconButton size="sm">
+  <Add />
+</IconButton>
+<IconButton size="md">
+  <Add />
+</IconButton>
+<IconButton size="lg">
+  <Add />
+</IconButton>
+</div>
+```
+
+### States
+
+다양한 상태를 표현할 수 있습니다.
+
+```tsx
+<div style={{
+  display: 'flex',
+  gap: '2rem',
+  alignItems: 'center'
+}}>
+<div>
+  <h4>Normal</h4>
+  <div style={{
+    display: 'flex',
+    gap: '1rem',
+    alignItems: 'center'
+  }}>
+  <IconButton>
+    <Add />
+  </IconButton>
+  <IconButton color="danger">
+    <Delete />
+  </IconButton>
+</div>
+</div>
+<div>
+  <h4>Disabled</h4>
+  <div style={{
+    display: 'flex',
+    gap: '1rem',
+    alignItems: 'center'
+  }}>
+  <IconButton disabled>
+    <Add />
+  </IconButton>
+  <IconButton disabled color="danger">
+    <Delete />
+  </IconButton>
+</div>
+</div>
+<div>
+  <h4>Loading</h4>
+  <div style={{
+    display: 'flex',
+    gap: '1rem',
+    alignItems: 'center'
+  }}>
+  <IconButton loading>
+    <Add />
+  </IconButton>
+  <IconButton loading color="danger">
+    <Delete />
+  </IconButton>
+</div>
+</div>
+</div>
+```
+
+### With Badge
+
+Badge와 함께 사용하여 알림 수나 상태를 표시할 수 있습니다.
+
+```tsx
+<div style={{
+  display: 'flex',
+  gap: '1rem',
+  alignItems: 'center'
+}}>
+<Badge badgeContent={4} color="danger">
+  <IconButton>
+    <Settings />
+  </IconButton>
+</Badge>
+<Badge badgeContent="99+" color="warning">
+  <IconButton color="neutral">
+    <MoreVertIcon />
+  </IconButton>
+</Badge>
+<Badge variant="solid" color="success">
+  <IconButton color="primary">
+    <FavoriteIcon />
+  </IconButton>
+</Badge>
+</div>
+```
+
+### With Tooltip
+
+Tooltip과 함께 사용하여 버튼의 기능을 설명할 수 있습니다.
+
+```tsx
+<div style={{
+  display: 'flex',
+  gap: '1rem',
+  alignItems: 'center'
+}}>
+<Tooltip title="새 항목 추가">
+  <IconButton>
+    <Add />
+  </IconButton>
+</Tooltip>
+<Tooltip title="편집">
+  <IconButton color="neutral">
+    <Edit />
+  </IconButton>
+</Tooltip>
+<Tooltip title="삭제">
+  <IconButton color="danger">
+    <Delete />
+  </IconButton>
+</Tooltip>
+<Tooltip title="공유">
+  <IconButton color="success">
+    <ShareIcon />
+  </IconButton>
+</Tooltip>
+</div>
+```
+
+### Action Buttons
+
+실제 액션을 수행하는 버튼들의 예제입니다.
+
+```tsx
+<div style={{
+  display: 'flex',
+  gap: '1rem',
+  alignItems: 'center'
+}}>
+<IconButton onClick={() => alert('Add clicked!')} title="Add new item">
+  <Add />
+</IconButton>
+<IconButton onClick={() => alert('Edit clicked!')} color="neutral" title="Edit item">
+  <Edit />
+</IconButton>
+<IconButton onClick={() => alert('Delete clicked!')} color="danger" title="Delete item">
+  <Delete />
+</IconButton>
+<IconButton onClick={() => alert('Share clicked!')} color="success" title="Share item">
+  <ShareIcon />
+</IconButton>
+<IconButton onClick={() => alert('Settings clicked!')} color="neutral" variant="outlined" title="Settings">
+  <Settings />
+</IconButton>
+</div>
+```
+
+## Common Use Cases
+
+### Toolbar Actions
+
+```tsx
+<div style={{ display: 'flex', gap: '0.5rem' }}>
+  <IconButton onClick={handleAdd} title="Add item">
+    <AddIcon />
+  </IconButton>
+  <IconButton onClick={handleEdit} color="neutral" title="Edit">
+    <EditIcon />
+  </IconButton>
+  <IconButton onClick={handleDelete} color="danger" title="Delete">
+    <DeleteIcon />
+  </IconButton>
+</div>
+```
+
+### Navigation
+
+```tsx
+<IconButton onClick={() => router.back()} variant="outlined">
+  <ArrowBackIcon />
+</IconButton>
+```
+
+### Settings & More Options
+
+```tsx
+<IconButton onClick={handleSettings} color="neutral">
+  <SettingsIcon />
+</IconButton>
+<IconButton onClick={handleMoreOptions}>
+  <MoreVertIcon />
+</IconButton>
+```
+
+### Social Actions
+
+```tsx
+<IconButton onClick={handleLike} color="danger">
+  <FavoriteIcon />
+</IconButton>
+<IconButton onClick={handleShare} color="primary">
+  <ShareIcon />
+</IconButton>
+```
+
+## Best Practices
+
+1. **명확한 아이콘**: 사용자가 쉽게 이해할 수 있는 명확하고 직관적인 아이콘을 사용하세요.
+
+2. **적절한 크기**: 터치 인터페이스를 고려하여 최소 44px 이상의 터치 영역을 확보하세요.
+
+3. **접근성**:
+   - `title` 속성이나 `aria-label`을 제공하여 스크린 리더 사용자를 위한 설명을 추가하세요.
+   - Tooltip과 함께 사용하여 기능을 명확히 설명하세요.
+
+4. **일관된 스타일**: 같은 맥락에서는 일관된 variant와 색상을 사용하세요.
+
+5. **의미 있는 색상**:
+   - 빨간색(danger): 삭제, 취소 등의 위험한 액션
+   - 초록색(success): 저장, 승인 등의 긍정적인 액션
+   - 회색(neutral): 일반적인 액션
+
+6. **피드백 제공**: 클릭 시 명확한 피드백을 제공하여 사용자가 액션이 실행되었음을 알 수 있도록 하세요.
+
+7. **로딩 상태**: 비동기 작업 시 `loading` prop을 사용하여 사용자에게 진행 상황을 알려주세요.