@ceed/cds 1.29.0 → 1.30.0

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

@@ -2,9 +2,9 @@
 
 ## Introduction
 
-> **참고**: 대용량의 데이터를 보여주기 위한 경우 DataTable 컴포넌트가 더 알맞을 수 있으니 참고하세요. Table 컴포넌트는 양이 적지만 커스터마이징이 자유롭고 복잡한 형태의 UI를 Cell에 표현할 때 알맞습니다. rowSpan, colSpan 등 셀 병합이나 단순하지 않은 형태의 테이블도 Table 컴포넌트를 조합하여 구현하는 것을 권장합니다.
+> **Note**: If you need to display large volumes of data, the DataTable component may be a better fit. The Table component is better suited for smaller datasets, flexible customization, and rendering complex UI inside cells. For cell merging with `rowSpan`, `colSpan`, or non-trivial table structures, we recommend composing the Table component directly.
 
-Table 컴포넌트는 구조화된 데이터를 표 형태로 표시하는 기본적인 테이블 컴포넌트입니다. Joy UI의 Table을 기반으로 하며, 유연한 커스터마이징과 복잡한 레이아웃을 지원합니다. 간단한 데이터 표시부터 복잡한 셀 병합, 사용자 정의 콘텐츠까지 다양한 용도로 활용할 수 있습니다.
+The Table component is a foundational table component for displaying structured data in a tabular format. It is based on Joy UI Table and supports flexible customization and complex layouts. It can be used for everything from simple data display to complex cell merging and custom content.
 
 ```tsx
 <Table aria-label="basic table" {...args}>
@@ -51,7 +51,10 @@ function MyComponent() {
   return (
     <Table>
       <TableHead headCells={headCells} />
-      <TableBody rows={rows} cellOrder={['name', 'email', 'role', 'joinDate']} />
+      <TableBody
+        rows={rows}
+        cellOrder={['name', 'email', 'role', 'joinDate']}
+      />
     </Table>
   );
 }
@@ -61,7 +64,7 @@ function MyComponent() {
 
 ### Basic Examples
 
-가장 기본적인 Table 사용법들입니다.
+The most basic Table usage patterns.
 
 ```tsx
 <Table aria-label="basic table" {...args}>
