@ceed/ads 1.30.0 → 1.31.0

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

@@ -2,7 +2,7 @@
 
 ## Introduction
 
-Chip 컴포넌트는 입력, 속성, 액션을 컴팩트하게 표현하는 UI 요소입니다. 태그, 필터, 연락처, 카테고리 등을 나타내는 데 주로 사용됩니다. 텍스트, 아이콘, 아바타와 함께 사용할 수 있으며, 클릭하거나 삭제할 수 있는 인터랙티브한 기능을 제공합니다.
+The Chip component is a compact UI element used to represent inputs, attributes, and actions. It is commonly used for tags, filters, contacts, categories, and similar items. It can be used with text, icons, or avatars, and provides interactive behaviors such as clicking or deleting.
 
 ```tsx
 <Chip {...args} />
@@ -39,11 +39,9 @@ function MyComponent() {
 }
 ```
 
-## Examples
+## Chip Basic Usage
 
-### Basic Usage
-
-기본적인 Chip 사용법입니다.
+Basic Chip usage.
 
 ```tsx
 <div style={{
@@ -57,9 +55,9 @@ function MyComponent() {
 </div>
 ```
 
-### Colors
+## Chip Colors
 
-다양한 색상을 적용할 수 있습니다.
+You can apply various colors.
 
 ```tsx
 <div style={{
@@ -75,9 +73,9 @@ function MyComponent() {
 </div>
 ```
 
-### Variants
+## Chip Variants
 
-다양한 스타일 변형을 제공합니다.
+Provides a variety of style variants.
 
 ```tsx
 <div style={{
@@ -92,9 +90,9 @@ function MyComponent() {
 </div>
 ```
 
-### Sizes
+## Chip Sizes
 
-크기를 조절할 수 있습니다.
+You can adjust the size.
 
 ```tsx
 <div style={{
@@ -109,9 +107,9 @@ function MyComponent() {
 </div>
 ```
 
-### With Icons
+## Chip with Icons
 
-아이콘과 함께 사용할 수 있습니다.
+Can be used with icons.
 
 ```tsx
 <div style={{
@@ -127,9 +125,9 @@ function MyComponent() {
 </div>
 ```
 
-### With Avatar
+## Chip with Avatar
 
-아바타와 함께 사용하여 사용자를 나타낼 수 있습니다.
+Can be used with an avatar to represent a user.
 
 ```tsx
 <div style={{
@@ -142,9 +140,9 @@ function MyComponent() {
 </div>
 ```
 
-### Deletable
+## Deletable Chip
 
-삭제 기능을 가진 Chip입니다. 클릭하면 목록에서 제거됩니다.
+A Chip with delete functionality. Clicking it removes it from the list.
 
 ```tsx
 <div style={{
@@ -158,9 +156,9 @@ function MyComponent() {
 </div>
 ```
 
-### Clickable
+## Clickable Chip
 
-클릭 가능한 Chip으로 필터나 탭으로 사용할 수 있습니다.
+A clickable Chip that can be used as a filter or tab.
 
 ```tsx
 <div style={{
@@ -178,9 +176,9 @@ function MyComponent() {
 </div>
 ```
 
-### Clickable Actions
+## Chip Clickable Actions
 
-클릭하여 다양한 액션을 수행할 수 있습니다.
+Can trigger various actions when clicked.
 
 ```tsx
 <div style={{
@@ -198,9 +196,9 @@ function MyComponent() {
 </div>
 ```
 
-### States
+## Chip States
 
-다양한 상태를 표현할 수 있습니다.
+Can represent various states.
 
 ```tsx
 <div style={{
@@ -239,9 +237,7 @@ function MyComponent() {
 </div>
 ```
 
-## Common Use Cases
-
-### Tags
+## Chip Tags
 
 ```tsx
 <div style={{ display: 'flex', gap: '0.5rem' }}>
@@ -251,7 +247,7 @@ function MyComponent() {
 </div>
 ```
 
-### Status Indicators
+## Chip Status Indicators
 
 ```tsx
 <Chip color="success" startDecorator={<CheckIcon />}>
@@ -262,7 +258,7 @@ function MyComponent() {
 </Chip>
 ```
 
