@ceed/ads 1.30.0 → 1.31.0

package/dist/components/surfaces/Divider.md

@@ -2,7 +2,7 @@
 
 ## Introduction
 
-Divider 컴포넌트는 콘텐츠를 시각적으로 구분하는 선을 그려주는 컴포넌트입니다. Joy UI의 Divider 컴포넌트를 기반으로 하며, Framer Motion 애니메이션 지원이 추가되었습니다. 리스트 항목, 카드 섹션, 폼 영역 등을 구분할 때 사용하여 콘텐츠의 가독성을 향상시킬 수 있습니다.
+The Divider component draws a line that visually separates content. It is based on Joy UI's Divider component and adds Framer Motion animation support. You can use it to separate list items, card sections, form areas, and more to improve content readability.
 
 ```tsx
 <Box sx={{
@@ -40,11 +40,9 @@ function MyComponent() {
 }
 ```
 
-## Examples
+## Divider Basic Usage
 
-### Basic Usage
-
-가장 기본적인 Divider 사용법입니다.
+The most basic way to use Divider.
 
 ```tsx
 <Stack spacing={3}>
@@ -81,9 +79,9 @@ function MyComponent() {
 </Stack>
 ```
 
-### Orientations
+## Divider Orientations
 
-구분선의 방향을 설정할 수 있습니다.
+You can set the direction of the divider.
 
 ```tsx
 <Stack spacing={4}>
@@ -118,9 +116,9 @@ Vertical
 </Stack>
 ```
 
-### Colors
+## Divider Colors
 
-다양한 색상을 적용할 수 있습니다.
+You can apply various colors.
 
 ```tsx
 <Stack spacing={3}>
@@ -140,9 +138,9 @@ Vertical
 </Stack>
 ```
 
-### With Text
+## Divider With Text
 
-구분선 중앙에 텍스트를 배치할 수 있습니다.
+You can place text in the center of the divider.
 
 ```tsx
 <Stack spacing={3}>
@@ -172,9 +170,9 @@ Vertical
 </Stack>
 ```
 
-### In Cards
+## Divider In Cards
 
-카드나 패널 내에서 섹션을 구분하는 용도로 사용할 수 있습니다.
+You can use it to separate sections inside cards or panels.
 
 ```tsx
 <Stack direction="row" spacing={3}>
@@ -272,9 +270,9 @@ Vertical
 </Stack>
 ```
 
-### List Separators
+## Divider List Separators
 
-목록 항목들을 구분하는 구분선으로 사용할 수 있습니다.
+You can use it as a separator between list items.
 
 ```tsx
 <Sheet variant="outlined" sx={{
@@ -316,9 +314,9 @@ Vertical
 </Sheet>
 ```
 
-### Responsive Orientation
+## Divider Responsive Orientation
 
-화면 크기에 따라 방향을 변경할 수 있습니다.
+You can change the orientation based on screen size.
 
 ```tsx
 <Stack spacing={3}>
@@ -369,9 +367,9 @@ Vertical
 </Stack>
 ```
 
-### With Motion
+## Divider With Motion
 
-Framer Motion 애니메이션을 적용할 수 있습니다.
+You can apply Framer Motion animations.
 
 ```tsx
 <Stack spacing={3}>
@@ -438,9 +436,9 @@ Framer Motion 애니메이션을 적용할 수 있습니다.
 </Stack>
 ```
 
-### Custom Styling
+## Divider Custom Styling
 
-CSS 스타일을 이용해 구분선을 커스터마이징할 수 있습니다.
+You can customize the divider with CSS styles.
 
 ```tsx
 <Stack spacing={4}>
@@ -519,41 +517,39 @@ borderRadius: '1px'
 
 ### orientation
 
-구분선의 방향을 설정합니다.
+Sets the divider orientation.
 
 ```tsx
-<Divider orientation="horizontal" /> {/* 기본값 */}
+<Divider orientation="horizontal" /> {/* default */}
 <Divider orientation="vertical" />
 
-{/* 반응형 방향 */}
+{/* responsive orientation */}
 <Divider orientation={{ xs: 'horizontal', sm: 'vertical' }} />
 ```
 
 ### variant
 
-구분선의 스타일을 설정합니다.
+Sets the divider style.
 
 ```tsx