@@ -85,7 +88,7 @@ function MyComponent() {
 
 ### With Hover Effect
 
-행에 마우스 오버시 하이라이트 효과를 적용할 수 있습니다.
+You can apply a highlight effect when hovering over rows.
 
 ```tsx
 <Table
@@ -96,7 +99,7 @@ function MyComponent() {
 
 ### With Checkbox Selection
 
-체크박스를 포함한 선택 가능한 테이블입니다.
+A selectable table that includes checkboxes.
 
 ```tsx
 <Table aria-label="checkbox table" hoverRow {...args}>
@@ -122,7 +125,7 @@ function MyComponent() {
 
 ### User Management Table
 
-사용자 관리에 활용할 수 있는 테이블입니다. 아바타, 역할 표시, 상태 인디케이터, 액션 버튼이 포함되어 있습니다.
+A table for user management. It includes avatars, role labels, status indicators, and action buttons.
 
 ```tsx
 <Table aria-label="user management table" hoverRow>
@@ -299,7 +302,7 @@ function MyComponent() {
 
 ### Product Inventory Table
 
-제품 재고 관리를 위한 테이블입니다. 재고 상태, 가격 표시, 진행률 바 등을 포함합니다.
+A table for product inventory management. It includes stock status, price display, progress bars, and more.
 
 ```tsx
 <Table aria-label="product inventory table" hoverRow>
@@ -418,7 +421,7 @@ function MyComponent() {
 
 ### Task Management Table
 
-프로젝트의 작업 관리를 위한 테이블입니다. 담당자, 우선순위, 진행률, 마감일 등을 표시합니다.
+A table for project task management. It displays assignees, priorities, progress, due dates, and more.
 
 ```tsx
 <Table aria-label="task management table" hoverRow>
@@ -571,7 +574,7 @@ function MyComponent() {
 
 ### Sales Report with Cell Merging
 
-복잡한 셀 병합을 사용한 매출 보고서 테이블입니다. rowSpan과 colSpan을 활용한 예제입니다.
+A sales report table that uses complex cell merging. This example uses `rowSpan` and `colSpan`.
 
 ```tsx
 <Table aria-label="sales report table with merged cells">
@@ -767,7 +770,7 @@ function MyComponent() {
 
 ### Comparison Table
 
-플랜이나 제품을 비교하는 테이블입니다. 불린 값을 시각적으로 표현합니다.
+A table for comparing plans or products. It visually represents boolean values.
 
 ```tsx
 <Table aria-label="plan comparison table">
@@ -926,7 +929,7 @@ function MyComponent() {
 
 ### Empty State Table
 
-데이터가 없을 때의 상태를 표시하는 테이블입니다.
+A table that displays an empty state when no data is available.
 
 ```tsx
 <Stack spacing={2}>
@@ -993,7 +996,7 @@ function MyComponent() {
 
 ### Advanced Features Table
 
-고급 기능들(고정 헤더, 스크롤, 반응형)을 포함한 테이블입니다.
+A table that includes advanced features such as sticky headers, scrolling, and responsiveness.
 
 ```tsx
 <Box sx={{
@@ -1072,7 +1075,7 @@ function MyComponent() {
 
 ### Drag and Drop Headers Table
 
-@atlaskit/pragmatic-drag-and-drop을 사용하여 헤더를 드래그해서 컬럼 순서를 변경할 수 있는 테이블입니다.
+A table that uses `@atlaskit/pragmatic-drag-and-drop` so headers can be dragged to reorder columns.
 
 ```tsx
 <Stack spacing={3}>
@@ -1126,9 +1129,9 @@ function MyComponent() {
 
 ### Implementation Guidelines
 
-위에서 보여준 Canvas 예제들은 실제 동작하는 컴포넌트들입니다. Table 컴포넌트는 두 가지 방식으로 사용할 수 있습니다:
+The Canvas examples above are fully working components. The Table component can be used in two ways:
 
-#### 1. TableHead와 TableBody 사용 (간단한 데이터)
+#### 1. Using TableHead and TableBody (simple data)
 
 ```tsx
 import { Table, TableHead, TableBody } from '@ceed/cds';
@@ -1148,15 +1151,18 @@ function SimpleTable() {
   return (
     <Table aria-label="simple table" hoverRow>
       <TableHead headCells={headCells} />
-      <TableBody rows={rows} cellOrder={['name', 'email', 'role']} />
+      <TableBody
+        rows={rows}
+        cellOrder={['name', 'email', 'role']}
+      />
     </Table>
   );
 }
 ```
 
-#### 2. HTML 테이블 구조 사용 (복잡한 UI)
+#### 2. Using the HTML table structure (complex UI)
 
-복잡한 UI 컴포넌트를 셀에 표현할 때는 HTML 테이블 구조를 직접 사용합니다:
+When rendering complex UI components inside cells, use the HTML table structure directly:
 
 ```tsx
 import { Table, Stack, Avatar, Typography, Chip, IconButton } from '@ceed/cds';
@@ -1178,9 +1184,7 @@ function ComplexTable() {
         <tr>
           <td>
             <Stack direction="row" spacing={2} alignItems="center">
-              <Avatar size="sm" variant="soft" color="primary">
-                김
-              </Avatar>
+              <Avatar size="sm" variant="soft" color="primary">김</Avatar>
               <Stack spacing={0}>
                 <Typography level="title-sm">김철수</Typography>
                 <Typography level="body-xs" color="neutral">
@@ -1214,7 +1218,7 @@ function ComplexTable() {
 
 #### Cell Merging with rowSpan and colSpan
 
-복잡한 테이블 레이아웃을 위해 직접 HTML 테이블 구조를 사용할 수 있습니다:
+For complex table layouts, you can use the HTML table structure directly:
 
 ```tsx
 <Table>
@@ -1237,31 +1241,28 @@ function ComplexTable() {
 
 ## Advanced Features
 
-Table 컴포넌트는 다양한 고급 기능을 지원합니다:
+The Table component supports various advanced features:
 
 ### Sticky Headers
 
-스크롤 시 헤더가 고정되는 기능:
+Keeps the header fixed while scrolling:
 
 ```tsx
-<Table
-  stickyHeader
-  sx={{
-    '& th': {
-      position: 'sticky',
-      top: 0,
-      backgroundColor: 'background.surface',
-      zIndex: 1,
-    },
-  }}
->
+<Table stickyHeader sx={{
+  '& th': {
+    position: 'sticky',
+    top: 0,
+    backgroundColor: 'background.surface',
+    zIndex: 1,
+  }
+}}>
   {/* Table content */}
 </Table>
 ```
 
 ### Empty States
 
-데이터가 없을 때의 적절한 빈 상태 표시:
+Displays an appropriate empty state when no data is available:
 
 ```tsx
 <tbody>
@@ -1280,28 +1281,44 @@ Table 컴포넌트는 다양한 고급 기능을 지원합니다:
 
 ### Responsive Design
 
-반응형 디자인을 위한 가이드:
+Guidance for responsive design:
 
 ```tsx
-<Table
-  sx={{
-    '@media (max-width: 768px)': {
-      '& td, & th': {
-        fontSize: 'sm',
-        px: 1,
-      },
-    },
-  }}
->
+<Table sx={{
+  '@media (max-width: 768px)': {
+    '& td, & th': {
+      fontSize: 'sm',
+      px: 1,
+    }
+  }
+}}>
   {/* Table content */}
 </Table>
 ```
 
+## Props and Customization
+
+### Key Props
+
+| Prop           | Type                                                                          | Default      | Description                         |
+| -------------- | ----------------------------------------------------------------------------- | ------------ | ----------------------------------- |
+| `children`     | `ReactNode`                                                                   | -            | Table content (thead, tbody, tfoot) |
+| `borderAxis`   | `'none' \| 'x' \| 'y' \| 'both' \| 'xBetween' \| 'yBetween' \| 'bothBetween'` | `'xBetween'` | Border display mode                 |
+| `stripe`       | `'odd' \| 'even'`                                                             | -            | Striped row background              |
+| `hoverRow`     | `boolean`                                                                     | `false`      | Highlight rows on hover             |
+| `stickyHeader` | `boolean`                                                                     | `false`      | Fix the header when scrolling       |
+| `size`         | `'sm' \| 'md' \| 'lg'`                                                        | `'md'`       | Table size                          |
+| `variant`      | `'plain' \| 'outlined' \| 'soft' \| 'solid'`                                  | `'plain'`    | Visual style                        |
+| `color`        | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'`                | `'neutral'`  | Color scheme                        |
+| `sx`           | `SxProps`                                                                     | -            | Custom styles                       |
+
+> **Note**: Table also accepts all Joy UI Table props.
+
 ## Best Practices
 
-1. **적절한 컴포넌트 선택**: 대용량 데이터는 DataTable, 복잡한 레이아웃은 Table을 사용하세요.
+1. **Choose the right component**: Use DataTable for large datasets and Table for complex layouts.
 
-2. **접근성 고려**: 적절한 table 태그와 ARIA 속성을 사용하세요.
+2. **Consider accessibility**: Use proper table tags and ARIA attributes.
 
 ```tsx
 <Table aria-label="사용자 목록">
@@ -1320,12 +1337,12 @@ Table 컴포넌트는 다양한 고급 기능을 지원합니다:
 </Table>
 ```
 
-3. **일관된 정렬**: 숫자 데이터는 우측 정렬, 텍스트는 좌측 정렬을 유지하세요.
+3. **Consistent alignment**: Right-align numeric data and left-align text.
 
-4. **적절한 행 높이**: 콘텐츠에 따라 적절한 행 높이를 설정하세요.
+4. **Appropriate row height**: Set row heights that fit the content.
 
-5. **반응형 고려**: 모바일에서는 중요한 컬럼만 표시하거나 카드 형태로 변환하는 것을 고려하세요.
+5. **Responsive considerations**: On mobile, consider showing only key columns or transforming the layout into cards.
 
-6. **성능 최적화**: 긴 목록의 경우 가상화나 페이지네이션을 고려하세요.
+6. **Performance optimization**: For long lists, consider virtualization or pagination.
 
-Table 컴포넌트는 구조화된 데이터를 표현하고 복잡한 레이아웃을 구현하는 데 매우 유용한 도구입니다. 적절한 사용법과 커스터마이징을 통해 다양한 요구사항을 충족할 수 있습니다.
+The Table component is a highly useful tool for presenting structured data and implementing complex layouts. With the right usage patterns and customization, it can satisfy a wide range of requirements.

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

@@ -2,7 +2,7 @@
 
 ## Introduction
 
-Tooltip 컴포넌트는 사용자가 요소에 마우스를 올렸을 때 추가적인 정보나 도움말을 제공하는 오버레이입니다. Joy UI의 Tooltip을 기반으로 하며, 사용자 경험을 향상시키기 위해 간결하고 유용한 정보를 표시하는 데 사용됩니다. 버튼 설명, 아이콘 의미, 잘린 텍스트의 전체 내용 표시 등에 활용됩니다.
+The Tooltip component is an overlay that provides additional information or help when a user hovers over an element. It is based on Joy UI Tooltip and is used to display concise, useful information that improves the user experience. Common use cases include button descriptions, icon meanings, and showing the full content of truncated text.
 
 ```tsx
 <Tooltip
@@ -39,7 +39,7 @@ function MyComponent() {
 
 ### Basic Usage
 
-가장 기본적인 Tooltip 사용법입니다.
+The most basic Tooltip usage.
 
 ```tsx
 <Tooltip
@@ -51,7 +51,7 @@ function MyComponent() {
 
 ### Controlled Tooltip
 
-프로그래밍적으로 제어되는 Tooltip입니다.
+A Tooltip controlled programmatically.
 
 ```tsx
 <Tooltip
@@ -66,7 +66,7 @@ function MyComponent() {
 
 ### Icon Button Descriptions
 
-아이콘 버튼의 의미를 설명할 때 사용합니다.
+Used to explain the meaning of icon buttons.
 
 ```tsx
 <Stack direction="row" spacing={1}>
@@ -92,7 +92,7 @@ function MyComponent() {
 
 ### Truncated Text
 
-잘린 텍스트의 전체 내용을 표시할 때 사용합니다.
+Used to display the full content of truncated text.
 
 ```tsx
 function TruncatedText({ text }: { text: string }) {
@@ -119,7 +119,7 @@ function TruncatedText({ text }: { text: string }) {
 
 ### Form Field Help
 
-폼 필드에 추가 도움말을 제공할 때 사용합니다.
+Used to provide additional help for form fields.
 
 ```tsx
 <Stack spacing={2}>
@@ -139,7 +139,7 @@ function TruncatedText({ text }: { text: string }) {
 
 ### Status Indicators
 
-상태나 진행률 정보를 표시할 때 사용합니다.
+Used to display status or progress information.
 
 ```tsx
 <Stack direction="row" spacing={2} alignItems="center">
@@ -168,7 +168,7 @@ function TruncatedText({ text }: { text: string }) {
 
 ### Navigation Hints
 
-네비게이션 요소에 도움말을 제공할 때 사용합니다.
+Used to provide help text for navigation elements.
 
 ```tsx
 <Stack direction="row" spacing={2}>
@@ -196,7 +196,7 @@ function TruncatedText({ text }: { text: string }) {
 
 ### Complex Content
 
-복잡한 내용을 가진 Tooltip입니다.
+A Tooltip with complex content.
 
 ```tsx
 <Tooltip
@@ -222,7 +222,7 @@ function TruncatedText({ text }: { text: string }) {
 
 ### Interactive Elements
 
-상호작용이 가능한 요소들과 함께 사용합니다.
+Used with interactive elements.
 
 ```tsx
 <Stack direction="row" spacing={2}>
@@ -248,15 +248,15 @@ function TruncatedText({ text }: { text: string }) {
 
 ### Title Prop
 
-Tooltip에 표시될 내용을 지정합니다.
+Specifies the content displayed in the Tooltip.
 
 ```tsx
-// 간단한 텍스트
+// Simple text
 <Tooltip title="간단한 도움말">
   <Button>버튼</Button>
 </Tooltip>
 
-// React 요소
+// React element
 <Tooltip
   title={
     <div>
@@ -271,7 +271,7 @@ Tooltip에 표시될 내용을 지정합니다.
 
 ### Placement
 
-Tooltip이 나타나는 위치를 조정할 수 있습니다.
+You can adjust where the Tooltip appears.
 
 ```tsx
 <Stack direction="row" spacing={2} sx={{ mt: 4 }}>
@@ -295,7 +295,7 @@ Tooltip이 나타나는 위치를 조정할 수 있습니다.
 
 ### Colors and Variants
 
-다양한 색상과 변형을 적용할 수 있습니다.
+You can apply various colors and variants.
 
 ```tsx
 <Stack direction="row" spacing={2}>
@@ -319,7 +319,7 @@ Tooltip이 나타나는 위치를 조정할 수 있습니다.
 
 ### Arrow
 
-화살표를 표시하여 Tooltip이 어느 요소를 가리키는지 명확히 할 수 있습니다.
+You can show an arrow to make it clear which element the Tooltip points to.
 
 ```tsx
 <Stack direction="row" spacing={2}>
@@ -335,7 +335,7 @@ Tooltip이 나타나는 위치를 조정할 수 있습니다.
 
 ### Controlled Mode
 
-프로그래밍적으로 Tooltip의 표시/숨김을 제어할 수 있습니다.
+You can control the Tooltip's visibility programmatically.
 
 ```tsx
 function ControlledTooltip() {
@@ -355,11 +355,11 @@ function ControlledTooltip() {
 
 ## Accessibility
 
-Tooltip 컴포넌트는 다음과 같은 접근성 기능을 제공합니다:
+The Tooltip component provides the following accessibility features:
 
-### ARIA 속성
+### ARIA Attributes
 
-자동으로 적절한 ARIA 속성이 적용됩니다.
+Appropriate ARIA attributes are applied automatically.
 
 ```tsx
 <Tooltip title="저장 버튼">
@@ -369,16 +369,16 @@ Tooltip 컴포넌트는 다음과 같은 접근성 기능을 제공합니다:
 </Tooltip>
 ```
 
-### 키보드 지원
+### Keyboard Support
 
-키보드 사용자도 Tooltip을 사용할 수 있습니다.
+Keyboard users can also use the Tooltip.
 
-- **Tab**: 포커스 가능한 요소로 이동
-- **Escape**: 열린 Tooltip 닫기
+- **Tab**: Move to a focusable element
+- **Escape**: Close the open Tooltip
 
-### 터치 기기 지원
+### Touch Device Support
 
-터치 기기에서도 Tooltip을 사용할 수 있도록 탭 제스처를 지원합니다.
+Supports tap gestures so the Tooltip can also be used on touch devices.
 
 ```tsx
 <Tooltip title="터치 기기에서도 동작합니다" touchTapDelay={0}>
@@ -388,30 +388,30 @@ Tooltip 컴포넌트는 다음과 같은 접근성 기능을 제공합니다:
 
 ## Best Practices
 
-1. **간결한 내용**: Tooltip 내용은 간결하고 이해하기 쉽게 작성하세요.
+1. **Concise content**: Keep Tooltip content brief and easy to understand.
 
 ```tsx
-// ✅ 좋은 예
+// ✅ Good example
 <Tooltip title="삭제">
   <IconButton><DeleteIcon /></IconButton>
 </Tooltip>
 
-// ❌ 나쁜 예
+// ❌ Bad example
 <Tooltip title="이 버튼을 클릭하면 선택된 항목이 영구적으로 삭제되며 복구할 수 없습니다">
   <IconButton><DeleteIcon /></IconButton>
 </Tooltip>
 ```
 
-2. **중요한 정보는 다른 방법으로**: 핵심적인 정보는 Tooltip에만 의존하지 마세요.
+2. **Use another channel for critical information**: Do not rely on a Tooltip alone for essential information.
 
-3. **적절한 타이밍**: 사용자가 도움이 필요할 때만 표시되도록 하세요.
+3. **Appropriate timing**: Show it only when the user needs help.
 
-4. **일관된 배치**: 애플리케이션 전체에서 일관된 placement를 사용하세요.
+4. **Consistent placement**: Use consistent placement across the application.
 
-5. **성능 고려**: 많은 수의 Tooltip이 있는 페이지에서는 필요시에만 렌더링하세요.
+5. **Performance considerations**: On pages with many Tooltips, render them only when needed.
 
 ```tsx
-// 조건부 Tooltip
+// Conditional Tooltip
 {
   (needsTooltip && (
     <Tooltip title="도움말">
@@ -421,15 +421,15 @@ Tooltip 컴포넌트는 다음과 같은 접근성 기능을 제공합니다:
 }
 ```
 
-6. **모바일 고려**: 모바일 환경에서는 대안적인 정보 제공 방법을 고려하세요.
+6. **Mobile considerations**: Consider alternative ways to provide information in mobile environments.
 
-7. **색상 의존 금지**: 색상에만 의존하지 말고 텍스트나 아이콘으로도 정보를 전달하세요.
+7. **Do not rely on color alone**: Communicate information with text or icons as well.
 
 ## Performance Considerations
 
-1. **지연 렌더링**: 많은 Tooltip이 있는 경우 필요시에만 렌더링하세요.
+1. **Deferred rendering**: If there are many Tooltips, render them only when needed.
 
-2. **메모이제이션**: 복잡한 title 내용은 메모이제이션을 고려하세요.
+2. **Memoization**: Consider memoizing complex `title` content.
 
 ```tsx
 const tooltipContent = useMemo(() => <ComplexTooltipContent data={data} />, [data]);
@@ -439,6 +439,6 @@ const tooltipContent = useMemo(() => <ComplexTooltipContent data={data} />, [dat
 </Tooltip>;
 ```
 
-3. **이벤트 리스너 최적화**: 커스텀 이벤트 핸들러를 사용할 때는 적절히 정리하세요.
+3. **Event listener optimization**: Clean up custom event handlers properly.
 
-Tooltip은 사용자에게 추가적인 맥락과 도움을 제공하는 중요한 UI 컴포넌트입니다. 적절히 사용하면 사용자 경험을 크게 향상시킬 수 있습니다.
+Tooltip is an important UI component for providing additional context and guidance to users. Used appropriately, it can significantly improve the user experience.