@ceed/cds 1.29.0 → 1.29.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
@@ -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.

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

@@ -4,8 +4,6 @@
 
 The Typography component is a core component for displaying text. It is based on Joy UI Typography and provides a variety of text levels and styles. You can apply consistent typography across all text elements such as headings, body text, and labels.
 
-CDS extends the default typography system with **marketing levels** (`marketing-lg`, `marketing-md`, `marketing-sm`) for landing pages and promotional content, and uses **Poppins** as the display font family.
-
 ```tsx
 <Typography children="Typography" />
 ```
@@ -37,12 +35,11 @@ function MyComponent() {
 
 ### Overview
 
-Typography levels are divided into four groups: **Headings**, **Titles**, **Body**, and **Marketing**. The default level is `body-md`.
+Typography levels are divided into three groups: **Headings**, **Titles**, and **Body**. The default level is `body-md`.
 
-- **Headings** (`h1`–`h4`): Used for page and section headings. Uses the display font family (Poppins).
+- **Headings** (`h1`–`h4`): Used for page and section headings. Uses the display font family (Inter).
 - **Titles** (`title-lg`, `title-md`, `title-sm`): Used for UI labels, card titles, and emphasized text. Uses the body font family (Inter).
 - **Body** (`body-lg`, `body-md`, `body-sm`, `body-xs`): Used for readable content and descriptions. Uses the body font family (Inter).
-- **Marketing** (`marketing-lg`, `marketing-md`, `marketing-sm`): Used for landing pages, hero banners, and promotional content. Uses the display font family (Poppins).
 
 ```tsx
 <>
@@ -107,26 +104,23 @@ Typography levels are divided into four groups: **Headings**, **Titles**, **Body
 
 ### Style Reference
 
-| Level        | Font Family       | Font Size       | Font Weight    | Line Height | Letter Spacing | Default Color  | HTML Tag |
-| ------------ | ----------------- | --------------- | -------------- | ----------- | -------------- | -------------- | -------- |
-| h1           | display (Poppins) | 2.25rem (36px)  | 700 (Bold)     | 1.333       | -0.025em       | text.primary   | `<h1>`   |
-| h2           | display (Poppins) | 1.875rem (30px) | 700 (Bold)     | 1.333       | -0.025em       | text.primary   | `<h2>`   |
-| h3           | display (Poppins) | 1.5rem (24px)   | 600 (SemiBold) | 1.333       | -0.025em       | text.primary   | `<h3>`   |
-| h4           | display (Poppins) | 1.25rem (20px)  | 600 (SemiBold) | 1.5         | -0.025em       | text.primary   | `<h4>`   |
-| title-lg     | body (Inter)      | 1.125rem (18px) | 600 (SemiBold) | 1.333       | -              | text.primary   | `<p>`    |
-| title-md     | body (Inter)      | 1rem (16px)     | 500 (Medium)   | 1.5         | -              | text.primary   | `<p>`    |
-| title-sm     | body (Inter)      | 0.875rem (14px) | 500 (Medium)   | 1.429       | -              | text.primary   | `<p>`    |
-| body-lg      | body (Inter)      | 1.125rem (18px) | inherit        | 1.5         | -              | text.secondary | `<p>`    |
-| body-md      | body (Inter)      | 1rem (16px)     | inherit        | 1.5         | -              | text.secondary | `<p>`    |
-| body-sm      | body (Inter)      | 0.875rem (14px) | inherit        | 1.5         | -              | text.tertiary  | `<p>`    |
-| body-xs      | body (Inter)      | 0.75rem (12px)  | 500 (Medium)   | 1.5         | -              | text.tertiary  | `<span>` |
-| marketing-lg | display (Poppins) | 2.625rem (42px) | 600 (SemiBold) | 1.333       | -0.025em       | text.primary   | `<div>`  |
-| marketing-md | display (Poppins) | 2rem (32px)     | 600 (SemiBold) | 1.333       | -0.025em       | text.primary   | `<div>`  |
-| marketing-sm | display (Poppins) | 1.5rem (24px)   | 500 (Medium)   | 1.333       | -0.025em       | text.primary   | `<div>`  |
+| Level    | Font Family     | Font Size       | Font Weight    | Line Height | Letter Spacing | Default Color  | HTML Tag |
+| -------- | --------------- | --------------- | -------------- | ----------- | -------------- | -------------- | -------- |
+| h1       | display (Inter) | 2.25rem (36px)  | 700 (Bold)     | 1.333       | -0.025em       | text.primary   | `<h1>`   |
+| h2       | display (Inter) | 1.875rem (30px) | 700 (Bold)     | 1.333       | -0.025em       | text.primary   | `<h2>`   |
+| h3       | display (Inter) | 1.5rem (24px)   | 600 (SemiBold) | 1.333       | -0.025em       | text.primary   | `<h3>`   |
+| h4       | display (Inter) | 1.25rem (20px)  | 600 (SemiBold) | 1.5         | -0.025em       | text.primary   | `<h4>`   |
+| title-lg | body (Inter)    | 1.125rem (18px) | 600 (SemiBold) | 1.333       | -              | text.primary   | `<p>`    |
+| title-md | body (Inter)    | 1rem (16px)     | 500 (Medium)   | 1.5         | -              | text.primary   | `<p>`    |
+| title-sm | body (Inter)    | 0.875rem (14px) | 500 (Medium)   | 1.429       | -              | text.primary   | `<p>`    |
+| body-lg  | body (Inter)    | 1.125rem (18px) | inherit        | 1.5         | -              | text.secondary | `<p>`    |
+| body-md  | body (Inter)    | 1rem (16px)     | inherit        | 1.5         | -              | text.secondary | `<p>`    |
+| body-sm  | body (Inter)    | 0.875rem (14px) | inherit        | 1.5         | -              | text.tertiary  | `<p>`    |
+| body-xs  | body (Inter)    | 0.75rem (12px)  | 500 (Medium)   | 1.5         | -              | text.tertiary  | `<span>` |
 
 ### Headings
 
-Heading levels define page structure and hierarchy. In CDS, they use the **Poppins** display font family with heavier weights for visual prominence.
+Heading levels define page structure and hierarchy. They use the display font family with heavier weights for visual prominence.
 
 ```tsx
 <>
@@ -182,30 +176,6 @@ Body levels are used for readable content and descriptions. The default level `b
 <Typography level="body-xs">Extra small text</Typography>
 ```
 
-### Marketing Levels
-
-Marketing levels are designed for landing pages, hero banners, and promotional content. They use the **Poppins** display font family for a distinctive marketing look.
-
-```tsx
-<>
-  <Typography level="marketing-lg">
-    marketing-lg - Large marketing text
-  </Typography>
-  <Typography level="marketing-md">
-    marketing-md - Medium marketing text
-  </Typography>
-  <Typography level="marketing-sm">
-    marketing-sm - Small marketing text
-  </Typography>
-</>
-```
-
-```tsx
-<Typography level="marketing-lg">Large marketing text</Typography>
-<Typography level="marketing-md">Medium marketing text</Typography>
-<Typography level="marketing-sm">Small marketing text</Typography>
-```
-
 ## Design Token Reference
 
 ### Font Size Scale
@@ -243,7 +213,7 @@ Marketing levels are designed for landing pages, hero banners, and promotional c
 ### Font Families
 
 - **body**: `"Inter"`, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
-- **display**: `"Poppins"`, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
+- **display**: `"Inter"`, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
 - **code**: `"Source Code Pro"`, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace
 
 ## Colors
@@ -305,22 +275,19 @@ Use the `component` prop to render Typography as a different HTML element or Rea
 
 **Default HTML tag mapping:**
 
-| Level        | Default HTML Tag |
-| ------------ | ---------------- |
-| h1           | `<h1>`           |
-| h2           | `<h2>`           |
-| h3           | `<h3>`           |
-| h4           | `<h4>`           |
-| title-lg     | `<p>`            |
-| title-md     | `<p>`            |
-| title-sm     | `<p>`            |
-| body-lg      | `<p>`            |
-| body-md      | `<p>`            |
-| body-sm      | `<p>`            |
-| body-xs      | `<span>`         |
-| marketing-lg | `<div>`          |
-| marketing-md | `<div>`          |
-| marketing-sm | `<div>`          |
+| Level    | Default HTML Tag |
+| -------- | ---------------- |
+| h1       | `<h1>`           |
+| h2       | `<h2>`           |
+| h3       | `<h3>`           |
+| h4       | `<h4>`           |
+| title-lg | `<p>`            |
+| title-md | `<p>`            |
+| title-sm | `<p>`            |
+| body-lg  | `<p>`            |
+| body-md  | `<p>`            |
+| body-sm  | `<p>`            |
+| body-xs  | `<span>`         |
 
 ## Decorators
 
@@ -482,14 +449,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" />
@@ -542,6 +509,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.
@@ -567,7 +553,6 @@ function ArticlePage() {
    - **Headings** (`h1`–`h4`): Use for document structure and section titles.
    - **Titles** (`title-lg/md/sm`): Use for UI labels, card headers, and emphasized text.
    - **Body** (`body-lg/md/sm/xs`): Use for content, descriptions, and supporting text.
-   - **Marketing** (`marketing-lg/md/sm`): Use exclusively for marketing and landing pages — not for general UI.
 
 6. **Avoid inline style overrides**: Prefer the `level` prop over `sx` for font sizing. Use `level` for consistent design tokens.
 
@@ -575,8 +560,6 @@ function ArticlePage() {
 
 8. **Use `body-xs` sparingly**: Reserve `body-xs` (12px) for auxiliary information such as timestamps, counters, and footnotes — not for primary content.
 
-9. **Marketing vs Heading levels**: Marketing levels are intended for landing pages and promotional content only. For standard application UI, use heading and title levels instead. Be aware that `h1`–`h4` and `marketing-*` levels use the Poppins display font, while `title-*` and `body-*` use Inter.
-
 ## Accessibility
 
 - Use sequential heading levels (`h1` → `h2` → `h3`). Do not skip levels.