-<Divider variant="solid" />    {/* 기본값 - 실선 */}
-<Divider variant="plain" />    {/* 평면 스타일 */}
-<Divider variant="soft" />     {/* 부드러운 스타일 */}
+<Divider variant="solid" />    {/* default - solid line */}
+<Divider variant="plain" />    {/* plain style */}
+<Divider variant="soft" />     {/* soft style */}
 ```
 
 ### color
 
-구분선의 색상을 설정합니다.
+Sets the divider color.
 
 ```tsx
-<Divider color="neutral" />    {/* 기본값 */}
+<Divider color="neutral" />    {/* default */}
 <Divider color="primary" />
 <Divider color="danger" />
 <Divider color="success" />
 <Divider color="warning" />
 ```
 
-## Common Use Cases
-
-### Navigation Sections
+## Divider Navigation Sections
 
 ```tsx
 <nav>
@@ -567,7 +563,7 @@ borderRadius: '1px'
 </nav>
 ```
 
-### Form Sections
+## Divider Form Sections
 
 ```tsx
 <form>
@@ -592,7 +588,7 @@ borderRadius: '1px'
 </form>
 ```
 
-### Card Content Separation
+## Divider Card Content Separation
 
 ```tsx
 <Card>
@@ -612,7 +608,7 @@ borderRadius: '1px'
 </Card>
 ```
 
-### List Items
+## Divider List Items
 
 ```tsx
 <Stack>
@@ -628,7 +624,7 @@ borderRadius: '1px'
 </Stack>
 ```
 
-### Dashboard Sections
+## Divider Dashboard Sections
 
 ```tsx
 <Sheet variant="outlined" sx={{ p: 3 }}>
@@ -648,11 +644,11 @@ borderRadius: '1px'
   <Divider sx={{ my: 2 }} />
 
   <Typography level="title-md">최근 활동</Typography>
-  {/* 활동 목록 */}
+  {/* activity list */}
 </Sheet>
 ```
 
-### Modal Content
+## Divider Modal Content
 
 ```tsx
 <Modal open={open}>
@@ -688,27 +684,40 @@ borderRadius: '1px'
 </Modal>
 ```
 
+## Props and Customization
+
+### Key Props
+
+| Prop          | Type                         | Default        | Description                                            |
+| ------------- | ---------------------------- | -------------- | ------------------------------------------------------ |
+| `children`    | `ReactNode`                  | -              | Optional content rendered in the center of the divider |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Divider direction                                      |
+| `component`   | `ElementType`                | `'hr'`         | Root element type                                      |
+| `sx`          | `SxProps`                    | -              | Custom styles                                          |
+
+> **Note**: Divider also accepts all Joy UI Divider props.
+
 ## Best Practices
 
-1. **적절한 여백**: 구분선 위아래에 충분한 여백을 두어 콘텐츠가 명확히 구분되도록 하세요.
+1. **Use appropriate spacing**: Leave enough space above and below the divider so content is clearly separated.
 
-2. **의미있는 구분**: 논리적으로 관련 있는 콘텐츠끼리 그룹화하고 구분선으로 섹션을 나누세요.
+2. **Separate content meaningfully**: Group logically related content together and use dividers to split sections.
 
-3. **과도한 사용 금지**: 너무 많은 구분선은 인터페이스를 복잡하게 만들 수 있습니다.
+3. **Avoid overuse**: Too many dividers can make the interface feel cluttered.
 
-4. **수직 구분선 사용**: 수직 구분선을 사용할 때는 부모 컨테이너의 높이를 명시해주세요.
+4. **Using vertical dividers**: When using a vertical divider, explicitly define the height of the parent container.
 
-5. **반응형 고려**: 모바일에서는 수직 구분선이 수평으로 변경되어야 할 수 있습니다.
+5. **Consider responsive behavior**: On mobile, a vertical divider may need to switch to horizontal.
 
-6. **색상 일관성**: 프로젝트 전반에서 일관된 구분선 색상과 스타일을 사용하세요.
+6. **Keep colors consistent**: Use consistent divider colors and styles throughout the project.
 
-7. **접근성**:
-   - 구분선은 단순히 시각적 구분을 위한 것이므로 스크린 리더에서는 무시됩니다
-   - 의미적 구분이 필요한 경우 적절한 HTML 섹션 태그를 함께 사용하세요
+7. **Consider accessibility**:
+   - Dividers are purely visual separators, so screen readers typically ignore them
+   - If a semantic separation is needed, use appropriate HTML sectioning elements as well
 
 ## Responsive Behavior
 
-Divider는 모든 props에서 반응형 값을 지원합니다:
+Divider supports responsive values for all props:
 
 ```tsx
 <Divider