-### Filter Controls
+## Chip Filter Controls
 
 ```tsx
 <Chip
@@ -274,7 +270,7 @@ function MyComponent() {
 </Chip>
 ```
 
-### Contact Pills
+## Chip Contact Pills
 
 ```tsx
 <Chip
@@ -286,16 +282,34 @@ function MyComponent() {
 </Chip>
 ```
 
+## Props and Customization
+
+### Key Props
+
+| Prop             | Type                                                           | Default     | Description                            |
+| ---------------- | -------------------------------------------------------------- | ----------- | -------------------------------------- |
+| `children`       | `ReactNode`                                                    | -           | Chip content (text, icons)             |
+| `variant`        | `'solid' \| 'soft' \| 'outlined' \| 'plain'`                   | `'soft'`    | Visual style                           |
+| `size`           | `'sm' \| 'md' \| 'lg'`                                         | `'md'`      | Chip size                              |
+| `color`          | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Color scheme                           |
+| `disabled`       | `boolean`                                                      | `false`     | Disables the chip                      |
+| `onClick`        | `(event: MouseEvent) => void`                                  | -           | Click handler (makes chip interactive) |
+| `startDecorator` | `ReactNode`                                                    | -           | Content before the chip text           |
+| `endDecorator`   | `ReactNode`                                                    | -           | Content after the chip text            |
+| `sx`             | `SxProps`                                                      | -           | Custom styles using the MUI system     |
+
+> **Note**: Chip also accepts all Joy UI Chip props and Framer Motion props.
+
 ## Best Practices
 
-1. **적절한 크기**: 콘텐츠에 맞는 적절한 크기를 선택하세요. 긴 텍스트는 피하고 간결하게 표현하세요.
+1. **Use appropriate sizes**: Choose sizes that fit the content. Keep text concise.
 
-2. **일관된 스타일**: 같은 맥락에서는 일관된 variant와 color를 사용하세요.
+2. **Be consistent**: Use the same variant and color within the same context.
 
-3. **명확한 액션**: clickable이나 deletable 기능을 사용할 때는 사용자에게 명확한 피드백을 제공하세요.
+3. **Clear actions**: When using clickable or deletable behavior, provide clear feedback to the user.
 
-4. **접근성**: 키보드 탐색이 가능하도록 하고, 스크린 리더를 위한 적절한 레이블을 제공하세요.
+4. **Accessibility**: Support keyboard navigation and provide appropriate labels for screen readers.
 
-5. **적절한 간격**: 여러 Chip을 나열할 때는 적절한 간격을 두어 가독성을 높이세요.
+5. **Appropriate spacing**: Use proper spacing when listing multiple Chips to improve readability.
 
-6. **색상 의미**: 색상은 의미를 가지도록 사용하세요 (성공은 초록색, 경고는 주황색 등).
+6. **Semantic color usage**: Use colors with clear meaning, such as green for success and orange for warnings.

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

