@ceed/ads 1.30.0 → 1.30.1

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
@@ -35,11 +35,9 @@ function MyComponent() {
 }
 ```
 
-## Examples
+## Basic Usage
 
-### Basic Usage
-
-가장 기본적인 Tooltip 사용법입니다.
+The most basic Tooltip usage.
 
 ```tsx
 <Tooltip
@@ -49,9 +47,9 @@ function MyComponent() {
 />
 ```
 
-### Controlled Tooltip
+## Controlled Tooltip
 
-프로그래밍적으로 제어되는 Tooltip입니다.
+A Tooltip controlled programmatically.
 
 ```tsx
 <Tooltip
@@ -62,11 +60,9 @@ function MyComponent() {
 />
 ```
 
-## Common Use Cases
-
-### Icon Button Descriptions
+## Tooltip for Icon Buttons
 
-아이콘 버튼의 의미를 설명할 때 사용합니다.
+Used to explain the meaning of icon buttons.
 
 ```tsx
 <Stack direction="row" spacing={1}>
@@ -90,9 +86,9 @@ function MyComponent() {
 </Stack>
 ```
 
-### Truncated Text
+## Tooltip for Truncated Text
 
-잘린 텍스트의 전체 내용을 표시할 때 사용합니다.
+Used to display the full content of truncated text.
 
 ```tsx
 function TruncatedText({ text }: { text: string }) {
@@ -117,9 +113,9 @@ function TruncatedText({ text }: { text: string }) {
 }
 ```
 
-### Form Field Help
+## Tooltip for Form Field Help
 
-폼 필드에 추가 도움말을 제공할 때 사용합니다.
+Used to provide additional help for form fields.
 
 ```tsx
 <Stack spacing={2}>
@@ -137,9 +133,9 @@ function TruncatedText({ text }: { text: string }) {
 </Stack>
 ```
 
-### Status Indicators
+## Tooltip for Status Indicators
 
-상태나 진행률 정보를 표시할 때 사용합니다.
+Used to display status or progress information.
 
 ```tsx
 <Stack direction="row" spacing={2} alignItems="center">
@@ -166,9 +162,9 @@ function TruncatedText({ text }: { text: string }) {
 </Stack>
 ```
 
-### Navigation Hints
+## Tooltip for Navigation Hints
 
-네비게이션 요소에 도움말을 제공할 때 사용합니다.
+Used to provide help text for navigation elements.
 
 ```tsx
 <Stack direction="row" spacing={2}>
@@ -194,9 +190,9 @@ function TruncatedText({ text }: { text: string }) {
 </Stack>
 ```
 
-### Complex Content
+## Tooltip with Rich Content
 
-복잡한 내용을 가진 Tooltip입니다.
+A Tooltip with complex content.
 
 ```tsx
 <Tooltip
@@ -220,9 +216,9 @@ function TruncatedText({ text }: { text: string }) {
 </Tooltip>
 ```
 
-### Interactive Elements
+## Tooltip with Interactive Elements
 
-상호작용이 가능한 요소들과 함께 사용합니다.
+Used with interactive elements.
 
 ```tsx
 <Stack direction="row" spacing={2}>
@@ -246,17 +242,33 @@ function TruncatedText({ text }: { text: string }) {
 
 ## Props and Customization
 
-### Title Prop
+### Key Props
+
+| Prop        | Type                                                                                                          | Default     | Description                                    |
+| ----------- | ------------------------------------------------------------------------------------------------------------- | ----------- | ---------------------------------------------- |
+| `title`     | `ReactNode`                                                                                                   | -           | Content displayed inside the tooltip           |
+| `placement` | `'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| ...` | `'bottom'`  | Tooltip position relative to the child element |
+| `arrow`     | `boolean`                                                                                                     | `false`     | Show an arrow pointing to the target element   |
+| `open`      | `boolean`                                                                                                     | -           | Controls tooltip visibility (controlled mode)  |
+| `onClose`   | `() => void`                                                                                                  | -           | Callback when tooltip should close             |
+| `color`     | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'`                                                | `'neutral'` | Tooltip color scheme                           |
+| `variant`   | `'solid' \| 'soft' \| 'outlined' \| 'plain'`                                                                  | `'solid'`   | Visual style                                   |
+| `size`      | `'sm' \| 'md' \| 'lg'`                                                                                        | `'md'`      | Tooltip size                                   |
+| `sx`        | `SxProps`                                                                                                     | -           | Custom styles using the MUI system             |
+
+> **Note**: Tooltip also accepts all Joy UI Tooltip props and Framer Motion props.
+
+## Tooltip Title Prop
 
-Tooltip에 표시될 내용을 지정합니다.
+Specifies the content displayed in the Tooltip.
 
 ```tsx
-// 간단한 텍스트
+// Simple text
 <Tooltip title="간단한 도움말">
   <Button>버튼</Button>
 </Tooltip>
 
-// React 요소
+// React element
 <Tooltip
   title={
     <div>
@@ -269,9 +281,9 @@ Tooltip에 표시될 내용을 지정합니다.
 </Tooltip>
 ```
 
-### Placement
+## Tooltip Placement
 
-Tooltip이 나타나는 위치를 조정할 수 있습니다.
+You can adjust where the Tooltip appears.
 
 ```tsx
 <Stack direction="row" spacing={2} sx={{ mt: 4 }}>
@@ -293,9 +305,9 @@ Tooltip이 나타나는 위치를 조정할 수 있습니다.
 </Stack>
 ```
 
-### Colors and Variants
+## Tooltip Colors and Variants
 
-다양한 색상과 변형을 적용할 수 있습니다.
+You can apply various colors and variants.
 
 ```tsx
 <Stack direction="row" spacing={2}>
@@ -317,9 +329,9 @@ Tooltip이 나타나는 위치를 조정할 수 있습니다.
 </Stack>
 ```
 
-### Arrow
+## Tooltip Arrow
 
-화살표를 표시하여 Tooltip이 어느 요소를 가리키는지 명확히 할 수 있습니다.
+You can show an arrow to make it clear which element the Tooltip points to.
 
 ```tsx
 <Stack direction="row" spacing={2}>
@@ -333,9 +345,9 @@ Tooltip이 나타나는 위치를 조정할 수 있습니다.
 </Stack>
 ```
 
-### Controlled Mode
+## Tooltip Controlled Mode
 
-프로그래밍적으로 Tooltip의 표시/숨김을 제어할 수 있습니다.
+You can control the Tooltip's visibility programmatically.
 
 ```tsx
 function ControlledTooltip() {
@@ -355,11 +367,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 +381,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 +400,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 +433,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 +451,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.

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.