@@ -724,7 +733,7 @@ Divider는 모든 props에서 반응형 값을 지원합니다:
 
 ## Motion Support
 
-Divider는 Framer Motion을 지원합니다:
+Divider supports Framer Motion:
 
 ```tsx
 <Divider
@@ -745,18 +754,18 @@ Divider는 Framer Motion을 지원합니다:
 
 ## When to Use Divider
 
-### ✅ 사용하기 좋은 경우
+### ✅ Good Use Cases
 
-- **리스트 항목 구분**: 긴 리스트에서 항목들을 명확히 구분할 때
-- **폼 섹션 구분**: 관련 필드들을 그룹으로 나눌 때
-- **카드 내 콘텐츠 구분**: 카드 내에서 다른 성격의 정보를 구분할 때
-- **네비게이션 메뉴**: 메뉴 그룹을 시각적으로 구분할 때
-- **대시보드 섹션**: 대시보드의 위젯이나 섹션을 구분할 때
+- **Separate list items**: When you need to clearly divide items in a long list
+- **Separate form sections**: When grouping related fields into sections
+- **Separate content inside cards**: When distinguishing different kinds of information within a card
+- **Navigation menus**: When visually separating menu groups
+- **Dashboard sections**: When dividing widgets or sections in a dashboard
 
-### ❌ 사용하지 않는 것이 좋은 경우
+### ❌ Cases Where It May Not Be Appropriate
 
-- **단순한 여백으로 충분한 경우**: 과도한 구분선 사용은 피하세요
-- **이미 다른 구분 요소가 있는 경우**: 색상, 배경, 테두리 등으로 이미 구분되어 있다면 불필요
-- **너무 짧은 콘텐츠**: 한두 줄 정도의 짧은 콘텐츠에는 구분선이 과할 수 있습니다
+- **When simple spacing is enough**: Avoid using dividers excessively
+- **When other separators already exist**: If content is already separated by color, background, borders, or similar cues, a divider may be unnecessary
+- **For very short content**: A divider can feel excessive for content that is only one or two lines long
 
-Divider는 콘텐츠의 구조를 명확히 하고 가독성을 향상시키는 유용한 도구입니다. 적절히 사용하면 사용자가 정보를 더 쉽게 이해할 수 있는 인터페이스를 만들 수 있습니다.
+Divider is a useful tool for clarifying content structure and improving readability. When used appropriately, it helps create interfaces that make information easier to understand.

package/dist/components/surfaces/Sheet.md

@@ -599,9 +599,7 @@ Sheets can be nested to create layered dashboard layouts with distinct visual se
 </Sheet>
 ```
 
-## Common Use Cases
-
-### Dashboard Stat Widget
+## Dashboard Stat Widget
 
 ```tsx
 import { Sheet, Typography, Stack } from '@ceed/ads';
@@ -628,7 +626,7 @@ function StatWidget({ label, value, change }) {
 }
 ```
 
-### Alert Banner
+## Alert Banner
 
 ```tsx
 import { Sheet, Typography, Stack, Button } from '@ceed/ads';
@@ -655,7 +653,7 @@ function AlertBanner({ message, onDismiss }) {
 }
 ```
 
-### Content Card with Hover Effect
+## Content Card with Hover Effect
 
 ```tsx
 import { Sheet, Typography, Stack } from '@ceed/ads';
@@ -685,6 +683,21 @@ function ClickableCard({ title, description, onClick }) {
 }
 ```
 
+## Props and Customization
+
+### Key Props
+
+| Prop             | Type                                                           | Default     | Description                   |
+| ---------------- | -------------------------------------------------------------- | ----------- | ----------------------------- |
+| `children`       | `ReactNode`                                                    | -           | Sheet content                 |
+| `variant`        | `'solid' \| 'soft' \| 'outlined' \| 'plain'`                   | `'plain'`   | Visual style                  |
+| `color`          | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Color scheme                  |
+| `invertedColors` | `boolean`                                                      | `false`     | Invert child component colors |
+| `component`      | `ElementType`                                                  | `'div'`     | Root element type             |
+| `sx`             | `SxProps`                                                      | -           | Custom styles                 |
+
+> **Note**: Sheet also accepts all Joy UI Sheet props.
+
 ## Best Practices
 
 - **Choose the right variant for the context.**