@@ -1726,6 +1726,99 @@ This is inspector: {selectedRowId}
 </Stack>
 ```
 
+## Props and Customization
+
+### DataTableProps
+
+| Prop                            | Type                                                                | Default                 | Description                                           |
+| ------------------------------- | ------------------------------------------------------------------- | ----------------------- | ----------------------------------------------------- |
+| `rows`                          | `T[]`                                                               | (required)              | Array of row data objects                             |
+| `columns`                       | `ColumnDef<T, ID>[]`                                                | (required)              | Column definitions array                              |
+| `getId`                         | `(row: T) => ID`                                                    | -                       | Custom row identifier function (defaults to `row.id`) |
+| `checkboxSelection`             | `boolean`                                                           | `false`                 | Enables checkbox selection column                     |
+| `selectionModel`                | `ID[]`                                                              | -                       | Controlled selection state                            |
+| `onSelectionModelChange`        | `(model: ID[], isTotalSelected?: boolean) => void`                  | -                       | Callback when selection changes                       |
+| `isRowSelectable`               | `(params: { row, id }) => boolean`                                  | -                       | Determines if a row can be selected                   |
+| `disableSelectionOnClick`       | `boolean`                                                           | `false`                 | Prevents selection when clicking a row                |
+| `isTotalSelected`               | `boolean`                                                           | `false`                 | Represents total selection state in server pagination |
+| `editMode`                      | `boolean`                                                           | `false`                 | Enables inline cell editing                           |
+| `pagination`                    | `boolean`                                                           | `false`                 | Enables pagination                                    |
+| `paginationMode`                | `'client' \| 'server'`                                              | `'client'`              | Client-side or server-side pagination                 |
+| `paginationModel`               | `{ page: number; pageSize: number }`                                | -                       | Controlled pagination state                           |
+| `onPaginationModelChange`       | `(model: { page, pageSize }) => void`                               | -                       | Callback when page or page size changes               |
+| `rowCount`                      | `number`                                                            | -                       | Total row count (required for server pagination)      |
+| `sortModel`                     | `SortModel<T>[]`                                                    | -                       | Controlled sort state                                 |
+| `sortOrder`                     | `('asc' \| 'desc' \| null)[]`                                       | `['asc', 'desc', null]` | Allowed sort directions cycle                         |
+| `onSortModelChange`             | `(model: SortModel<T>[]) => void`                                   | -                       | Callback when sort changes                            |
+| `pinnedColumns`                 | `{ left?: string[]; right?: string[] }`                             | -                       | Pin columns to left/right edges                       |
+| `columnGroupingModel`           | `ColumnGroupingModel`                                               | -                       | Column header grouping configuration                  |
+| `columnVisibilityModel`         | `Record<string, boolean>`                                           | -                       | Controlled column visibility (false = hidden)         |
+| `onColumnVisibilityModelChange` | `(model: Record<string, boolean>) => void`                          | -                       | Callback when visibility changes                      |
+| `loading`                       | `boolean`                                                           | `false`                 | Shows loading overlay                                 |
+| `hoverRow`                      | `boolean`                                                           | `false`                 | Highlights rows on hover                              |
+| `stickyHeader`                  | `boolean`                                                           | `false`                 | Fixes the header when scrolling                       |
+| `stripe`                        | `'even' \| 'odd'`                                                   | -                       | Applies striped row background                        |
+| `noWrap`                        | `boolean`                                                           | `false`                 | Prevents cell text wrapping                           |
+| `onRowClick`                    | `(params: { row, rowId }, event) => void`                           | -                       | Callback when a row is clicked                        |
+| `slots`                         | `{ checkbox?, toolbar?, footer?, loadingOverlay?, noRowsOverlay? }` | -                       | Custom component slots                                |
+| `slotProps`                     | `{ checkbox?, toolbar?, background?, noRowsOverlay? }`              | -                       | Props passed to slot components                       |
+| `apiRef`                        | `React.RefObject<DataTableApi>`                                     | -                       | Imperative API reference                              |
+| `initialState`                  | `{ sorting?, columns? }`                                            | -                       | Initial state for uncontrolled sort/visibility        |
+
+### ColumnDef Union Type
+
+All column types extend `BaseColumnDef` with shared properties:
+
+| Prop              | Type                                                                                                            | Default    | Description                                      |
+| ----------------- | --------------------------------------------------------------------------------------------------------------- | ---------- | ------------------------------------------------ |
+| `field`           | `keyof T`                                                                                                       | (required) | Row data field to display                        |
+| `headerName`      | `string`                                                                                                        | -          | Column header text                               |
+| `type`            | `'text' \| 'number' \| 'currency' \| 'date' \| 'select' \| 'autocomplete' \| 'longText' \| 'link' \| 'actions'` | `'text'`   | Column type (determines edit UI)                 |
+| `width`           | `string`                                                                                                        | -          | Column width (e.g., `'200px'`, `'30%'`)          |
+| `minWidth`        | `string`                                                                                                        | -          | Minimum column width                             |
+| `maxWidth`        | `string`                                                                                                        | -          | Maximum column width                             |
+| `resizable`       | `boolean`                                                                                                       | `false`    | Enables column resizing by dragging              |
+| `sortable`        | `boolean`                                                                                                       | `true`     | Enables sorting for this column                  |
+| `sortComparator`  | `(params: { rowA, rowB }) => number`                                                                            | -          | Custom sort logic                                |
+| `sortOrder`       | `('asc' \| 'desc' \| null)[]`                                                                                   | -          | Column-specific sort direction cycle             |
+| `required`        | `boolean`                                                                                                       | `false`    | Shows required indicator (\*) in header          |
+| `headerLineClamp` | `1 \| 2`                                                                                                        | `1`        | Max header text lines before truncation          |
+| `description`     | `string`                                                                                                        | -          | Tooltip text for the column header               |
+| `cellClassName`   | `string \| ((params: { row, value }) => string)`                                                                | -          | Dynamic cell CSS class                           |
+| `headerClassName` | `string \| ((params) => string)`                                                                                | -          | Dynamic header CSS class                         |
+| `renderCell`      | `(params: { row, value, rowIndex, colIndex, id }) => ReactNode`                                                 | -          | Custom cell renderer                             |
+| `renderEditCell`  | `(params) => ReactNode`                                                                                         | -          | Custom edit cell renderer                        |
+| `isCellEditable`  | `boolean \| ((params: { row, value, id }) => boolean)`                                                          | `true`     | Whether a cell is editable                       |
+| `componentProps`  | `object \| ((params: { row, id }) => object)`                                                                   | -          | Props passed to the column type's edit component |
+| `onCellEditStart` | `(params: { row, originalRow, value }) => void`                                                                 | -          | Callback when cell editing begins                |
+| `onCellEditStop`  | `(params: { row, originalRow, value }) => void`                                                                 | -          | Callback when cell editing ends                  |
+
+### ActionsColumnDef
+
+For action columns, use `type: 'actions'` with `getActions`:
+
+```tsx
+{
+  field: 'actions',
+  type: 'actions',
+  getActions: ({ row, id }) => [
+    <Button key="edit" size="sm">Edit</Button>,
+    <IconMenuButton key="more" items={[...]} />,
+  ],
+}
+```
+
+### DataTableApi
+
+```tsx
+interface DataTableApi {
+  getRowIndexRelativeToVisibleRows(rowId: string): number;
+  setCellFocus(rowId: string): void;
+}
+```
+
+> **Note**: DataTable also accepts all Joy UI Table props (e.g., `borderAxis`, `size`, `sx`).
+
 ## Constraints and Considerations
 
 ### Required Conditions

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

@@ -45,9 +45,7 @@ The default InfoSign displays a question-mark icon that reveals a tooltip on hov
 />
 ```
 
