@ceed/ads 1.30.0 → 1.30.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/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 }) {

package/dist/components/feedback/Modal.md

@@ -86,9 +86,7 @@ function DetailModal({ open, onClose }) {
 > **Note**: Connect the same handler to both `Modal`'s `onClose` and `ModalFrame`'s `onClose`.
 > `Modal` handles backdrop click and ESC key, while `ModalFrame` handles the X button click.
 
-## Examples
-
-### Basic Modal
+## Basic Modal
 
 The basic modal with a simple Sheet for custom layouts.
 
@@ -121,7 +119,7 @@ The basic modal with a simple Sheet for custom layouts.
 </>
 ```
 
-### Modal Dialog
+## Modal Dialog
 
 Use ModalDialog for structured dialogs with title, content, and actions.
 
@@ -156,7 +154,7 @@ Use ModalDialog for structured dialogs with title, content, and actions.
 </>
 ```
 
-### Variants
+## Modal Dialog Variants
 
 Modal dialogs support different visual variants.
 
@@ -220,7 +218,7 @@ Modal dialogs support different visual variants.
 </>
 ```
 
-### Alert Dialog
+## Alert Dialog
 
 For critical confirmations that require explicit user decision.
 
@@ -250,7 +248,7 @@ For critical confirmations that require explicit user decision.
 </>
 ```
 
-### Layouts
+## Modal Layouts
 
 #### Fullscreen Layout
 
@@ -274,7 +272,7 @@ For complex content that requires maximum screen space.
 </>
 ```
 
-### Nested Modals
+## Nested Modals
 
 Modals can be stacked on top of each other when necessary.
 
@@ -304,7 +302,7 @@ Modals can be stacked on top of each other when necessary.
 </>
 ```
 
-### ModalFrame
+## ModalFrame Examples
 
 ModalFrame is a convenience component that automatically provides a title, close button, and content area.
 
@@ -482,9 +480,7 @@ ModalFrame can be used without a Modal wrapper for embedding dialog-style layout
 - **Non-critical information**: Success messages or tips should use Toast or inline feedback
 - **Mobile navigation**: Consider using full-page transitions instead on mobile devices
 
-## Common Use Cases
-
-### Confirmation Dialog
+## Confirmation Dialog
 
 Confirm destructive or significant actions before executing them.
 
@@ -515,7 +511,7 @@ function DeleteConfirmation({ item, onDelete, onCancel }) {
 }
 ```
 
-### Form Modal
+## Form Modal
 
 Capture user input in a focused dialog.
 
@@ -563,7 +559,7 @@ function CreateProjectModal({ open, onClose, onCreate }) {
 }
 ```
 
-### Information Modal
+## Information Modal
 
 Display detailed information that requires user acknowledgment.
 
@@ -593,7 +589,7 @@ function TermsModal({ open, onAccept, onDecline }) {
 }
 ```
 
-### Image Preview Modal
+## Image Preview Modal
 
 Display images or media in a focused overlay.
 
@@ -610,7 +606,7 @@ function ImagePreviewModal({ image, open, onClose }) {
 }
 ```
 
-### Loading Modal
+## Loading Modal
 
 Block user interaction during async operations.
 

package/dist/components/feedback/Skeleton.md

@@ -183,9 +183,7 @@ Wrap existing content with Skeleton to overlay it while loading. Set the `loadin
 </Typography>
 ```
 
-## Common Use Cases
-
-### Page Content Loading
+## Page Content Loading
 
 ```tsx
 function PageSkeleton() {
@@ -205,7 +203,7 @@ function PageSkeleton() {
 }
 ```
 
-### User List Loading
+## User List Loading
 
 ```tsx
 function UserListSkeleton({ count = 5 }: { count?: number }) {
@@ -225,7 +223,7 @@ function UserListSkeleton({ count = 5 }: { count?: number }) {
 }
 ```
 
-### Conditional Rendering
+## Conditional Rendering
 
 ```tsx
 function UserProfile({ loading, user }: { loading: boolean; user?: User }) {
@@ -249,6 +247,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.