@ceed/ads 1.30.0 → 1.31.0

package/dist/components/data-display/Typography.md

@@ -352,9 +352,7 @@ You can pass a responsive object to the `level` prop, or use `sx` to set respons
 </Typography>
 ```
 
-## Common Use Cases
-
-### Page Structure
+## Page Structure
 
 ```tsx
 function ArticlePage() {
@@ -385,7 +383,7 @@ function ArticlePage() {
 }
 ```
 
-### Card Content
+## Card Content
 
 ```tsx
 <Card>
@@ -409,7 +407,7 @@ function ArticlePage() {
 </Card>
 ```
 
-### Form Labels and Help Text
+## Form Labels and Help Text
 
 ```tsx
 <Stack spacing={2}>
@@ -437,14 +435,14 @@ function ArticlePage() {
 
 > 💡 **Tip: Use built-in form props instead**
 >
-> Input, Select, Textarea, DatePicker 등 Input 계열 컴포넌트는 `label`, `helperText` prop을 자체적으로 지원합니다.
-> Form을 구성할 때는 Typography로 직접 label/helperText를 만드는 것보다 각 컴포넌트의 내장 prop을 사용하는 것이 권장됩니다.
+> Input-family components such as Input, Select, Textarea, and DatePicker support `label` and `helperText` props natively.
+> When building forms, it is recommended to use each component's built-in props rather than creating labels and helper text manually with Typography.
 >
 > ```tsx
-> // ✅ Recommended: 컴포넌트 내장 prop 사용
+> // ✅ Recommended: use the component's built-in props
 > <Input label="Username" helperText="Please enter your real name." />
 >
-> // ❌ Not recommended: Typography로 직접 구성
+> // ❌ Not recommended: manually composing with Typography
 > <FormControl>
 >   <Typography level="title-sm" component="label">Username</Typography>
 >   <Input placeholder="Enter your name" />
@@ -452,7 +450,7 @@ function ArticlePage() {
 > </FormControl>
 > ```
 
-### Status and Indicators
+## Status and Indicators
 
 ```tsx
 <Stack spacing={2}>
@@ -472,7 +470,7 @@ function ArticlePage() {
 </Stack>
 ```
 
-### List Content
+## List Content
 
 ```tsx
 <Stack spacing={1}>
@@ -497,6 +495,25 @@ function ArticlePage() {
 </Stack>
 ```
 
+## Props and Customization
+
+### Key Props
+
+| Prop             | Type                                                                                                                         | Default     | Description                                       |
+| ---------------- | ---------------------------------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------- |
+| `children`       | `ReactNode`                                                                                                                  | -           | Text content                                      |
+| `level`          | `'h1' \| 'h2' \| 'h3' \| 'h4' \| 'title-lg' \| 'title-md' \| 'title-sm' \| 'body-lg' \| 'body-md' \| 'body-sm' \| 'body-xs'` | `'body-md'` | Typography level (maps to semantic HTML elements) |
+| `component`      | `ElementType`                                                                                                                | auto        | Override the root element type                    |
+| `color`          | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'`                                                               | `'neutral'` | Color scheme                                      |
+| `variant`        | `'solid' \| 'soft' \| 'outlined' \| 'plain'`                                                                                 | -           | Visual style (optional)                           |
+| `noWrap`         | `boolean`                                                                                                                    | `false`     | Truncate text with ellipsis                       |
+| `startDecorator` | `ReactNode`                                                                                                                  | -           | Content before the text                           |
+| `endDecorator`   | `ReactNode`                                                                                                                  | -           | Content after the text                            |
+| `textColor`      | `string`                                                                                                                     | -           | Direct text color override                        |
+| `sx`             | `SxProps`                                                                                                                    | -           | Custom styles                                     |
+
+> **Note**: Typography also accepts all Joy UI Typography props.
+
 ## Best Practices
 
 1. **Semantic Structure**: Use heading levels in order (`h1` → `h2` → `h3`) to create a clear document hierarchy.

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/ads';
 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="오류 발생"
@@ -54,11 +54,9 @@ function MyComponent() {
 }
 ```
 
-## Examples
+## Basic Usage
 
-### Basic Usage
-
-가장 기본적인 Alert 사용법입니다.
+The most basic Alert usage.
 
 ```tsx
 <Alert
@@ -67,9 +65,9 @@ function MyComponent() {
 />
 ```
 
-### Colors
+## Alert Colors
 
-다양한 색상을 통해 메시지의 성격을 구분할 수 있습니다.
+You can distinguish message types through various colors.
 
 ```tsx
 <div style={{
@@ -124,15 +122,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
+## Alert with Start Decorator
 
-아이콘이나 다른 요소를 메시지 앞에 추가할 수 있습니다.
+You can add an icon or another element before the message.
 
 ```tsx
 <Alert
@@ -142,9 +140,9 @@ function MyComponent() {
 />
 ```
 
-### With Title
+## Alert with Title
 
-제목을 추가하여 메시지를 구조화할 수 있습니다.
+You can structure the message by adding a title.
 
 ```tsx
 <Alert
@@ -154,9 +152,9 @@ function MyComponent() {
 />
 ```
 
-### With Actions
+## Alert with Actions
 
-사용자가 수행할 수 있는 액션을 추가할 수 있습니다.
+You can add actions the user can take.
 
 ```tsx
 <Alert
@@ -166,9 +164,9 @@ function MyComponent() {
 />
 ```
 
-### Complete Alert
+## Complete Alert Example
 
-모든 요소를 포함한 완전한 Alert입니다.
+A complete Alert containing all elements.
 
 ```tsx
 <Alert
@@ -180,11 +178,9 @@ function MyComponent() {
 />
 ```
 
-## Common Use Cases
-
-### Form Validation
+## Alert for Form Validation
 
-폼 검증 결과를 표시할 때 사용합니다.
+Used to display form validation results.
 
 ```tsx
 function LoginForm() {
@@ -227,16 +223,16 @@ function LoginForm() {
       )}
 
       <form onSubmit={handleSubmit}>
-        {/* 폼 필드들 */}
+        {/* Form fields */}
       </form>
     </Stack>
   );
 }
 ```
 
-### System Notifications
+## Alert for System Notifications
 
-시스템 상태나 알림을 표시할 때 사용합니다.
+Used to display system status or notifications.
 
 ```tsx
 function SystemStatus() {
@@ -282,9 +278,9 @@ function SystemStatus() {
 }
 ```
 
-### Data Processing Status
+## Alert for Data Processing Status
 
-데이터 처리 상태를 보여줄 때 사용합니다.
+Used to display data processing status.
 
 ```tsx
 function DataProcessingStatus({ status, progress, onCancel, onRetry }) {
@@ -324,9 +320,9 @@ function DataProcessingStatus({ status, progress, onCancel, onRetry }) {
 }
 ```
 
-### Feature Announcements
+## Alert for Feature Announcements
 
-새로운 기능 소개나 중요한 공지사항을 표시할 때 사용합니다.
+Used to display new feature announcements or important notices.
 
 ```tsx
 function FeatureAnnouncement() {
@@ -355,9 +351,9 @@ function FeatureAnnouncement() {
 }
 ```
 
-### Permission Requests
+## Alert for Permission Requests
 
-권한 요청이나 설정 변경을 안내할 때 사용합니다.
+Used to guide permission requests or settings changes.
 
 ```tsx
 function PermissionAlert() {
@@ -396,9 +392,9 @@ function PermissionAlert() {
 }
 ```
 
-### Inline Messages
+## Inline Alert Messages
 
-폼 필드나 특정 섹션에 인라인으로 표시하는 메시지입니다.
+Messages displayed inline within form fields or specific sections.
 
 ```tsx
 function InlineMessages() {
@@ -432,9 +428,9 @@ function InlineMessages() {
 }
 ```
 
-### Dismissible Alerts
+## Dismissible Alert
 
-사용자가 닫을 수 있는 Alert 구현 예제입니다.
+An implementation example of Alerts that users can dismiss.
 
 ```tsx
 function DismissibleAlerts() {
@@ -474,15 +470,31 @@ function DismissibleAlerts() {
 
 ## Props and Customization
 
-### Content Types
+### Key Props
+
+| Prop             | Type                                                           | Default     | Description                                                        |
+| ---------------- | -------------------------------------------------------------- | ----------- | ------------------------------------------------------------------ |
+| `content`        | `ReactNode`                                                    | (required)  | Alert message content                                              |
+| `title`          | `string`                                                       | -           | Optional title displayed above the content                         |
+| `actions`        | `ReactNode`                                                    | -           | Action buttons or elements displayed on the right                  |
+| `color`          | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'primary'` | Alert color scheme                                                 |
+| `variant`        | `'solid' \| 'soft' \| 'outlined' \| 'plain'`                   | `'soft'`    | Visual style                                                       |
+| `size`           | `'sm' \| 'md' \| 'lg'`                                         | `'md'`      | Alert size (affects title/content typography levels)               |
+| `startDecorator` | `ReactNode`                                                    | -           | Icon or element rendered before the content                        |
+| `invertedColors` | `boolean`                                                      | `false`     | Invert child component colors (auto `true` when `variant='solid'`) |
+| `sx`             | `SxProps`                                                      | -           | Custom styles using the MUI system                                 |
+
+> **Note**: Alert also accepts all Joy UI Alert props and Framer Motion props.
+
+## Alert Content Types
 
-Alert는 다양한 형태의 콘텐츠를 지원합니다.
+Alert supports various forms of content.
 
 ```tsx
-// 단순 텍스트
+// Plain text
 <Alert content="간단한 메시지" />
 
-// React 요소
+// React element
 <Alert
   content={
     <div>
@@ -492,16 +504,16 @@ Alert는 다양한 형태의 콘텐츠를 지원합니다.
   }
 />
 
-// 제목과 내용 분리
+// Separate title and content
 <Alert
   title="업데이트 완료"
   content="애플리케이션이 최신 버전으로 업데이트되었습니다."
 />
 ```
 
-### Variants
+## Alert Variants
 
-다양한 시각적 스타일을 제공합니다.
+Provides various visual styles.
 
 ```tsx
 <Stack spacing={2}>
@@ -512,9 +524,9 @@ Alert는 다양한 형태의 콘텐츠를 지원합니다.
 </Stack>
 ```
 
-### Sizes
+## Alert Sizes
 
-Alert의 크기를 조절할 수 있습니다.
+You can adjust the Alert size.
 
 ```tsx
 <Stack spacing={2}>
@@ -524,9 +536,9 @@ Alert의 크기를 조절할 수 있습니다.
 </Stack>
 ```
 
-### Custom Styling
+## Alert Custom Styling
 
-sx prop을 사용해 커스텀 스타일을 적용할 수 있습니다.
+You can apply custom styles using the `sx` prop.
 
 ```tsx
 <Alert
@@ -544,22 +556,22 @@ 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
@@ -576,33 +588,33 @@ Alert 내의 액션 버튼들은 키보드로 탐색 가능합니다.
 
 ## 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
@@ -616,9 +628,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() {
@@ -646,9 +658,9 @@ function AutoDismissAlert() {
 
 ## 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(() => (
@@ -658,6 +670,6 @@ const alertContent = useMemo(() => (
 <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

@@ -166,9 +166,7 @@ Control the stroke thickness of the progress ring with the `thickness` prop.
 <CircularProgress thickness={8} />
 ```
 
-## Common Use Cases
-
-### Data Fetching Indicator
+## CircularProgress Data Fetching Indicator
 
 ```tsx
 function DataLoader() {
@@ -194,7 +192,7 @@ function DataLoader() {
 }
 ```
 
-### File Upload Progress
+## CircularProgress File Upload Progress
 
 ```tsx
 function FileUpload({ progress }: { progress: number }) {
@@ -209,7 +207,7 @@ function FileUpload({ progress }: { progress: number }) {
 }
 ```
 
-### Inline Loading Button
+## CircularProgress Inline Loading Button
 
 ```tsx
 function SubmitButton({ isSubmitting }: { isSubmitting: boolean }) {
@@ -226,6 +224,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/Dialog.md

@@ -54,9 +54,7 @@ function ConfirmationDialog({ open, onClose, onConfirm }) {
 }
 ```
 
-## Examples
-
-### Playground
+## Basic Usage
 
 Interactive example with title, content, and action buttons.
 
@@ -68,7 +66,7 @@ Interactive example with title, content, and action buttons.
 />
 ```
 
-### Fullscreen
+## Fullscreen Dialog
 
 Fullscreen mode for complex content or mobile views.
 
@@ -81,7 +79,7 @@ Fullscreen mode for complex content or mobile views.
 />
 ```
 
-### With Input (KeyDown Handling)
+## Dialog with Input and KeyDown
 
 Dialog with form inputs and keyboard event handling.
 
@@ -92,7 +90,7 @@ Dialog Content
 </DialogFrame>
 ```
 
-### Standalone Usage
+## Standalone DialogFrame
 
 DialogFrame can be used without a Modal wrapper for embedding dialog-style layouts directly within a page.
 
@@ -165,9 +163,7 @@ function EmbeddedDialog() {
 - **Frequent interactions**: Don't interrupt common workflows
 - **Large content**: Use a page or InsetDrawer for lengthy content
 
-## Common Use Cases
-
-### Delete Confirmation
+## Delete Confirmation Dialog
 
 ```tsx
 function DeleteConfirmation({ itemName, open, onClose, onDelete }) {
@@ -198,7 +194,7 @@ function DeleteConfirmation({ itemName, open, onClose, onDelete }) {
 }
 ```
 
-### Form Dialog
+## Form Dialog
 
 ```tsx
 function QuickAddDialog({ open, onClose, onSubmit }) {
@@ -243,7 +239,7 @@ function QuickAddDialog({ open, onClose, onSubmit }) {
 }
 ```
 
-### Unsaved Changes Warning
+## Unsaved Changes Dialog
 
 ```tsx
 function UnsavedChangesDialog({ open, onClose, onDiscard, onSave }) {
@@ -322,7 +318,7 @@ function TermsDialog({ open, onClose, onAccept }) {
 }
 ```
 
-### Loading State Dialog
+## Loading State Dialog
 
 ```tsx
 function ProcessingDialog({ open, status, onClose }) {