-## Common Use Cases
-
-### Form Field Help
+## InfoSign Form Field Help
 
 ```tsx
 import { InfoSign } from '@ceed/ads';
@@ -69,7 +67,7 @@ function PasswordField() {
 }
 ```
 
-### Table Column Header
+## InfoSign Table Column Header
 
 ```tsx
 import { InfoSign } from '@ceed/ads';
@@ -93,7 +91,7 @@ function TableHeader() {
 }
 ```
 
-### Dashboard Metric Explanation
+## InfoSign Dashboard Metric Explanation
 
 ```tsx
 import { InfoSign, Typography, Stack } from '@ceed/ads';
@@ -114,6 +112,18 @@ function MetricCard() {
 }
 ```
 
+## Props and Customization
+
+### Key Props
+
+| Prop        | Type                                                           | Default     | Description                           |
+| ----------- | -------------------------------------------------------------- | ----------- | ------------------------------------- |
+| `message`   | `string`                                                       | (required)  | Tooltip message text                  |
+| `placement` | `TooltipPlacement`                                             | `'top'`     | Tooltip position relative to the icon |
+| `color`     | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Icon color                            |
+| `size`      | `'sm' \| 'md' \| 'lg'`                                         | `'md'`      | Icon size                             |
+| `sx`        | `SxProps`                                                      | -           | Custom styles                         |
+
 ## Best Practices
 
 - **Keep messages concise.** Tooltip messages should be 1-2 sentences that quickly answer "what does this mean?" Avoid paragraphs of text.

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

@@ -43,9 +43,7 @@ function ArticleContent({ content }) {
 }
 ```
 
-## Examples
-
-### Playground
+## Playground
 
 Interactive example with basic markdown formatting.
 
@@ -55,7 +53,7 @@ Interactive example with basic markdown formatting.
 />
 ```
 
-### Default Level
+## Default Level
 
 Control the base typography level for the content.
 
