@ceed/cds 1.29.0 → 1.29.1

package/dist/components/feedback/Alert.md

@@ -2,7 +2,7 @@
 
 ## Introduction
 
-Alert 컴포넌트는 사용자에게 중요한 정보, 성공 메시지, 경고, 오류 등을 전달하는 피드백 컴포넌트입니다. Joy UI의 Alert를 기반으로 하며, 다양한 색상과 변형을 통해 메시지의 중요도와 성격을 시각적으로 구분할 수 있습니다. 시스템 알림, 폼 검증 결과, 작업 완료 상태 등을 사용자에게 명확하게 전달하는 데 사용됩니다.
+The Alert component is a feedback component used to communicate important information, success messages, warnings, errors, and more to users. It is based on Joy UI Alert and uses a variety of colors and variants to visually distinguish the importance and nature of a message. It is used to clearly communicate system notifications, form validation results, task completion states, and similar feedback.
 
 ```tsx
 <Alert
@@ -30,10 +30,10 @@ import { Alert } from '@ceed/cds';
 function MyComponent() {
   return (
     <div>
-      {/* 기본 알림 */}
+      {/* Basic alert */}
       <Alert content="이것은 기본 알림입니다." />
 
-      {/* 성공 메시지 */}
+      {/* Success message */}
       <Alert
         color="success"
         title="저장 완료"
@@ -41,7 +41,7 @@ function MyComponent() {
         startDecorator={<CheckCircleIcon />}
       />
 
-      {/* 오류 메시지 */}
+      {/* Error message */}
       <Alert
         color="danger"
         title="오류 발생"
@@ -58,7 +58,7 @@ function MyComponent() {
 
 ### Basic Usage
 
-가장 기본적인 Alert 사용법입니다.
+The most basic Alert usage.
 
 ```tsx
 <Alert