@@ -71,7 +69,7 @@ Control the base typography level for the content.
 </Stack>
 ```
 
-### Text Alignment
+## Text Alignment
 
 Align text to left, center, or right.
 
@@ -82,7 +80,7 @@ Align text to left, center, or right.
 />
 ```
 
-### Colors
+## Colors
 
 Apply different color themes to the markdown content.
 
@@ -96,7 +94,7 @@ Apply different color themes to the markdown content.
 </div>
 ```
 
-### Text Color
+## Text Color
 
 Use specific text colors from the theme palette.
 
@@ -108,7 +106,7 @@ Use specific text colors from the theme palette.
 </Stack>
 ```
 
-### Accent Color
+## Accent Color
 
 Highlight text with custom accent color using `||text||` syntax.
 
@@ -119,7 +117,7 @@ Highlight text with custom accent color using `||text||` syntax.
 </Stack>
 ```
 
-### Bold Font Weight
+## Bold Font Weight
 
 Customize the weight of bold text.
 
@@ -139,7 +137,7 @@ Customize the weight of bold text.
 </Stack>
 ```
 
-### Strikethrough
+## Strikethrough
 
 GFM strikethrough support using `~text~` syntax.
 
@@ -147,7 +145,7 @@ GFM strikethrough support using `~text~` syntax.
 <Markdown content="I am markdown with ~strikethrough~" />
 ```
 
-### Tables
+## Tables
 
 Full GFM table support with alignment options.
 
@@ -157,7 +155,7 @@ Full GFM table support with alignment options.
 />
 ```
 
-### Code Blocks
+## Code Blocks
 
 Inline code and fenced code blocks with syntax highlighting.
 
@@ -167,7 +165,7 @@ Inline code and fenced code blocks with syntax highlighting.
 />
 ````
 
-### Task Lists
+## Task Lists
 
 Interactive task list checkboxes.
 
@@ -177,7 +175,7 @@ Interactive task list checkboxes.
 />
 ```
 
-### Blockquotes
+## Blockquotes
 
 Styled blockquotes for quoted content.
 
@@ -187,7 +185,7 @@ Styled blockquotes for quoted content.
 />
 ```
 
-### Lists
+## Lists
 
 Ordered and unordered lists with nesting support.
 
@@ -197,7 +195,7 @@ Ordered and unordered lists with nesting support.
 />
 ```
 
-### GFM Complete
+## GFM Complete
 
 Full demonstration of all GFM features.
 
@@ -227,9 +225,7 @@ Full demonstration of all GFM features.
 - **Critical UI text**: Use Typography for button labels, form labels, etc.
 - **Structured data**: Use DataTable or custom components for tabular data
 
-## Common Use Cases
-
-### Article/Blog Content
+## Article/Blog Content
 
 ```tsx
 function ArticlePage({ article }) {
@@ -257,7 +253,7 @@ function ArticlePage({ article }) {
 }
 ```
 
-### Comment with Formatting
+## Comment with Formatting
 
 ```tsx
 function Comment({ comment }) {
@@ -283,7 +279,7 @@ function Comment({ comment }) {
 }
 ```
 
-### Release Notes
+## Release Notes
 
 ```tsx
 function ReleaseNotes({ version, notes }) {
@@ -321,7 +317,7 @@ const releaseNotes = `
 `;
 ```
 
-### Help Documentation
+## Help Documentation
 
 ```tsx
 function HelpArticle({ title, content }) {
@@ -369,7 +365,7 @@ Contact us at [support@example.com](mailto:support@example.com).
 `;
 ```
 
-### Task Description with Checklist
+## Task Description with Checklist
 
 ```tsx
 function TaskDetails({ task }) {
@@ -406,7 +402,7 @@ Make sure to follow the ||coding standards|| and add proper error handling.
 `;
 ```
 
-### Notification Content
+## Notification Content
 
 ```tsx
 function NotificationDetail({ notification }) {
@@ -431,7 +427,7 @@ const notification = {
 };
 ```
 
-### Email Preview
+## Email Preview
 
 ```tsx
 function EmailPreview({ subject, body }) {
@@ -453,7 +449,7 @@ function EmailPreview({ subject, body }) {
 }
 ```
 
-### API Documentation
+## API Documentation
 
 ```tsx
 function APIDocumentation({ endpoint }) {