@@ -69,7 +69,7 @@ function MyComponent() {
 
 ### Colors
 
-다양한 색상을 통해 메시지의 성격을 구분할 수 있습니다.
+You can distinguish message types through various colors.
 
 ```tsx
 <div style={{
@@ -124,15 +124,15 @@ function MyComponent() {
 </div>
 ```
 
-- **primary**: 일반적인 정보 메시지
-- **success**: 성공, 완료 메시지
-- **warning**: 주의, 경고 메시지
-- **danger**: 오류, 위험 메시지
-- **neutral**: 중립적인 메시지
+- **primary**: General informational message
+- **success**: Success or completion message
+- **warning**: Caution or warning message
+- **danger**: Error or risk message
+- **neutral**: Neutral message
 
 ### With Start Decorator
 
-아이콘이나 다른 요소를 메시지 앞에 추가할 수 있습니다.
+You can add an icon or another element before the message.
 
 ```tsx
 <Alert
@@ -144,7 +144,7 @@ function MyComponent() {
 
 ### With Title
 
-제목을 추가하여 메시지를 구조화할 수 있습니다.
+You can structure the message by adding a title.
 
 ```tsx
 <Alert
@@ -156,7 +156,7 @@ function MyComponent() {
 
 ### With Actions
 
-사용자가 수행할 수 있는 액션을 추가할 수 있습니다.
+You can add actions the user can take.
 
 ```tsx
 <Alert
@@ -168,7 +168,7 @@ function MyComponent() {
 
 ### Complete Alert
 
-모든 요소를 포함한 완전한 Alert입니다.
+A complete Alert containing all elements.
 
 ```tsx
 <Alert
@@ -184,7 +184,7 @@ function MyComponent() {
 
 ### Form Validation
 
-폼 검증 결과를 표시할 때 사용합니다.
+Used to display form validation results.
 
 ```tsx
 function LoginForm() {
@@ -218,9 +218,17 @@ function LoginForm() {
         />
       )}
 
-      {success && <Alert color="success" content="로그인이 완료되었습니다." startDecorator={<CheckCircleIcon />} />}
+      {success && (
+        <Alert
+          color="success"
+          content="로그인이 완료되었습니다."
+          startDecorator={<CheckCircleIcon />}
+        />
+      )}
 
-      <form onSubmit={handleSubmit}>{/* 폼 필드들 */}</form>
+      <form onSubmit={handleSubmit}>
+        {/* Form fields */}
+      </form>
     </Stack>
   );
 }
@@ -228,7 +236,7 @@ function LoginForm() {
 
 ### System Notifications
 
-시스템 상태나 알림을 표시할 때 사용합니다.
+Used to display system status or notifications.
 
 ```tsx
 function SystemStatus() {
@@ -276,7 +284,7 @@ function SystemStatus() {
 
 ### Data Processing Status
 
-데이터 처리 상태를 보여줄 때 사용합니다.
+Used to display data processing status.
 
 ```tsx
 function DataProcessingStatus({ status, progress, onCancel, onRetry }) {
@@ -288,18 +296,14 @@ function DataProcessingStatus({ status, progress, onCancel, onRetry }) {
           title: '데이터 처리 중',
           content: `진행률: ${progress}%`,
           startDecorator: <CircularProgress size="sm" />,
-          actions: (
-            <Button size="sm" onClick={onCancel}>
-              취소
-            </Button>
-          ),
+          actions: <Button size="sm" onClick={onCancel}>취소</Button>
         };
       case 'completed':
         return {
           color: 'success',
           title: '처리 완료',
           content: '모든 데이터가 성공적으로 처리되었습니다.',
-          startDecorator: <CheckCircleIcon />,
+          startDecorator: <CheckCircleIcon />
         };
       case 'failed':
         return {
@@ -307,11 +311,7 @@ function DataProcessingStatus({ status, progress, onCancel, onRetry }) {
           title: '처리 실패',
           content: '데이터 처리 중 오류가 발생했습니다.',
           startDecorator: <ErrorIcon />,
-          actions: (
-            <Button size="sm" onClick={onRetry}>
-              다시 시도
-            </Button>
-          ),
+          actions: <Button size="sm" onClick={onRetry}>다시 시도</Button>
         };
       default:
         return null;
@@ -326,7 +326,7 @@ function DataProcessingStatus({ status, progress, onCancel, onRetry }) {
 
 ### Feature Announcements
 
-새로운 기능 소개나 중요한 공지사항을 표시할 때 사용합니다.
+Used to display new feature announcements or important notices.
 
 ```tsx
 function FeatureAnnouncement() {
@@ -357,7 +357,7 @@ function FeatureAnnouncement() {
 
 ### Permission Requests
 
-권한 요청이나 설정 변경을 안내할 때 사용합니다.
+Used to guide permission requests or settings changes.
 
 ```tsx
 function PermissionAlert() {
@@ -398,7 +398,7 @@ function PermissionAlert() {
 
 ### Inline Messages
 
-폼 필드나 특정 섹션에 인라인으로 표시하는 메시지입니다.
+Messages displayed inline within form fields or specific sections.
 
 ```tsx
 function InlineMessages() {
@@ -434,7 +434,7 @@ function InlineMessages() {
 
 ### Dismissible Alerts
 
-사용자가 닫을 수 있는 Alert 구현 예제입니다.
+An implementation example of Alerts that users can dismiss.
 
 ```tsx
 function DismissibleAlerts() {
@@ -445,19 +445,23 @@ function DismissibleAlerts() {
   ]);
 
   const dismissAlert = (id) => {
-    setAlerts((prev) => prev.filter((alert) => alert.id !== id));
+    setAlerts(prev => prev.filter(alert => alert.id !== id));
   };
 
   return (
     <Stack spacing={2}>
-      {alerts.map((alert) => (
+      {alerts.map(alert => (
         <Alert
           key={alert.id}
           color={getAlertColor(alert.type)}
           content={alert.message}
           startDecorator={getAlertIcon(alert.type)}
           actions={
-            <IconButton size="sm" variant="plain" onClick={() => dismissAlert(alert.id)}>
+            <IconButton
+              size="sm"
+              variant="plain"
+              onClick={() => dismissAlert(alert.id)}
+            >
               <CloseIcon />
             </IconButton>
           }
@@ -472,13 +476,13 @@ function DismissibleAlerts() {
 
 ### Content Types
 
-Alert는 다양한 형태의 콘텐츠를 지원합니다.
+Alert supports various forms of content.
 
 ```tsx
-// 단순 텍스트
+// Plain text
 <Alert content="간단한 메시지" />
 
-// React 요소
+// React element
 <Alert
   content={
     <div>
@@ -488,7 +492,7 @@ Alert는 다양한 형태의 콘텐츠를 지원합니다.
   }
 />
 
-// 제목과 내용 분리
+// Separate title and content
 <Alert
   title="업데이트 완료"
   content="애플리케이션이 최신 버전으로 업데이트되었습니다."
@@ -497,7 +501,7 @@ Alert는 다양한 형태의 콘텐츠를 지원합니다.
 
 ### Variants
 
-다양한 시각적 스타일을 제공합니다.
+Provides various visual styles.
 
 ```tsx
 <Stack spacing={2}>
@@ -510,7 +514,7 @@ Alert는 다양한 형태의 콘텐츠를 지원합니다.
 
 ### Sizes
 
-Alert의 크기를 조절할 수 있습니다.
+You can adjust the Alert size.
 
 ```tsx
 <Stack spacing={2}>
@@ -522,7 +526,7 @@ Alert의 크기를 조절할 수 있습니다.
 
 ### Custom Styling
 
-sx prop을 사용해 커스텀 스타일을 적용할 수 있습니다.
+You can apply custom styles using the `sx` prop.
 
 ```tsx
 <Alert
@@ -540,61 +544,65 @@ sx prop을 사용해 커스텀 스타일을 적용할 수 있습니다.
 
 ## Accessibility
 
-Alert 컴포넌트는 다음과 같은 접근성 기능을 제공합니다:
+The Alert component provides the following accessibility features:
 
-### ARIA 속성
+### ARIA Attributes
 
-자동으로 적절한 ARIA 속성이 적용됩니다.
+Appropriate ARIA attributes are applied automatically.
 
-- `role="alert"`: 즉시 사용자에게 알려야 하는 중요한 메시지
-- `aria-live="polite"`: 덜 긴급한 메시지의 경우
+- `role="alert"`: For important messages that should be announced to the user immediately
+- `aria-live="polite"`: For less urgent messages
 
-### 키보드 탐색
+### Keyboard Navigation
 
-Alert 내의 액션 버튼들은 키보드로 탐색 가능합니다.
+Action buttons inside an Alert can be navigated by keyboard.
 
-### 스크린 리더 지원
+### Screen Reader Support
 
-제목과 내용이 적절히 구조화되어 스크린 리더가 읽을 수 있습니다.
+The title and content are structured appropriately for screen readers.
 
 ```tsx
 <Alert
   title="오류 발생"
   content="입력하신 정보를 다시 확인해주세요."
   startDecorator={<ErrorIcon aria-hidden="true" />}
-  actions={<Button aria-label="오류 메시지 닫기">닫기</Button>}
+  actions={
+    <Button aria-label="오류 메시지 닫기">
+      닫기
+    </Button>
+  }
 />
 ```
 
 ## Best Practices
 
-1. **적절한 색상 사용**: 메시지의 성격에 맞는 색상을 사용하세요.
+1. **Use appropriate colors**: Use colors that match the nature of the message.
 
 ```tsx
-// ✅ 좋은 예
+// ✅ Good example
 <Alert color="success" content="저장 완료" />
 <Alert color="danger" content="오류 발생" />
 <Alert color="warning" content="주의 필요" />
 
-// ❌ 나쁜 예
-<Alert color="success" content="오류 발생" /> // 잘못된 색상
+// ❌ Bad example
+<Alert color="success" content="오류 발생" /> // Incorrect color
 ```
 
-2. **명확한 메시지**: 사용자가 이해하기 쉬운 명확한 메시지를 작성하세요.
+2. **Clear messaging**: Write clear messages that are easy for users to understand.
 
 ```tsx
-// ✅ 명확한 메시지
+// ✅ Clear message
 <Alert
   color="danger"
   title="업로드 실패"
   content="파일이 너무 큽니다. 10MB 이하의 파일을 선택해주세요."
 />
 
-// ❌ 모호한 메시지
+// ❌ Vague message
 <Alert content="오류가 발생했습니다." />
 ```
 
-3. **적절한 액션**: 사용자가 취할 수 있는 다음 단계를 제공하세요.
+3. **Appropriate actions**: Provide the next step the user can take.
 
 ```tsx
 <Alert
@@ -608,9 +616,9 @@ Alert 내의 액션 버튼들은 키보드로 탐색 가능합니다.
 />
 ```
 
-4. **과도한 사용 금지**: 너무 많은 Alert가 동시에 표시되지 않도록 하세요.
+4. **Avoid overuse**: Do not show too many Alerts at the same time.
 
-5. **자동 해제**: 일시적인 메시지는 자동으로 해제되도록 구현하세요.
+5. **Auto-dismiss**: Implement temporary messages so they dismiss automatically.
 
 ```tsx
 function AutoDismissAlert() {
@@ -626,22 +634,30 @@ function AutoDismissAlert() {
 
   if (!visible) return null;
 
-  return <Alert color="success" content="저장이 완료되었습니다." startDecorator={<CheckIcon />} />;
+  return (
+    <Alert
+      color="success"
+      content="저장이 완료되었습니다."
+      startDecorator={<CheckIcon />}
+    />
+  );
 }
 ```
 
 ## Performance Considerations
 
-1. **조건부 렌더링**: 필요할 때만 Alert를 렌더링하세요.
+1. **Conditional rendering**: Render Alerts only when needed.
 
-2. **메모이제이션**: 복잡한 Alert 내용은 메모이제이션을 고려하세요.
+2. **Memoization**: Consider memoizing complex Alert content.
 
 ```tsx
-const alertContent = useMemo(() => <ComplexAlertContent data={data} />, [data]);
+const alertContent = useMemo(() => (
+  <ComplexAlertContent data={data} />
+), [data]);
 
-<Alert content={alertContent} />;
+<Alert content={alertContent} />
 ```
 
-3. **배치 처리**: 여러 Alert를 효율적으로 관리하세요.
+3. **Batch handling**: Manage multiple Alerts efficiently.
 
-Alert는 사용자와의 커뮤니케이션에서 핵심적인 역할을 하는 컴포넌트입니다. 적절한 색상, 명확한 메시지, 유용한 액션을 통해 우수한 사용자 경험을 제공할 수 있습니다.
+Alert is a core component for communicating with users. With appropriate colors, clear messaging, and useful actions, it can provide an excellent user experience.

package/dist/components/feedback/CircularProgress.md

@@ -226,6 +226,23 @@ function SubmitButton({ isSubmitting }: { isSubmitting: boolean }) {
 }
 ```
 
+## Props and Customization
+
+### Key Props
+
+| Prop          | Type                                                           | Default     | Description                                  |
+| ------------- | -------------------------------------------------------------- | ----------- | -------------------------------------------- |
+| `determinate` | `boolean`                                                      | `false`     | Show determinate progress (requires `value`) |
+| `value`       | `number`                                                       | -           | Progress value (0-100) for determinate mode  |
+| `size`        | `'sm' \| 'md' \| 'lg'`                                         | `'md'`      | Progress indicator size                      |
+| `variant`     | `'solid' \| 'soft' \| 'outlined' \| 'plain'`                   | `'soft'`    | Visual style                                 |
+| `color`       | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'primary'` | Color scheme                                 |
+| `thickness`   | `number`                                                       | -           | Stroke width of the circle                   |
+| `children`    | `ReactNode`                                                    | -           | Content rendered in the center               |
+| `sx`          | `SxProps`                                                      | -           | Custom styles                                |
+
+> **Note**: CircularProgress also accepts all Joy UI CircularProgress props.
+
 ## Best Practices
 
 1. **Use indeterminate for unknown durations**: When you cannot estimate progress, use the default spinning mode. Switch to determinate only when you can track actual progress.

package/dist/components/feedback/Skeleton.md

@@ -249,6 +249,23 @@ function UserProfile({ loading, user }: { loading: boolean; user?: User }) {
 }
 ```
 
+## Props and Customization
+
+### Key Props
+
+| Prop        | Type                                                             | Default     | Description                                    |
+| ----------- | ---------------------------------------------------------------- | ----------- | ---------------------------------------------- |
+| `variant`   | `'rectangular' \| 'circular' \| 'text' \| 'overlay' \| 'inline'` | `'overlay'` | Skeleton shape                                 |
+| `animation` | `'pulse' \| 'wave' \| false`                                     | `'pulse'`   | Animation type                                 |
+| `width`     | `number \| string`                                               | -           | Skeleton width                                 |
+| `height`    | `number \| string`                                               | -           | Skeleton height                                |
+| `level`     | Typography level                                                 | -           | Matches text height for `text` variant         |
+| `loading`   | `boolean`                                                        | `true`      | When false, shows children instead of skeleton |
+| `children`  | `ReactNode`                                                      | -           | Content to show when not loading               |
+| `sx`        | `SxProps`                                                        | -           | Custom styles                                  |
+
+> **Note**: Skeleton also accepts all Joy UI Skeleton props.
+
 ## Best Practices
 
 1. **Match the final layout**: Skeleton placeholders should closely approximate the size and position of the real content to prevent layout shifts.